bootstrap table实现多级树列表

废话不多，直接发车！
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 {}
}

先到这里，后续遇到问题再继续