调用 BootStrap Table 方法的语法:
$(\'#table\').bootstrapTable(\'method\', parameter);
例如:
$(\'#my_table\').bootstrapTable(\'refreshOptions\', { data: tabledata }); //刷新表格 tabledata 为数据
$("#my_table").bootstrapTable(\'removeAll\'); //清空表格数据
$(\'#my_table\').bootstrapTable(\'destroy\'); //销毁表格数据
$("#my_table").bootstrapTable(\'refresh\') //刷新表格
$("#my_table").bootstrapTable(\'getSelections\'); //获取选中数据
调用BootStrap Table事件的方法:
$(\'#table\').bootstrapTable({onEventName: function (arg1, arg2, ...){ } })
$(\'#table\').on(\'event-name.bs.table\', function (e, arg1, arg2, ...) { })
例如:
$(\'#table\').on(\'click-row.bs.table\', function (e, arg1, arg2, ...) {
})
一、方 法
方法名参数描述getOptionsnone获取表格的参数getSelectionsnone获取当前被选中的行getAllSelectionsnone获取当前被选中的行数据,包含搜索和过滤前的showAllColumnsnone展示所有列hideAllColumnsnone隐藏所有列getDatauseCurrentPage获取当前表格中加载的数据,参数useCurrentPage为true 将返回当前页内的数据getRowByUniqueIdid根据唯一ID获取行数据loaddata将新数据加载到表格中appenddata将新数据追加到表格末尾prependdata将新数据插入到表格头部removeparams从表格中移除列名为指定值的数据,包含2个参数field: 列名values: 列名取值数组removeAll-移除表格中的所有数据removeByUniqueIdid根据唯一ID移除行数据insertRowparams插入多个新行到指定位置,每一行包含以下参数index:要插入到行的索引row: 要插入的行数据updateRowparams更新指定的行,每一行包含以下参数index:要插入到行的索引row: 要插入的行数据updateByUniqueIdparams根据唯一ID更新行数据每一行包含以下参数id: 唯一IDrow: 新的行数据showRowparams显示指定行,至少需包含以下任意参数index:行索引uniqueId:行唯一IDhideRowparams隐藏指定行,至少需包含以下任意参数index:行索引getHiddenRowsboolean获取所有隐藏的行数据,当参数为 true 会将隐藏行进行显示mergeCellsoptions合并多个单元格,包含以下参数index: 行索引field: 列名称rowspan: 合并多少行colspan: 合并多少列updateCellparams更新一个单元格数据,包含以下参数index: 行索引field: 列名称value: 新列值禁止表格重新初始化需添加参数{reinit: false}refreshparams重新加载远程数据,可以设置 {silent: true}静默加载数据,同时设置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改变数据请求地址和分页参数,请求参数通过 {query: {foo: \'bar\'}} 修改refreshOptionsoptions刷新表格的参数resetSearchtext设置搜索内容showLoadingnone显示数据加载状态提示hideLoadingnone隐藏数据加载状态提示checkAllnone选中当前页的所有行uncheckAllnone取消选中当前页的所有行checkInvertnone对当前页内行数据进行反选,会触发onCheckSome 和 onUncheckSome 事件checkindex选中某一行,索引从0开始uncheckindex取消选中某一行,索引从0开始checkByparams根据列名选则行数据field: 列名称values:列取值数组$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})uncheckByparams根据列名取消选中行数据field: 列名称values:列取值数组$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})resetViewparams重置表格视图resetWidthnone重新设置列头和列尾的宽度去适应当前列的宽度destroynone销毁表格showColumnfield显示指定列hideColumnfield隐藏指定列getHiddenColumns-获取隐藏的列getVisibleColumns-获取可见的列scrollTovalue使滚动条滚动到指定位置,单位像素,\'bottom\' 滚动条滚动到底getScrollPositionnone获取当前滚动条的位置,单位像素filterByparams在client模式下,对表格数据进行过滤,语法示例如下{age: 10, hairColor: ["blue", "red", "green"]}selectPagepage跳转到指定页prevPagenone上一页nextPagenone下一页togglePaginationnone切换分页参数toggleViewnone切换 card/table 视图expandRowindex当详细视图设置为True时,展开指定索引的行的详细视图collapseRowindex当详细视图设置为True时,收起指定索引的行的详细视图expandAllRowsis subtable当详细视图设置为True时,展开所有行的详细视图collapseAllRowsis subtable当详细视图设置为True时,收起所有行的详细视图updateCellByIdparams根据唯一ID更新指定单元格,包含以下参数id: 唯一IDfield: 要更新的列的列名称value: 新值二、事 件
事件名称JQuery事件参数描述
onAllall.bs.tablename, args任何事件触发都会同时触发该事件, 包含2个参数name: 事件名称args: 事件参数onClickRowclick-row.bs.tablerow, $element, field当点击某一行时触发,包含3个参数 row: 点击行的数据$element: 对应的元素field:所点击的单元格对应的列名称onDblClickRowdbl-click-row.bs.tablerow, $element, field当双击击某一行时触发,包含3个参数 row: 点击行的数据$element: 对应的元素field:所点击的单元格对应的列名称onClickCellclick-cell.bs.tablefield, value, row, $element当点击某一个单元格时触发,包含4个参数field: 所点击的单元格对应的列名称 value: 所点击的单元格对应列的值row:单元格所在行数据$element: 对应的元素onDblClickCelldbl-click-cell.bs.tablefield, value, row, $element当双击某一个单元格时触发,包含4个参数field: 所点击的单元格对应的列名称 value: 所点击的单元格对应列的值row:单元格所在行数据$element: 对应的元素onSortsort.bs.tablename, order当用户点击列头对某一列进行排序时触发,包含2个参数name: 排序的列名称order: 排序方式onCheckcheck.bs.tablerow, $element当用户选中一行时触发,包含2个参数row: 所选中行的行数据$element: 选中的元素onUncheckuncheck.bs.tablerow, $element当用户取消选中一行时触发,包含2个参数row: 所取消选中的行数据$element: 选中的元素onCheckAllcheck-all.bs.tablerows当用户点击全选框时触发,包含1个参数 rows: 选中的行数据数组onUncheckAlluncheck-all.bs.tablerows当用户点击全选框取消选择时触发,包含1个参数 rows: 取消选中的行数据数组onCheckSomecheck-some.bs.tablerows当用户选中某些行时触发,包含1个参数 rows: 选中的行数据数组onUncheckSomeuncheck-some.bs.tablerows当用户取消选中某些行时触发,包含1个参数 rows: 取消选中的行数据数组onLoadSuccessload-success.bs.tabledata当远程数据被加载完成后触发onLoadErrorload-error.bs.tablestatus, res当远程数据被加载出错后触发onColumnSwitchcolumn-switch.bs.tablefield, checked当切换列的显示状态(可见或不可见)时触发onColumnSearchcolumn-search.bs.tablefield, text对列内容进行搜索时触发onPageChangepage-change.bs.tablenumber, size当切换每页条数时触发onSearchsearch.bs.tabletext当对表格内容进行搜索时触发onToggletoggle.bs.tablecardView当切换表格的显示视图时触发onPreBodypre-body.bs.tabledata在对表格体进行渲染前触发onPostBodypost-body.bs.tabledata在表格体渲染完成,并在 DOM 中可见后触发onPostHeaderpost-header.bs.tablenone在表格列头渲染完成,并在 DOM 中可见后触发onExpandRowexpand-row.bs.tableindex, row, $detail当点击详情按钮展开详情视图时触发onCollapseRowcollapse-row.bs.tableindex, row当点击关闭详情按钮收起详情视图时触发onRefreshOptionsrefresh-options.bs.tableoptions当刷新表格选项时,在销毁当前表格并重新初始化新表格之前触发onResetViewreset-view.bs.table 当重置表格视图时触发onRefreshrefresh.bs.tableparams当点击刷新按钮对表格进行刷新时触发onScrollBodyscroll-body.bs.table 当对表格体进行滚动时触发
三、配 置
前往: 基于bootstrap table配置的二次封装
参考api:https://bootstrap-table.com/docs/api/table-options/#height
【文章转自日本多IP站群服务器 http://www.558idc.com/japzq.html提供,感恩】