示例 · PHP笔记

[TOC] 官方示例代码:[GitHub - wenzhixin/bootstrap-table-examples: Bootstrap table examples](https://github.com/wenzhixin/bootstrap-table-examples) 简单初始化表格 ``` var options = {} $('#table').init(options); ``` # **获取** ## **获取数据条数(获取总条数)** ~~~javascript //bootstrapTable获取数据条数(获取总条数) var totalNum= $('#tb_TableStudent').bootstrapTable('getOptions').totalRows; alert(totalNum); ~~~ ## **获取当前行(行号)** ~~~javascript //bootstrapTable获取当前行(行号) $('#tb_Table').on("click-row.bs.table",function(e, row, $element) { var index = $element.data('index'); alert(index); }); ~~~ ## **获取全部数据/本页数据** bootstrapTable('getData',useCurrentPage=true); 获取当前表格中加载的数据，参数useCurrentPage为true 将返回当前页内的数据 ~~~javascript //获取全部数据(本页) var list = $("#table").bootstrapTable('getData'); console.log(list); ~~~ ## **获取某列所有数据（值）** ``` var ids=JSON.stringify( $("#table").bootstrapTable('getData').map(function (row) {return row.id})) ``` ## **获取某行数据** ~~~javascript //获取某行数据 var list = $("#tb_TableStudent").bootstrapTable('getData')[0]; console.log(list); ~~~ ## **根据唯一ID获取行数据**：getRowByUniqueId ~~~ $("#table").bootstrapTable('getRowByUniqueId', 3) ~~~ ## **获取选中行数据(当前分页)** ~~~javascript //获取选中行数据 var rows = $("#table").bootstrapTable('getSelections'); ~~~ ## **获取选中行的某列数据** ``` var rows = $.map($('#table')..bootstrapTable('getSelections'), function (row) { return row[column]; }); 如:获取列中id idsArr=$.map($('#table').bootstrapTable('getSelections'), function (row) {return row.id}) //转成,隔开的字符串 ids=rows.join(); ``` ## **获取隐藏的列、获取可见的列** ~~~ $("#table").bootstrapTable('getHiddenColumns'); 获取隐藏的列 $("#table").bootstrapTable('getVisibleColumns'); 获取可见的列 ~~~ ## **显示/隐藏指定行** ~~~ $("#table").bootstrapTable('showRow',index,uniqueId); 显示指定行，至少需包含两个任意参数 $("#table").bootstrapTable('hideRow',row,index); 隐藏指定行，至少需包含以下任意参数 ~~~ ## **显示/隐藏指定列** ~~~ $("#table").bootstrapTable('showColumn',field); 显示指定列 $("#table").bootstrapTable('hideColumn',field); 隐藏指定列 ~~~ # **插入** ## **向后追加1行或多数据** ``` table.bootstrapTable('append', [{'specs1':1,'specs2':'dash'},{'specs1':2,'specs2':'dash2'}]) ``` ## **指定索引插入一行或多数据** ``` table.bootstrapTable('insertRow', { index: 0,//表顶部插入一行 row: { id: '', name: '', price: '' } }); ``` ## **向前（头部）追加1行或多数据** 将新数据插入到表格头部 data的格式与load一样 ~~~ bootstrapTable('prepend',data); ~~~ # **更新、刷新** ## **重新加载远程数据** 重新加载远程数据，可以设置 {silent: true}静默加载数据，同时设置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改变数据请求地址和分页参数，请求参数通过 {query: {foo: 'bar'}} 修改 ~~~ bootstrapTable('refresh ',{}); ~~~ ``` $("#refresh_button").click(function (){ var opt = { url: "http://local/api/data/?format=json", silent: true, query:{ type:1, level:2 } }; $("#item_table").bootstrapTable('refresh', opt); }); ``` ## **刷新表格的参数** ~~~ bootstrapTable('refreshOptions',options); 更新表格的参数 ~~~ ## **将新数据加载到表格中** **触发一定条件来刷新Bootstrap Table数据**，核心为 `$("#workTable").bootstrapTable('load', data);` ``` $('#rolelist li').on('click', function () { let count=$(this).index() let rolecontent=$('#rolelist li').eq(count).text() $('#current_role').text(rolecontent) let deliver_id = $(this).attr('data-roleid') $.ajax({ type: 'POST', url: '/user/refresh', async: false, data: { role: deliver_id }, success: function (data) { console.log(data) $("#workTable").bootstrapTable('load', data) // 根据Json动态加载Table } }) ``` ## **更新一个单元格**：updateCell ~~~ //要禁用表重新初始化，您可以设置`{reinit: false}` $table.bootstrapTable('updateCell', {index: 1, field: 'name', value: 'Updated Name'}) ~~~ ## **更新id指定的一个单元格**：updateCellByUniqueId ~~~ $table.bootstrapTable('updateCellByUniqueId', {id: 3, field: 'name', value: 'Updated Name'}) ~~~ ## **更新指定的行**：updateRow ~~~ $table.bootstrapTable('updateRow', {index: 1, row: row}) ~~~ ## **更新指定的行**: updateByUniqueId ~~~ $table.bootstrapTable('updateByUniqueId', {id: 3, row: {'name':'dash',"price":200,...}}) ~~~ # **删除** ## **销毁表格** ~~~ ootstrapTable('destroy'); 销毁表格 ~~~ ## **移除表格中的所有数据** ~~~ bootstrapTable('removeAll'); 移除表格中的所有数据 ~~~ ## **删除指定id的一行数据bootstrapTable('removeByUniqueId', id)** 从表中删除数据，该行包含`id`传递的参数:removeByUniqueId ~~~ $table.bootstrapTable('removeByUniqueId', 3) ~~~ ## **从表格中移除列名为指定值的一行或多行数据** bootstrapTable('remove',field,values); 从表格中移除列名为指定值的数据，包含2个参数field: 列名values: 列名取值数组，格式：[]、[1]、[1,2,...] 如下：移除选中数据id值的数据 ``` $(function() { //移除选中数据id值的数据 $button.click(function () { $table.bootstrapTable('remove', { field: 'id', values: $.map($table.bootstrapTable('getSelections'), function (row) {return row.id}) }) }) ``` ## **移除指定索引的数据** 新增于[v1.17.1](https://github.com/wenzhixin/bootstrap-table/releases/tag/1.17.1) ``` //移除索引为1的数据 $button1.click(function () { $table.bootstrapTable('remove', { field: '$index', values: [1] }) }) }) ``` 之前替代方法 ``` /*删除行*/ $("#delRow").on("click", function () { var data = table.bootstrapTable('getData'); var index = $('???').attr('data-index');//要删除行的data-index data.splice(index, 1); $("#table").bootstrapTable('load', data); }) ``` # **重置搜索内容** ``` bootstrapTable('resetSearch',text); ``` # **选中、取消选中行** ~~~ bootstrapTable('check',index); 选中某一行，索引从0开始 bootstrapTable('uncheck',index); 取消选中某一行，索引从0开始 ~~~ ## **根据列名选则行数据** ~~~ bootstrapTable('checkBy',field,{value,...}}); 根据列名选则行数据 $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]}) ~~~ ## **根据列名取消选中行数据** ~~~ bootstrapTable('uncheckBy',field,{value,...}}); ~~~ ## **选中当前页的所有行** ~~~ bootstrapTable('checkAll'); 选中当前页的所有行 ~~~ ## **取消选中当前页的所有行** ~~~ bootstrapTable('uncheckAll'); ~~~ ## **对当前页内行数据进行反选** 会触发onCheckSome 和 onUncheckSome 事件 ~~~ bootstrapTable('checkInvert'); ~~~ # **合并单元格** 合并多个单元格 index: 行索引 field: 列名称 rowspan: 合并多少行 colspan: 合并多少列 ~~~ bootstrapTable('mergeCells',index,field,rowspan,colspan); ~~~ # **跳转到指定分页** ~~~ bootstrapTable('selectPage',page); ~~~ # **滚动** ## **滚动到指定位置，单位像素** ``` table.bootstrapTable('scrollTo', '20px');//定位到指定位置 table.bootstrapTable('scrollTo', 'bottom');//定位到最后一行bottom ``` ## **获取当前滚动条的位置，单位像素** ~~~ bootstrapTable('getScrollPosition'); ~~~