多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## url 数据获取请求地址,根据不同的配置需要这个地址返回不同格式的数据。 返回示例:{rows:[{},{},{}],total:3} 初始化时会请求一次。 ## sidePagination server:表示分页将由服务端来控制,向服务端发起请求时会携带分页参数,点击页码时会再次请求url 如果不设置该参数:则点击页码时不会请求url,而是利用已有数据(如初始化时获取的数据)进行分页。 client:客户端分页 ## method 请求方式 get/post 默认是get ## queryParams 请求url前调用的方法 function(params){return params;} 此方法返回的的数,即请求时的参数,可以利用该属性设置请求时的额外参数。 ## pagination 是否支持分页 true:将显示页码 false:不显示页码 ## pageNumber, 初始化时显示第几页 如 1, ## pageSize 初始化时每页显示多少项数据 如 50 ## pageList 设置支持每页显示多少项,如[50,100,500]这样就可以选择每页显示的数据量 ## search 是否支持搜索 true : 支持搜索将显示搜索框,并且在用户输入内容时会触发搜索,请求url时会携带参数 search=搜索框内容 ## sortable 是否支持排序 true:点击表头后重排数据 如果设置sidePagination:"server",每次点表头时会请求url并且传递排序参数 sort:表示被点击的表头的 键 order:表示排序方式 asc/desc 该功能需要跟columns中的sortable配合使用(即指定哪些列支持排序) ## clickToSelect 是否启用点击行选中 true:当tr的任何部分被点击后,都会选中checkbox ## columns 表头配置,该属性的值为一个数组[],每一个项为一个列的配置参数。示例 ``` [{title:"姓名",width:40,field:"name"},{title:"年龄",width:40,field:"age"}] ``` title:列表头名称 width:列宽度 field:引用值(比如接口返回的数据row中的信息为[{name:"张三"},{name:"李四"}]),这个field设置为"name"时对应的就是其值。 sortable:知否支持排序(true/false) formatter:自定义单元格中的值(如果设置了此属性,field则会失效) 该属性的值为一个方法function(value, row, index),需要return 一个字符串,这个字符串则是单元格中的内容。 - value: undefied - row:为当前项数据,如:{name:"张三"} - index:为当前序号 从0开始。 checkbox: 是否显示为复选框,true/false 设置了此属性后 其他属性都不用设置。 获得选中项 $("#表id").bootstrapTable('getSelections'); events:单元格中元素事件配置 取值示例 ``` { 'click .detail' :function(e, value, row, index){ e:事件对象 value: undefined row:当前项(行)的对象 index:序号 } } ``` ## rowStyle 根据条件为行设置指定的类 值为 function(row, index) 返回一个对象 示例: ``` function(row, index){ return {classes:"active_tr"} } ``` 即给此tr设置一个类名。 ## showColumns 是否显示表头控制列表,用来控制表头的可见性。 true:显示,需要引入 font-awesome 才能正常显示图标 ## minimumCountColumns 至少显示多少列,限制showColumns隐藏列的操作。 ## showRefresh 显示刷新表格按钮,即点击按钮重新请求下url ## showToggle true:显示切换按钮,切换 表格显示模式,和卡片显示模式。 ## cardView true:以卡片模式显示 ## detailView true:开启详情模式 在每一行前面显示一个加号,点击加号会在此行下面显示其他内容即子表格。 配合onExpandRow属性使用,即当点击加号时就会触发该方法 ``` function (index, row, $detail)  { //index:父表当前行的行索引。 //row:父表当前行的Json数据对象。 //$detail:当前行下面创建的新行里面的td对象。 } ``` 具体详子级中需要展示什么内容,就是向$detail中添加元素。 示例1:添加子表格 ``` function (index, row, $detail)  { var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ url: 'server.php', columns: [ { field: 'name', title: '姓名', sortable : true, } ] } ``` 示例2:添加其他内容 ``` function (index, row, $detail)  { $detail.html('你好' + row.name + ''); } ```