插件介紹

針對DataTables寫的樹形表格插件（什麼是DataTables? 可以點擊訪問官網瞭解）
在原DataTables基礎上可以快速實現樹形表格的渲染：
1、支持自定義展開/收縮 圖標
2、支持自定義縮進距離
3、N層子集展開父級收縮 子集統一收縮；

插件地址：https://github.com/lhmyy521125/dataTables.treeGrid

初始化表格只需要添加DataTables treeGrid 屬性

'treeGrid': {
    'left': 15,
    'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
    'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
},

展現效果

使用方法

<script src='您的資源目錄/jquery.js'></script>
<script src='您的資源目錄/jquery.dataTables.min.js'></script>
<script src='您的資源目錄/dataTables.treeGrid.js'></script>

DataTable 渲染JSON數據格式

// JSON對象數據應包含一個屬性「children」作爲子集
{
"data": 
    [
        {
            "name": "lhmyy521125",
            ...
            "children": [
                {
                    "name": "hello",
                    ...
                }
            ]
        }
    ]
}

HTML數據格式（以DEMO截圖代碼爲例）

<!--HTML table-->
<table class="table table-striped table-bordered table-hover" id="editable">
          <thead>
                  <tr>
                      <th width="4%"></th>
                      <th width="15%">名稱</th>
                      <th>鏈接</th>
                      <th width="8%">類型</th>
                      <th>權限</th>
                      <th width="8%">排序</th>
                      <th width="8%">狀態</th>
                      <th width="20%">操作</th>
                  </tr>
           </thead>
           <tbody></tbody>
     </table>

<script type="text/javascript">
            var dataTable;
            $(function () {
                dataTable = $("#editable").DataTable({
                    "dom": "l",
                    "ordering": false, //禁用排序
                    "lengthMenu": [500],
                    "ajax": {
                        "url": ctx + "system/menu/dataJson",
                        "async": false
                    },
                    'treeGrid': {
                        'left': 15,
                        'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
                        'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
                    },
                    "columns": [
                        {
                            className: 'treegrid-control',
                            data: function (item) {
                                if (item.children.length>0) {
                                    return '<span><i class="fa fa-plus-square"></i></span>';
                                }
                                return '';
                            }
                        },
                        {
                            data:function(item){
                                return '<i class="'+item.menuIcon+'"></i> '+item.menuName;
                            }
                        },
                        {"data": "menuUrl"},
                        {
                            data:function(item){
                                if(item.menuType==1){
                                    return '<small class="label label-warning">目錄</small>';
                                }else if(item.menuType==2){
                                    return '<small class="label label-primary">菜單</small>';
                                }else{
                                    return '<small class="label label-info">功能</small>';
                                }
                            }
                        },
                        {"data": "permissionCode"},
                        {
                            data:function(item){
                                var html = '<input name="menuSort" type="text" value="'+item.menuSort+'" class="form-control sorts" style="width:70px;margin:0;padding:0;text-align:center;">';
                                html = html + '<input name="menuSortId" type="hidden" value="'+item.menuId+'">';
                                return html;
                            }
                        },
                        {
                            data:function(item){
                                if(item.menuStatus==true){
                                    return "<button type='button' class='btn btn-primary btn-xs' onclick=\"updateStatus('" + item.menuId + "','false');\"><i class='fa fa-refresh'></i> 啓用</button>";
                                }else{
                                    return "<button type='button' class='btn btn-danger btn-xs' onclick=\"updateStatus('" + item.menuId + "','true');\"><i class='fa fa-refresh'></i> 禁用</button>";
                                }
                            }
                        },
                        {
                            data:function(item){
                                var html = "<a onclick=\"edit('" + item.menuId + "');\" class='btn btn-success btn-xs' ><i class='fa fa-edit'></i> 編輯</a> ";
                                html = html + "<a onclick=\"add('" + item.menuId + "');\" class='btn btn-primary btn-xs' ><i class='fa fa-plus'></i> 添加下級菜單</a> ";
                                html = html + "<a onclick=\"deleteObject('" + item.menuId + "');\" class='btn btn-danger btn-xs' ><i class='fa fa-trash-o'></i> 刪除</a> ";
                                return html;
                            }
                        }
                    ]
                });
            });
            
            //添加
            function add(menuId){
                var url = ctx + 'system/menu/add?menuId='+menuId;
                openLayer("添加下級", url, "600px", "550px");
            }
            //編輯
            function edit(menuId){
                var url = ctx + "system/menu/edit/" + menuId;
                openLayer("編輯", url, "600px", "550px");
            }
            //更新狀態
            function updateStatus(menuId,status){
                var title = "是否啓用";
                if (status == "false") {
                    title = "是否禁用";
                }
                var url = ctx + "system/menu/updateStatus?menuId="+menuId+"&menuStatus="+status;
                confirmLayer(title, url);
            }

            //刪除菜單操作
            //刪除單條
            function deleteObject(menuId) {
                confirmLayer('要刪除該數據麼？', ctx + 'system/menu/delete/' + menuId);
            }
            //更新排序操作
            function updateSort() {
                var checkID = $("#editable tbody tr td input[name='menuSortId'],input[name='menuSort']").serialize();
                if (checkID == "") {
                    top.layer.alert('請至少選擇一條數據!', {icon: 0, title: '警告'});
                    return;
                }
                commonHandleAll(ctx + "system/menu/updateSort", checkID, "要更新該菜單排序嗎？");
            }
        </script>

插件地址：https://github.com/lhmyy521125/dataTables.treeGrid

如果該插件幫助到您，別忘記了點個 star 對我的支持~