DataTables中怎么利用TreeGrid插件实现树形表格

本篇文章给大家分享的是有关DataTables中怎么利用TreeGrid插件实现树形表格，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

使用方法

<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" >';                                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>

以上就是DataTables中怎么利用TreeGrid插件实现树形表格，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。