1. 程式人生 > >bootstrap treegrid 實現樹形表格結構

bootstrap treegrid 實現樹形表格結構

tle RM PE 數據 商戶 前端框架 clas 組件 baidu

前言 :最近的項目中需要實現樹形表格功能,由於前端框架用的是bootstrap,但是bootstrapTable沒有這個功能所以就找了一個前端的treegrid第三方組件進行了封裝.現在把這個封裝的組件貼出來 大家共同討論進步。

1 效果圖

技術分享圖片

2 組件下載地址

鏈接: https://pan.baidu.com/s/1R8jIGXimeJwUcL7WyqZjDA 密碼: ud96

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 相關函數

待續 .....

bootstrap treegrid 實現樹形表格結構