Bootstrap treegrid 实现树形表格结构

前言：最近的项目中需要实现树形表格功能，由于前端框架用的是bootstrap，但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组件贴出来大家共同讨论进步。

1 效果图

2 组件下载地址

扫码加入QQ群，查看文件分享免费获取。

3 组件的使用

　3.1 在页面中引入如下的文件

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/jquery-treegrid-master/css/jquery.treegrid.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.min.js"></script>
<script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.bootstrap3.js"></script>
<script src="~/Content/jquery-treegrid-master/extension/jquery.treegrid.extension.js"></script>

3.2 然后定义一个空的table标签　

<table id="tb" ></table>

　3.3 初始化 js

$(\'#tb\').treegridData({
        id: \'shopId\',
        parentColumn: \'parentId\',
        type: "POST", //请求数据的ajax类型
        url: baseURL + "sys/shop/shopTreeList",   //请求数据的ajax的url
        ajaxParams: {}, //请求数据的ajax的data属性
        expandColumn: \'shopId\',//在哪一列上面显示展开按钮
        striped: true,   //是否各行渐变色
        bordered: true,  //是否显示边框
        //expandAll: false,  //是否全部展开
        columns: [
            {title: \'商户名称\',field:\'name\',index:\'title\', width:100,sortable:false},  
            {title: \'省份\',field:\'province\',index:\'province\', width:80,sortable:false},*/
            {title: \'城市\',field:\'city\',index:\'city\', width:80,sortable:false},
            {title: \'地区\',field:\'area\',index:\'area\', width:80,sortable:false},
            {title: \'操作\',field:\'shopId\',index:\'shopId\',widt:30,formatter: function(row, index){
                return "<a class=\'label label-success\' onclick=\'query(\""+row.shopId+"\")\'>详情</a> " +
                        "<a class=\'label label-success\' onclick=\'updateShop(\""+row.shopId+"\")\'>修改</a>";
            }}
        ]
    });

4 细节

4.1  该组件支持无限级树形结构；

4.2  节点数据必须有 id和父id 字段；

4.3  单元列 中formatter：function（row,index）的row 代表当前行的数据，index 代表当前行的索引；

5 相关函数

待续 .....

6 Bootstrap Table API 中文版（完整翻译文档）连接

https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1