欢迎访问新酱博客!

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

Asp.Net 新酱 阅读:514 0评论

引入相应的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);

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

实例效果图

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

新酱博客 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨网站采用BY-NC-SA协议进行授权
转载请注明原文链接:https://www.xiaorenjc.net/104.html
喜欢 (0)
评论头像
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址