bootstrapTable · PHP笔记

[TOC] >[info][一个详细的教程](https://www.cnblogs.com/landeanfen/p/4976838.html) [bootstrap table使用总结](https://www.cnblogs.com/wdcwy/p/6590855.html) [BootstrapTable使用实例](https://www.cnblogs.com/samve/p/9757847.html) [中文文档](https://www.bootstrap-table.com.cn/doc/api/table-options/) [GridManager - 极简的代码实现多态的表格 (lovejavascript.com)](https://gridmanager.lovejavascript.com/#gm-install-flag) >[danger] row就是行，columns就是列 > js获取table的tr、td需要在表格体加载完成之后才行`$('#bootstrap-table').on('post-body.bs.table', function (data){})` 重要表属性 ~~~ visible:true,//设置为false以隐藏列项。 data: dataType:'json' dataField:'rows' totalField:'total' classes:'table table-bordered table-hover',//表的类名。其他类名参考：`'table'` `'table-bordered'(列内外(竖)边框)` `'table-hover'(指向单元格变色)` `'table-striped'(行灰白相间)` `'table-dark'(灰黑背景)` `'table-sm'(紧凑型表格)` `'table-borderless'(去掉内边框)`默认情况下，表格是有界的。关闭toolBar showSearch: false, showRefresh: false, showToggle: false, showColumns: false ~~~ ## 重要的东西：首先**获取options**：getOptions 组装好options后刷新选项： refreshOptions 然后**获取data数据** ： getData 组装好data后，**<span style="color:blue">将数据加载到表中</span>**，旧行将被删除：`$table.bootstrapTable('load', data)`. responseHandler方法也可以返回用于渲染的数据 **向表格后面追加数据**(可追加一条或多条)：append ``` $table.bootstrapTable('append', [{'id':1,'name':'dash'},{},...]) $table.bootstrapTable('scrollTo', 'bottom')//将scroll滚动条滚动到最下面 ``` 刚才向后追加了，这里就是**向前追加数据**(可追加一条或多条)：$table.bootstrapTable('prepend', data) **指定的位置插入新的一行数据**：$table.bootstrapTable('insertRow', {index: 1, row: row}) ``` $table.bootstrapTable('insertRow', { index: 1, row: { id: randomId, name: 'Item ' , price: '200' } }) ``` **刷新远程数据** ``` $("#refresh_button").click(function (){ var opt = { url: "http://local/api/data/?format=json",//可选，如果你不变更请求地址可省略 silent: true,//静默刷新数据 pageNumber:"1",当前页码，可选 pageSize:"".//每页显示多少数据，可选 query:{//查询参数 type:1, level:2 } }; $("#item_table").bootstrapTable('refresh', opt); }); ``` **销毁表**：$table.bootstrapTable('destroy') 切换分页选项（开启、关闭分页、开启、关掉分页）:`$table.bootstrapTable('togglePagination')`将分页表格切换为滚动条 **更新一个单元格**：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,...}}) ``` 从表中删除数据，该行包含`id`传递的参数:removeByUniqueId ``` $table.bootstrapTable('removeByUniqueId', 3) ``` **从表中获取一行数据**：getRowByUniqueId # [BootStrap Table：事件、方法、多语言](https://blog.csdn.net/pengjunlee/article/details/80659747) ## **事件event** **事件函数的用法：** ~~~ 方法1：通过option对象 $('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) {// ...} }) //通过option对象的例子： var table=$('#user'); table.bootstrapTable({ onAll: function (arg1, arg2, ...) {}, onClickRow: function (arg1, arg2, ...) {}, } 方法2:jquery事件处理程序 $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {// ...}) //jquery事件处理程序的例子，第一个参数event-name部分就是onAll事件去掉on转小写驼峰加_ $('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) {}) $('#bootstrap-table').on('click-row.bs.table', function (row, $element, field) { //onClickRow //alert(单击行事件); }) $('#bootstrap-table').on('dbl-click-row.bs.table', function (row, $element, field) { //onClickRow //alert(双击行事件); }) $('#bootstrap-table').on('click-cell.bs.table', function (field, value, row, $element) { //onClickCell //alert(单击单元格事件); }) $('#bootstrap-table').on('dbl-click-cell.bs.table', function (field, value, row, $element) { //onDblClickCell //alert(双击单元格事件); }) ~~~ **事件api** * [onAll](https://bootstrap-table.com/docs/api/events/#onall)(name,args) **任何事件触发都会同时触发该事件**（事件名称|事件数据） all.bs.table * [onClickRow](https://bootstrap-table.com/docs/api/events/#onclickrow)(row, $element, field) **当点击某一行时触发**（出发改事件这一行的数据|tr元素|与单击的单元格对应的字段名称） click-row.bs.table * [onDblClickRow](https://bootstrap-table.com/docs/api/events/#ondblclickrow)( `row, $element, field`) **当双击击某一行时触发**(参数同上) dbl-click-row.bs.table * [onClickCell](https://bootstrap-table.com/docs/api/events/#onclickcell)(field, value, row, $element) **当点击某一个单元格时触发**(单击的单元格对应的字段名|该单元格的数据值|对应于单击行的记录|td元素) click-cell.bs.table * [onDblClickCell](https://bootstrap-table.com/docs/api/events/#ondblclickcell)(field, value, row, $element) 当双击某一个单元格时触发（参数同上） dbl-click-cell.bs.table * [onSort](https://bootstrap-table.com/docs/api/events/#onsort)(name, order) 当用户点击表头对某一字段列进行排序时触发(该列字段名称|排序列顺序) sort.bs.table * [onCheck](https://bootstrap-table.com/docs/api/events/#oncheck)(row, $element) 当用户选中一行时触发(对应于单击行的记录|选中的DOM元素) check.bs.table * [onUncheck](https://bootstrap-table.com/docs/api/events/#onuncheck)(row, $element) 当用户取消选中一行时触发（参数同上） uncheck.bs.table * [onCheckAll](https://bootstrap-table.com/docs/api/events/#oncheckall)(rows) 当用户点击全选框时触发 (与选中的行对应的数据数组) check-all.bs.table * [onUncheckAll](https://bootstrap-table.com/docs/api/events/#onuncheckall)(rows) 当用户点击全选框取消选择时触发（与取消的行对应的表数据数组） uncheck-all.bs.table * [onCheckSome](https://bootstrap-table.com/docs/api/events/#onchecksome)(rows) 当用户选中某些行时触发 check-some.bs.table * [onUncheckSome](https://bootstrap-table.com/docs/api/events/#onunchecksome)(rows) 当用户取消选中某些行时触发 uncheck-some.bs.table * [onLoadSuccess](https://bootstrap-table.com/docs/api/events/#onloadsuccess)(data) 当远程数据被加载完成后触发当服务器发送的格式不和规范在这里修改在返回 load-success.bs.table * [onLoadError](https://bootstrap-table.com/docs/api/events/#onloaderror)(status, jqXHR) 当远程数据被加载出错后触发（jqXHR的状态代码|XMLHTTPRequest对象） load-error.bs.table * [onColumnSwitch](https://bootstrap-table.com/docs/api/events/#oncolumnswitch)(field, checked) 当切换列的显示状态（可见或不可见）时触发（该列字段名|该列的选中状态） column-switch.bs.table * [onPageChange](https://bootstrap-table.com/docs/api/events/#onpagechange) (number, size) 当切换每页条数时触发（页码，每页多少条） page-change.bs.table * [onSearch](https://bootstrap-table.com/docs/api/events/#onsearch)( `text`) 当对表格内容进行搜索时触发 search.bs.table * [onToggle](https://bootstrap-table.com/docs/api/events/#ontoggle)(cardView表的cardView状态) 当切换表格的显示视图时触发 toggle.bs.table * [onPreBody](https://bootstrap-table.com/docs/api/events/#onprebody)(data渲染数据) 在对表格体进行渲染前触发 pre-body.bs.table * [onPostBody](https://bootstrap-table.com/docs/api/events/#onpostbody)(data) 在表格体渲染完成，并在 DOM 中可见后触发 post-body.bs.table * [onPostHeader](https://bootstrap-table.com/docs/api/events/#onpostheader)(undefined) 在表格列头渲染完成，并在 DOM 中可见后触发 post-header.bs.table * [onExpandRow](https://bootstrap-table.com/docs/api/events/#onexpandrow)(index, row, $detail) 当点击详情按钮展开详情视图时触发 expand-row.bs.table * [onCollapseRow](https://bootstrap-table.com/docs/api/events/#oncollapserow)(index, row) 当点击关闭详情按钮收起详情视图时触发 collapse-row.bs.table * [onRefreshOptions](https://bootstrap-table.com/docs/api/events/#onrefreshoptions)(options) 当刷新表格选项时，在销毁当前表格并重新初始化新表格之前触发 refresh-options.bs.table * [onResetView](https://bootstrap-table.com/docs/api/events/#onresetview)(undefind) 当重置表格视图时触发 reset-view.bs.table * [onRefresh](https://bootstrap-table.com/docs/api/events/#onrefresh)(params) 当点击刷新按钮对表格进行刷新时触发(请求到服务器的附加参数？) refresh.bs.table * [onScrollBody](https://bootstrap-table.com/docs/api/events/#onscrollbody)( `undefined`) 当对表格体进行滚动时触发 scroll-body.bs.table * onColumnSearch() ？？？对列内容进行搜索时触发 * onPostFooter($tableFooter) 在DOM中呈现并可用页脚后触发 post-footer.bs.table ## **方法** **用法** ~~~ $('#table').bootstrapTable('method', parameter); 如; $('#table').bootstrapTable('getOptions'); $('#table').bootstrapTable('getRowByUniqueId',id); ~~~ **方法API** ~~~ bootstrapTable('getOptions'); 获取表格的参数 bootstrapTable('getSelections'); 获取当前被选中的行 bootstrapTable('getAllSelections'); 获取当前被选中的行数据，包含搜索和过滤前的(1.18已没有此方法) bootstrapTable('showAllColumns'); 展示所有列 bootstrapTable('hideAllColumns'); 隐藏所有列 bootstrapTable('removeAll'); 移除表格中的所有数据 bootstrapTable('showLoading'); 显示数据加载状态提示 bootstrapTable('hideLoading'); 隐藏数据加载状态提示 bootstrapTable('checkAll'); 选中当前页的所有行 bootstrapTable('uncheckAll'); 取消选中当前页的所有行 bootstrapTable('checkInvert'); 对当前页内行数据进行反选，会触发onCheckSome 和 onUncheckSome 事件 bootstrapTable('resetWidth'); 重新设置列头和列尾的宽度去适应当前列的宽度(1.18 not found) bootstrapTable('destroy'); 销毁表格 bootstrapTable('getHiddenColumns'); 获取隐藏的列 bootstrapTable('getVisibleColumns'); 获取可见的列 bootstrapTable('getScrollPosition'); 获取当前滚动条的位置，单位像素 bootstrapTable('prevPage'); 上一页 bootstrapTable('nextPage'); 下一页 bootstrapTable('togglePagination'); 切换分页参数 bootstrapTable('toggleView'); 切换 card/table 视图 bootstrapTable('getData',useCurrentPage=true); 获取当前表格中加载的数据，参数useCurrentPage为true 将返回当前页内的数据 bootstrapTable('getRowByUniqueId',id); 根据唯一ID获取行数据 bootstrapTable('load',data); 将新数据加载到表格中一旦成功加载将替换原数据输出在html，data的格式为数组形式的json如：data = "[{"a": 1}, {"a": 2}]";JSON.parse(data);bootstrapTable('load',data); bootstrapTable('append',data); 将新数据加载到表格末尾中 data的格式同load一样 bootstrapTable('prepend',data); 将新数据插入到表格头部 data的格式与load一样 bootstrapTable('remove',field,values); 从表格中移除列名为指定值的数据，包含2个参数field: 列名values: 列名取值数组 bootstrapTable('removeByUniqueId',id); 根据唯一ID移除行数据 bootstrapTable('insertRow',index,row); 插入多个新行到指定位置，每一行包含以下参数 index:要插入到行的索引 row: 要插入的行数据 bootstrapTable('updateByUniqueId',id,row); 根据唯一ID更新行数据每一行 id: 唯一ID row: 新的行数据 bootstrapTable('showRow',index,uniqueId); 显示指定行，至少需包含两个任意参数 bootstrapTable('hideRow',row,index); 隐藏指定行，至少需包含以下任意参数 index:行索引 bootstrapTable('getHiddenRows',true); 获取所有隐藏的行数据，当参数为 true 会将隐藏行进行显示 bootstrapTable('mergeCells',index,field,rowspan,colspan); 合并多个单元格 index: 行索引 field: 列名称 rowspan: 合并多少行 colspan: 合并多少列 bootstrapTable('updateCell',index,field,value); 更新一个单元格数据 index: 行索引field: 列名称value: 新列值禁止表格重新初始化需添加参数{reinit: false} bootstrapTable('refresh ',{}); 重新加载远程数据，可以设置 {silent: true}静默加载数据，同时设置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改变数据请求地址和分页参数，请求参数通过 {query: {foo: 'bar'}} 修改 bootstrapTable('refreshOptions',options); 刷新表格的参数 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('resetView',{height:200}); 重置表格视图 bootstrapTable('showColumn',field); 显示指定列 bootstrapTable('hideColumn',field); 隐藏指定列 bootstrapTable('scrollTo',value); 使滚动条滚动到指定位置，单位像素，'bottom' 滚动条滚动到底 bootstrapTable('filterBy',{}); 在client模式下，对表格数据进行过滤，语法示例如下{age: 10, hairColor: ["blue", "red", "green"]} bootstrapTable('selectPage',page); 跳转到指定页 bootstrapTable('expandRow',index); 当详细视图设置为True时，展开指定索引的行的详细视图 bootstrapTable('collapseRow',index); 当详细视图设置为True时，收起指定索引的行的详细视图 bootstrapTable('expandAllRows',true); 当详细视图设置为True时，展开所有行的详细视图 bootstrapTable('collapseAllRows',true); 当详细视图设置为True时，收起所有行的详细视图 bootstrapTable('updateCellById',{id:xx,field:xx,value:xx}); 根据唯一ID更新指定单元格(1.18 not found) bootstrapTable('updateColumnTitle',——}) bootstrapTable('updateCellByUniqueId',——}) bootstrapTable('toggleFullscreen',——}) bootstrapTable('toggleDetailView',——}) bootstrapTable('expandRowByUniqueId',——}) bootstrapTable('collapseRowByUniqueId',——}) bootstrapTable('updateFormatText',——}) bootstrapTable('updateRow',——}) ~~~ ## **属性：** ~~~ var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: '/Home/GetDepartment', //请求后台的URL（*）用于从远程站点请求数据的URL method: 'get', //请求方式（*） toolbar: '#toolbar', //工具栏按钮用哪个容器一个jQuery 选择器，指明自定义的 buttons toolbar。例如:#buttons-toolbar, .buttons-toolbar 或 DOM 节点 toolbarAlign:'left' //指示如何对齐自定义工具栏。可以使用'left'，'right' buttonsToolbar:'', //一个jQuery选择器，指示按钮工具栏，例如：＃buttons-toolbar，.buttons-toolbar或DOM节点 buttonsAlign:'right', //指示如何对齐工具栏按钮。可以使用'left'，'right'。 buttonsClass:'secondary', //定义表按钮的Bootstrap类（在'btn-'之后添加） buttons:function () { //自定义工具栏按钮 return { btnUsersAdd: { text: 'Highlight Users', icon: 'fa-users', event: function () { alert('Do some stuff to e.g. search all users which has logged in the last week') }, attributes: { title: 'Search all users which has logged in the last week' } }, btnAdd: { text: 'Add new row',//按钮上显示的信息不过需要在table标签加上showButtonText=true icon: 'fa-plus',//按钮的图标 render:true//默认是否显示按钮，当为false隐藏时您添加数据属性时，该按钮再次可见 'event': {//按钮事件，如果只时单个事件可以直接使用函数如上面的那个 'click': () => { }, 'mouseenter': () => { }, 'mouseleave': () => { } }, attributes: {//为按钮添加额外属性，如这里给按钮添加title title: 'Add a new row to the table' } } } }, buttonsOrder:['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],//工具栏按钮重新排序 buttonsPrefix:'btn', // 定义表格的前缀 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*）设置为true以在表格底部显示分页工具栏默认false sortable: true, //是否启用排序列中也有此变量 sortName:'', //定义要排序的列没定义默认都不排列，同sortOrder结合使用，sortOrder没写的话列默认递增（asc） sortOrder: "asc", //定义列排序顺序，只能是'asc'或'desc'。 sortStable: false, //如果你把此属性设为了true）我们将为此行添加'_position'属性（别看错了，是sortStable，sortable在下面）设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页（默认），server服务端分页（*） silentSort:true,//设置为false以便对加载的消息数据进行排序。当sidePagination选项设置为“server”时，此选项有效。 pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: true, //是否显示表格搜索input，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, //启用严格搜索 showColumns: false, //是否显示所有的列设置为true以显示列下拉列表（一个可以设置显示想要的列的下拉f按钮） showColumnsSearch:false, //设置true 为显示对列过滤器的搜索 showColumnsToggleAll:false, //设置true 为在列选项/下拉列表中显示“全部切换”复选框。 showRefresh: true, //是否显示刷新按钮默认false minimumCountColumns: 1, //最少允许的列数要从列下拉列表中隐藏的最小列数 clickToSelect: true, //是否启用点击选中行 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 idField:'', //表明哪个是字段是标识字段 uniqueId: "ID", //表明每一行的唯一标识字段，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图设置为true以显示卡片视图表，例如mobile视图（卡片视图） detailView: false, //设置为true以显示detail 视图表（细节视图） detailViewAlign:'left', //指示如何对齐详细信息视图图标。，可以使用。'left''right' detailViewByClick:false, //设置为true时在单击单元格时切换细节视图 detailViewIcon:true, //设置为true时显示详细视图列(plus/minus图标) locale:'zh-CN', height:800, //固定表格的高度 classes:'table table-bordered table-hover',//表的类名。其他类名参考：`'table'` `'table-bordered'(列内外(竖)边框)` `'table-hover'(指向单元格变色)` `'table-striped'(行灰白相间)` `'table-dark'(灰黑背景)` `'table-sm'(紧凑型表格)` `'table-borderless'(去掉内边框)`默认情况下，表格是有界的。 theadClasses:'',// 表thead的类名如使用.thead-light或.thead-dark使theads显示为浅灰色或深灰色。 rowStyle:function(row,index){// 设置行样式的函数支持类或css 　　　　　　　　　　if(index==0){ return{ 　　　　　　　　　　　 classes:'warning', css:{'color':'red'} } } }, rowAttributes:function(row,index){// row属性formatter函数，支持所有自定义属性（给tr添加属性） return { 'data-toggle': 'popover', 'data-placement': 'bottom', 'data-trigger': 'hover', 'data-content': [ 'Index: ' + index, 'ID: ' + row.id, 'Name: ' + row.name, 'Price: ' + row.price ].join(', ') } }, undefinedText:'-',// 定义默认的未定义文本 sortClass:'',//已排序的td元素的类名 rememberOrder:false,//设置为true以记住每列的顺序 data:[],// 要加载的数据 [] or {} contentType:'application/json',//请求远程数据的contentType，例如：application/x-www-form-urlencoded。 dataType:'json',//您希望服务器返回的数据类型 totalField:'total',//Key in incoming json containing 'total' data. dataField:'rows',//名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value原文：获取每行数据json内的key onlyInfoPagination:false,//设置为true以仅显示表中显示的数据量。它需要将分页表选项即pagination设置为true paginationLoop:true,//设置为true以启用分页连续循环模式 paginationHAlign:'right',//分页条水平方向的位置，默认right（最右），可选left totalRows:0,//该属性主要由分页服务器传递，易于使用 paginationDetailHAlign:'left',//如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录每页显示 8 条记录”，默认left（最左），可选right paginationVAlign:'bottom',//分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条） paginationPreText:'<',//上一页的按钮符号 paginationNextText:'>',//下一页的按钮符号 paginationSuccessivelySize:5,//分页时会有<12345...80>这种格式而5则表示显示...左边的的页数 paginationPagesBySide:1,//...右边的最大连续页数如改为2则 <1 2 3 4....79 80> paginationUseIntermediate:false,//计算并显示中间页面以便快速访问 true 会将...替换为计算的中间页数42 paginationParts:['pageInfo', 'pageSize', 'pageList'],//定义了分页信息哪些部分可见'pageInfo'(显示总行数且此页行范围), 'pageSize'(每页多少行下拉框), 'pageList'(分页按钮),'pageInfoShort'(只显示总行数) searchOnEnterKey:false,// true时搜索方法将一直执行，直到按下Enter键（即按下回车键才进行搜索） trimOnSearch:true,//默认true，自动忽略空格 searchAlign:'right',//指定搜索输入框的方向。可以使用'left'，'right'。 searchTimeOut:500,//设置搜索触发超时 searchText:'',//设置搜索文本框的默认搜索值 searchAccentNeutralise:false,//如果你想使用重音中和功能(如搜索José则能搜索出Jose)，设置为true searchSelector:false,//自定义搜索框选择器。如果设置了这个选项(必须是一个有效的dom选择器，例如searchSelector:'#customSearchinput')，发现的dom元素(应该是一个元素)将被用作表搜索，而不是内置的搜索输入 showHeader:true,//设置为false以隐藏表头 showFooter:false,//设置为true以显示摘要页脚行(固定也交比如显示总数什么的最合适) showPaginationSwitch:false,//设置为true以显示分页组件的切换按钮 showFullscreen:false,// 设置为true以显示全屏按钮 smartDisplay:true,//设置为true以巧妙地显示分页或卡片视图 escape:false,// 转义字符串以插入HTML，替换 &, <, >, “, `, 和 ‘字符跳过插入HTML中的字符串，替换掉特殊字符 selectItemName:'btSelectItem',// 设置radio 或者 checkbox的字段名称 clickToSelect:false,//设置为true时在点击列时可以选择checkbox或radio singleSelect:false,// 默认false，设为true则允许复选框仅选择一行(不能多选了？) checkboxHeader:true,//设置为false以隐藏标题行中的check-all复选框即隐藏全选框 maintainSelected:false,// true时点击分页按钮或搜索按钮时，记住checkbox的选择项设为true则保持被选的那一行的状态 filterOptions:{ filterAlgorithm: 'and' },//定义算法的默认过滤器选项， filterAlgorithm: 'and' 意味着所有给定的过滤器必须匹配， filterAlgorithm: 'or' 意味着给定的过滤器之一必须匹配 footerField:,//定义页脚对象的键(从数据数组或服务器响应json)。footer对象可用于设置/定义页脚折页和/或页脚的值。 headerStyle:{},//标头样式格式化程序函数采用一个参数即column: 列对象headerStyle：functionheaderStyle(column){return{css:{'font-weight':'normal'},classes:'my-class'}} loadingFontSize:'auto',//要定义加载文本的字体大小，默认值是，它将根据表的宽度自动计算，在12px和32px之间。 loadingTemplate:function (loadingMessage) { return '<span class="loading-wrap">' + '<span class="loading-text">' + loadingMessage + '</span>' + '<span class="animation-wrap"><span class="animation-dot"></span></span>' + '</span>' },//可自定义加载方式（正在加载时的动画）。parameters对象包含:loadingMessage maintainMetaData:false,//设置true为在更改页面和搜索上维护以下元数据:1选定的行2隐藏的行 multipleSelectRow:false,//设置true以启用多选行。可以使用ctrl键单击以选择一行，或使用shift键单击以选择一系列行 showButtonText:true,//所有按钮都将在其上显示文本 showExtendedPagination:false,//设置true 为显示分页的扩展版本（包括不带过滤器的所有行的计数）。如果在服务器端使用分页，请使用totalNotFilteredField来定义计数 showSearchButton:false,//设置true 为在搜索输入后面显示搜索按钮。仅在按下按钮时才会执行搜索（例如，以防止交通或加载时间） sortReset:false,//设置为true时在第三次点击时重置排序 totalNotFiltered:0,//此属性主要由分页服务器传入，该服务器易于使用 totalNotFilteredField:'totalNotFiltered'//json响应中的字段,用于服务器端定义分页计数(服务器端传入数据中包含totalNotFiltered: 800)，用于.showExtendedPagination virtualScroll:false,//设置 true 为启用虚拟滚动以显示虚拟的 “infinite” 列表 virtualScrollItemHeight:'undefined',//如果未定义此选项，则默认情况下我们将使用第一项的高度。如果虚拟商品的高度将明显大于默认高度，则提供此功能非常重要。此维度用于帮助确定初始化时应创建多少个单元格，并帮助计算可滚动区域的高度。此高度值只能使用px单位 visibleSearch:false,//设置true 为仅在可见列/数据中搜索，如果数据包含其他未显示的值，则在搜索时将忽略它们 icons:{//定义工具栏，分页和详细信息视图中使用的图标 paginationSwitchDown: 'fa-caret-square-down', paginationSwitchUp: 'fa-caret-square-up', refresh: 'fa-sync', toggleOff: 'fa-toggle-off', toggleOn: 'fa-toggle-on', columns: 'fa-th-list', detailOpen: 'fa-plus', detailClose: 'fa-minus', fullscreen: 'fa-arrows-alt' }, iconSize:'undefined',// 定义icon图表的尺寸大小html对应为data-icon-undefined （默认btn）、data-icon-lg 大按钮的尺寸（btn-lg）...; 这里的值依次为undefined => btnxs => btn-xssm => btn-smlg => btn-lg iconsPrefix:'fa',//定义图标集名称（FontAwesome的'glyphicon'或'fa'）。默认情况下，'fa'用于Bootstrap v4 queryParamsType:'limit',//设置'limit'以使用RESTFul类型发送查询参数。 ajaxOptions:{},//提交ajax请求的其他选项。值列表：jQuery.ajax。 customSort:function(sortName,sortOrder,data){//自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）： var order = sortOrder === 'desc' ? -1 : 1 data.sort(function (a, b) { var aa = +((a[sortName] + '').replace(/[^\d]/g, '')) var bb = +((b[sortName] + '').replace(/[^\d]/g, '')) if (aa < bb) { return order * -1 } if (aa > bb) { return order } return 0 }) },： ajax:function(){},// 一种替换ajax调用的方法。应该实现与jQuery ajax方法相同的API queryParams: function(params) { // 请求远程数据时，您可以通过修改queryParams来发送其他参数即server分页时，这里的queryParams参数就是提交到服务器端的参数了 return params; //返回给服务器的格式如下{search: "", sort: undefined, order: "asc", offset: 0, limit: 20} 　　　　 //我们可以在这修改请求服务器的参数， //当queryParamsType时limit 参数包含limit、offset、order、search、sort当否则它包含pageSize, pageNumber, searchText, sortName, sortOrder 　　　　 //返回 false则中断请求（return false）　　　　 }, responseHandler:function(res) { //服务端响应发送的数据会经过这里由我们处理后再显示在html 详细的例子 return res; ajax请求成功后，在发放数据之前可以对数据进行处理，比如修改下数据的值什么的 }, customSearch:function(data,text){// 执行自定义搜索功能替换内置搜索功能，需要两个参数 return data.filter(function (row) {return row.field.indexOf(text) > -1}) }, footerStyle:function(column){// 页脚样式格式化程序函数，只需一个参数 m默认｛｝ return { css: { 'font-weight': 'normal' }, classes: 'my-class' } }, detailFormatter:function(index,row,element){//前提：detailView设为true，启用了显示detail view。- 用于格式化细节视图- 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery element return ''; }, 详细例子 detailFilter:function(index,row){//当detailView设置为true时，每行启用扩展。返回true并且将启用该行以进行扩展，返回false并禁用该行的扩展。默认函数返回true以启用所有行的扩展。 return true }, ignoreClickToSelectOn:function(element){// 包含一个参数：element: 点击的元素。返回 true 是点击事件会被忽略，返回 false 将会自动选中。该选项只有在 clickToSelect 为 true 时才生效。 return $.inArray(element.tagName, ['A', 'BUTTON'] }, onLoadSuccess: function (data){//表选项也可以时使用事件，列选项的事件则是在events //数据加载成功时触发 console.log(data); }, columns: [ {checkbox: false}, {radio: false}, { radio: false,//此列转成radio上面单独领出来是应为有字段显示就不需要它呀 checkbox: false,//此列转成checkbox 单独拎出来同上 field: 'sex', //设置data-field的值 title: __('Operate'),//设置data-field的值 table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate,//单元格格式函数 this上下文是当前列对象字段数据经过处理现实在浏览器(表格列的按钮就是在这做的) formatter: function (value, row, index,field){ var color; if(value==1){ 　　　　　　　　　　 color='Green';　　 }else{ color="red";　　 } return '<div style="color:'+color+'">'+value+'</div>'; }, titleTooltip:'列标题工具提示文本。此选项还支持标题HTML属性', class:'定义列的类名', rowspan:1,//指定单元格应占用的行数。 colspan:1,//指定单元格应占用的列数。 align:'center',//指定如何对齐列数据。可以使用'left'，'right'，'center'。 halign:'center',//指定如何对齐表头。可以使用'left'，'right'，'center'。 falign:'center',//指示如何对齐表格页脚。可以使用'left'，'right'，'center'。 valign:'middle',//指出如何对齐单元格数据。可以使用'top','middle','bottom' width:'10%',//列的宽度。如果未定义，宽度将自动扩展以适合其内容。格式'100px','10%'，100,如果想表格保持列自适应并且尺寸太小，则可以忽略这项（通过类等使用min / max-width） sortable:false,//设置为true以允许列可以排序。 order:'asc',//默认排序顺序，只能是'asc'或'desc'。 visible:true,//设置为false以隐藏列项。 cardVisible:true,//设置为false以隐藏card 视图状态中的列项 switchable:true,//设置为false以禁用可切换的列项 clickToSelect:true,//设置为true时在点击列时可以选择checkbox或radio footerFormatter:function(data){},//当前列对象函数该函数应返回一个字符串，其中包含要在页脚单元格中显示的文本 events::{},//使用格式化函数时的单元事件监听器四个参数event,value,row,index； html可以这么用 <th .. data-events="operateEvent"> sorter:function(a,b,rowA,rowB){},//用于进行本地排序的自定义字段排序函数(第一个字段值，第二个字段值，第一行，第二行) sortName:'',//提供可自定义的排序名称，而不是标题中的默认排序名称或列的字段名称 cellStyle:function(value,row,index,field){ return{ css:{color:'red'}, classes:'bg-blue' } },//单元格样式格式化函数支持classs和css searchable:true,//设置为true以搜索此列的数据。 searchFormatter:true,//设置为true以搜索使用格式化数据 escape:false,//转义字符串以插入HTML，替换 &, <, >, “, `, and ‘ 字符。 showSelectTitle:false,//设置为true以使用'radio'或'singleSelect''复选框'选项显示列的标题。 checkboxEnabled:true,//设置false以禁用复选框/单选框另一种设置<th data-checkbox="true" data-checkbox-enabled="false"></th> detailFormatter:function(index, row, $element) { return '' },//当detailView和detailViewByClick设置为true时，格式化详细视图。返回一个String，它将被追加到细节视图单元格中(单击某个单元格时，在它下面会追加一行，这行就是详细视图行，这个参数就是返回在详细试图显示的内容)，可以选择使用第三个参数直接呈现元素，这是目标单元格的一个jQuery元素。 searchHighlightFormatter:true,//格式：Boolean|Function，定义一个函数，为搜索高亮选项使用自定义高亮格式化程序 widthUnit:'px',//定义用于选项宽度的单元 }, { field:'opreation', tittle:'操作', aligin:'center', formatter:function(value,row,index,field){ return[ '<button type="button" id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#ModalInfo">修改</button>', '<button id="btn_delete" class="btn btn-warning">删除</button>' ]; }, events:{ //触发#btn_edit这个按钮的点击事件 'click #btn_edit':function(event,value,row,index){ } 　　　　　　　 //触发#btn_detele这个按钮的点击事件 'click #btn_delete':function(){ //移除当前行的html table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } } } ] }); var operateEvents = { /* 'click .like' 是类名？*/ 'click .like': function (e, value, row, index) {} } ~~~