废话不多，直接发车！
API文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
引入
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.0/bootstrap-table.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.0/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.0/locale/bootstrap-table-zh-CN.min.js"></script>
实现
方式一：
无需编写 JavaScript 启用 bootstrap table，我们对普通的 table 设置 data-toggle="table" 即可。
<table
id="table"
data-detail-view="true"
data-toolbar="#toolbar"
data-detail-formatter="detailFormatter"
data-toggle="table"
data-query-params="queryParams"
data-url="data.json"
data-side-pagination="server"
data-pagination="true"
data-page-list="[5, 10, 20, 50, 100, 200]"
>
<thead>
<tr>
<th data-field="xx" data-formatter="batchFormatter" data-checkbox="true" data-width=30></th>
<th data-field="name" data-align="left">用户名</th>
<th data-field="content" data-align="left" data-formatter="contentFormatter">内容</th>
<th data-field="xx" data-align="center"></th>
<th data-field="xx" data-formatter="operateFormatter" data-align="center">操作</th>
</tr>
</thead>
</table>
详解：在API里都可以找到，只写几个此处用到的
data-detail-view //设置为 true 可以显示详细页面。即表头出现+，实现异步获取数据
data-detail-formatter //格式化详细页面的视图，配合前一项输出子列表
data-query-params //请求服务器数据时，通过重写参数的方式添加一些额外的参数
data-side-pagination //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法
data-pagination //设置是否显示分页条
data-formatter //(value, row, index),格式化自定义输出,用于处理超链接、代码块、图片展示、表情转义等
data-width //设置宽度，比如=100或者=20%，不设置为自适应
方式二：
$('#table').bootstrapTable({
url: '',
rowStyle:rowStyle, //自定义行样式 参数为：row:行数据,index:行下标,返回值可以为class或者css
columns: [
{
field: 'state',
checkbox: 'true',
width: '30',
align: 'center',
formatter: 'batchFormatter' //此处我用来隐藏一些数据方便多重异步加载
},{
field: 'name',
title: '用户名',
width: '100',
align: 'center'
},{
field: 'xx',
title: 'xx',
align: 'center'
},{
field: 'content',
title: '内容',
formatter: "contentFormatter" //代码块、表情转义、图片输出等进行处理
}{
field: 'xx',
title: '操作',
formatter: "operateFormatter",
align: 'center'
},
],
onLoadSuccess:function(data){
//成功加载处理
}
});
常用事件：
写法有两种，以单击事件来举例
一、可以直接写在表格生成那，如上方的加载成功返回方法。
onClickRow:function (row,$element) {
$('.info').removeClass('info');//移除class
$($element).addClass('info');//添加class
}
二、jquery事件
$('#table').on('click-row.bs.table', function (row, $element) {
$('.info').removeClass('info');//移除class
$($element).addClass('info');//添加class
});
onClickRow click-row.bs.table row,$element 当用户点击某一行的时候触发
onDblClickRow dbl-click-row.bs.table row,$element 双击
onCheckAll check-all.bs.table row 全选所有的行时
onUncheckAll uncheck-all.bs.table rows 当用户反选所有的行
onLoadSuccess load-success.bs.table data 远程数据加载成功时触发成功。
onLoadError load-error.bs.table status 远程数据加载失败时触发成功。
...api里都有自己要什么查什么
提供部分好用的：
页面加载重置列表高度
$('#table').bootstrapTable('resetView', {
height: $(window).height() - 140
});
搜索并返回第一页。处理：第N页搜索时依旧在本页，此处直接返回第一页即可，无需重复请求。(返回第一页时自动带入当前搜索条件)
$('#search').click(function () {
$('#table').bootstrapTable('selectPage',1);
});
翻页时处理，我用来做保留展开设置了，例如前一页我全部展开，翻页后依旧保持此习惯
$('#table').on('page-change.bs.table', function () {
rowSet();
});
展开详细列时主列不可操作,用于多重树列表
$('#table').on('expand-row.bs.table', function (index, row, $detail) {
$expandTr = $(".detail-icon").eq(row).parent().parent();
$expandTr.find("td:last>a").hide();
$expandTr.find("td:eq(3),td:eq(4),td:eq(5)").css("color","transparent");
});
$('#table').on('collapse-row.bs.table', function (index, row, $detail) {
$expandTr = $(".detail-icon").eq(row).parent().parent();
$expandTr.find("td:last>a").show();
$expandTr.find("td").css("color","green");
});
列表加载已读信息变色处理
$('#table').on('post-body.bs.table', function () {
//在表格 body 渲染完成后触发。
browse(this);
});
根据条件对当前行配色
function rowStyle(row, index) {
if (row['xxx'] == 0) {
return {classes: 'info'}
}else {
return {classes: 'active'}
}
return {}
}
先到这里，后续遇到问题再继续
网友评论