$table.bootstrapTable({ url: , queryParams:queryParams, queryParamsType : "limit", height:'getHeight' , striped: true, showRefresh: true, showColumns: false, order: "asc", // 需要配置 否则 是undefined minimumCountColumns: 2, clickToSelect: true, detailView: true, //看过一篇关于父子表重新构造table的例子、 detailFormatter: detailFormatter, //我重写了这个 看下面 pagination: true, paginationLoop: false, sidePagination: 'server', silentSort: false, silent:true, sortable: true, //列排序 sortName:'', // 需要配置 否则 是undefined smartDisplay: false, escape: true, searchOnEnterKey: true, idField: '', uniqueId:'', limit:1, // 需要配置 否则 是undefined offset: 10 // 需要配置 否则 是undefined
上面所有加了注释的 // 需要配置 必须项 否则 自写的查询 中对应的 limit, offset, search, sort, order 参数取不到,
queryParams 参考:
function queryParams(params){ var param = { offset: params.offset, limit: params.limit, sort: params.sort, order: params.order, // search:params.search, //可以是添加自己要帅选的列与pojo 属性对应 }; return param; } /** * 2019-02-20 更新 *此方法你可以在第一次加载必要参数查询后的具体筛选参数 *此方法可绑定到bootstrapTable toolbar中DOM元素中 */ function queryBtn(){ //此方法 可传递相关参数 一般传递 query:{接收参数名:'value值',接收参数名:'value值'} $('#table的ID名').bootstrapTable('refresh',{query:{ /*注释说明*/}}) }
查询按钮事件:
<button type="button" id="自己起名" class="btn btn-default ">开始搜索</button> $(document).on('click', "#与上面buttonID对应",function(){ $('#table').bootstrapTable('refresh' ); });
detailFormatter:
function detailFormatter(index, row){ var html = []; html.push('自写html'); $.each(row, function (key, value) { if(key!='id'||key!='ck') { //key 列 value 列对应值 此处没有向用户展示ID列信息以及过滤了checkbox 列 switch (key) { /**/ } } }) html.push('自写html'); return html.join(''); }
2019-4-8 更新 实际使用中发现:
table 的 clickToSelect(点击选中行) 属性 和属性 同时设置时候如何 点击表格空白处 js会抛出错误! 但是不配置 table属性 clickToSelect时候 点击选中不起作用!
更新 于 2019-5-17 对table 设定 clickToSelect=true 之后,列属性设定clickToSelect:false (该属性点击选中行)可能引起报错原因解释! table columns片段示例: {field: 'ck', checkbox: true}, {field: 'ck',formatter:'自定义函数',title:'序号',clickToSelect: false } 造成js报错的原因是 field 绑定了同一个 实体属性 如上 同为ck 如 操作列 其他实现 用 formatter(value,row,index) row 取对应 属性值 。 完结!