DataTables中怎么利用TreeGrid插件實(shí)現(xiàn)樹(shù)形表格

本篇文章給大家分享的是有關(guān)DataTables中怎么利用TreeGrid插件實(shí)現(xiàn)樹(shù)形表格，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

使用方法

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

DataTable 渲染JSON數(shù)據(jù)格式

// JSON對(duì)象數(shù)據(jù)應(yīng)包含一個(gè)屬性“children”作為子集{"data":     [        {            "name": "lhmyy521125",            ...            "children": [                {                    "name": "hello",                    ...                }            ]        }    ]}  

HTML數(shù)據(jù)格式（以DEMO截圖代碼為例）

<!--HTML table--><table class="table table-striped table-bordered table-hover" id="editable">          <thead>                  <tr>                      <th width="4%"></th>                      <th width="15%">名稱(chēng)</th>                      <th>鏈接</th>                      <th width="8%">類(lèi)型</th>                      <th>權(quán)限</th>                      <th width="8%">排序</th>                      <th width="8%">狀態(tài)</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" >';                                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> 添加下級(jí)菜單</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("添加下級(jí)", url, "600px", "550px");            }            //編輯            function edit(menuId){                var url = ctx + "system/menu/edit/" + menuId;                openLayer("編輯", url, "600px", "550px");            }            //更新?tīng)顟B(tài)            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('要?jiǎng)h除該數(shù)據(jù)么？', 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('請(qǐng)至少選擇一條數(shù)據(jù)!', {icon: 0, title: '警告'});                    return;                }                commonHandleAll(ctx + "system/menu/updateSort", checkID, "要更新該菜單排序嗎？");            }        </script>

以上就是DataTables中怎么利用TreeGrid插件實(shí)現(xiàn)樹(shù)形表格，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。