bootstrap-table的基本使用方法和属性

新酱
149
文章
37
评论
2019年5月26日12:28:25 评论 31,656 6686字阅读22分17秒

引入相应的js、css

先引入jQuery,jQuery必须在前面!

引入bootstrap的js和css

下载bootstrap-table的js和css并引用到项目中=>传送门

使用bootstrap-table

创建一个table标签,给这个标签取一个id(我取的id是exampleTableToolbar),然后开始写javascript代码

url是后台返回的json,columns是后台查询的字段,field必须与后台处理的字段一样,我后台如下

单选或多选获取行id来删除数据

delete是我的删除按钮的id,通过getSelections方法获取选中行的数据(为数组),若是没有选中getSelections获取的数组长度为0

bootstrap-table常用的属性和方法

属性

方法

定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

方法名 参数 描述 举例
getOptions none 返回各项的object $table.bootstrapTable(‘getOptions’);
      - 请查看: getOptions
getSelections none 返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行) $table.bootstrapTable(‘getSelections’);
      - 请查看: getSelections
getAllSelections none 返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组 $table.bootstrapTable(‘getAllSelections’);
      - 请查看: getAllSelections
showAllColumns none 显示所有的列 $table.bootstrapTable(‘showAllColumns’);
      - 就是显示所有的列,并没什么可说的
hideAllColumns none 隐藏所有的列 $table.bootstrapTable(‘hideAllColumns’);
      - 就是隐藏所有的列
getData useCurrentPage 获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据 $table.bootstrapTable(‘getData’);
      - 请查看: getData
getRowByUniqueId id 获取你想要的某行的数据(设置某行的id) $table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID
      - 请查看: getRowByUniqueId
load data 向表中加载数据,原来的数据将被移除 $table.bootstrapTable(‘load’, data);
      - 请查看: load
append data 将数据追加在最后一行后 $table.bootstrapTable(‘append’, data);data可以是数组
      - 请查看: append
prepend data 也是追加,只是在第一行之前 $table.bootstrapTable(‘prepend’, data);data可以是数组
      - 请查看: prepend
remove params 移除一行或多行你所选的数据 $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); 
      - id:所需移除的那一行(rows,一或多行)的字段 
      - values:被移除的行的数组 
      - 请查看: remove
removeAll - 移除表中所有的数据 $table.bootstrapTable(‘removeAll’); 
      - 请查看: removeAll
removeByUniqueId - 移除某行数据(设置某行的id) $table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID 
      - 请查看: removeByUniqueId
insertRow params 新增一行,所需的参数如下: 
      - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁) 
      - row:你想插入的数据
$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); 
      - 请查看: insertRow
updateRow params 更新行数据,所需的参数如下: 
      - index:所要更新的行的索引(index) 
      - row:你想换的新的数据
$table.bootstrapTable(‘updateRow’, {index: 1, row: row}); 
      - 请查看: updateRow 
      - 请查看: Bootstrap Table实现定时刷新数据
updateByUniqueId params 更新某行数据,所需的参数如下: 
      - id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个) 
      - row:你想换的新的数据
$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); 
      - 请查看: updateByUniqueId
showRow params 显示特定行,所需的参数至少包括下面所列的一个: 
      - id:所要显示的行的索引(index) 
      - uniqueId:那一行的id
$table.bootstrapTable(‘showRow’, {index:1}); 
      - 请查看: showRow/hideRow
hideRow params 隐藏特定行,所需的参数至少包括下面所列的一个: 
      - id:所要隐藏的行的索引(index) 
      - uniqueId:那一行的id
$table.bootstrapTable(‘hideRow’, {index:1}); 
      - 请查看: showRow/hideRow
getRowsHidden boolean 获取隐藏的行(官方原话很多,其实总结起来就前面那一句) $table.bootstrapTable(‘getRowsHidden’);
方法名 参数 描述 举例
mergeCells options 融合~(把多格合并为一格),所需的参数如下: 
      - index:所要合并的格所在行的索引(index) 
      - field:所在列的字段名 
      - rowspan:合并的行总数目 
      - colspan:合并的列总数目
$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3});
      - 请查看: mergeCells
updateCell params 更新某格数据,所需的参数如下: 
      - index:所要合并的格所在行的索引(index) 
      - field:所在列的字段名 
      - value:要换的新的数据 
你也可以设置{reinit:false}来禁用表格的再次初始化
$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value});
refresh params 刷新服务端的数据: 
      - 可以设置{silent:true}来 偷偷地(<_<) 刷新 
      - 设置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改变请求的地址,页数,每页所显示的条数 
      - 可以设置{query:{foo:’bar’}}增加特定的参数
$table.bootstrapTable(‘refresh’);
      - 请查看: refresh
refreshOptions options 看例子吧       - 请查看: refreshOptions
resetSearch text 重置搜索的文本(text)       - 请查看: resetSearch
showLoading none 显示正在加载……       - 请查看: showLoading/hideLoading
hideLoading none 隐藏正在加载……       - 请查看: showLoading/hideLoading
checkAll none 选择当前页的所有行 $table.bootstrapTable(‘checkAll’);
      - 请查看: checkAll/uncheckAll
uncheckAll none 取消选择当前页的所有行 $table.bootstrapTable(‘uncheckAll’);
      - 请查看: checkAll/uncheckAll
checkInvert none 反向选择,不难理解吧 $table.bootstrapTable(‘checkInvert’);
check index 选择某一行,索引(index)从0开始 $table.bootstrapTable(‘check’, 1);
      - 请查看: check/uncheck
uncheck index 取消选择某一行,索引(index)从0开始 $table.bootstrapTable(‘uncheck’, 1);
      - 请查看: check/uncheck
checkBy params 通过数组选择某一行,所需的参数如下: 
      - field:所要选的字段名 
      - values:所要选的那些值(数组)
官方没,啊,有例纸:
- $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看: checkBy/uncheckBy
uncheckBy params 通过数组选择某一行,所需的参数如下: 
      - field:所要取消选择的字段名 
      - values:所要取消选择的那些值(数组)
$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看: checkBy/uncheckBy
resetView params 改变表格的样式,例如改变表格的高度(height) $table.bootstrapTable(‘resetView’);
      - 请查看: resetView
resetWidth none 自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度 $table.bootstrapTable(‘resetWidth’);
destroy none 销毁表格 A!T!T!A!C!K! $table.bootstrapTable(‘destroy’);
      - 请查看: destroy
showColumn field 显示特定的列 $table.bootstrapTable(‘showColumn’, ‘name’);
      - 请查看: showColumn/hideCoulumn
hideColumn field 隐藏特定的列 $table.bootstrapTable(‘hideColumn’, ‘name’);
      - 请查看: showColumn/hideCoulumn
方法名 参数 描述 举例
getHiddenColumns - 获取所有隐藏的列 $table.bootstrapTable(‘getHiddenColumns’);
getVisibleColumns - 获取所有显示的列 $table.bootstrapTable(‘getVisibleColumns’);
scrollTo value 滚……到哪个位置,单位是’px’,如果设为’bottom’,嗖,恭喜你已到表尾 $table.bootstrapTable(‘scrollTo’, 0);
      - 请查看: scrollTo
getScrollPosition none 获取当前所滚到的位置,单位你懂得,就是’px’ $table.bootstrapTable(‘getScrollPosition’);
filterBy none 只能在客户端(client-side,相对server-side)这边用,过滤表中的数据 
例如: 
      - 可以设置{age:10}来只显示age为10的数据 
      - 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: [“blue”, “red”, “green”]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据
$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] });
      - 请查看: filterBy
selectPage page 跳转到特定的页面 $table.bootstrapTable(‘selectPage’, 1);
      - 请查看: selectPage/prevPage/nextPage
prevPage none 跳转到上一页 $table.bootstrapTable(‘prevPage’);
      - 请查看: selectPage/prevPage/nextPage
nextPage none 跳转到下一页 $table.bootstrapTable(‘nextPage’);
      - 请查看: selectPage/prevPage/nextPage
togglePagination none 词穷,请看例纸 $table.bootstrapTable(‘togglePagination’);
      - 请查看: togglePagination
toggleView none 改变视图 $table.bootstrapTable(‘toggleView’);
      - 请查看: toggleView
expandRow index 可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用 
      - 通过参数index来展开此列的详细视图
      - 请查看: expandRow-collapseRow
collapseRow index 可使用条件:detail view设为了true 
      - 通过参数index来关闭此列的详细视图
      - 请查看: expandRow-collapseRow
expandAllRow is subtable 可使用条件:detail view设为了true 
      - 展开所有列的详细视图
$table.bootstrapTable(‘expandAllRow’); 
      - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的
collapseAllRow is subtable 可使用条件:detail view设为了true 
      - 关闭所有列的详细视图
$table.bootstrapTable(‘collapseAllRow’); 
      - 参考上面

实例效果图

bootstrap-table的基本使用方法和属性
bootstrap-table的基本使用方法和属性

 

  • 版权声明: 发表于 2019年5月26日12:28:25
  • 转载注明:https://www.xiaorenjc.net/program/asp-net/104

您必须才能发表评论!