DataTables TreeGrid 插件

DataTables TreeGrid 插件 可以快速实现树形表格

dataTables.treeGrid

 datatables中文网    http://datatables.club/plug-ins/

    DataTable 渲染JSON数据格式
    HTML数据格式（以DEMO截图代码为例）

插件介绍

针对DataTables写的树形表格插件（什么是DataTables? 可以点击访问官网了解）
在原DataTables基础上可以快速实现树形表格的渲染：
1、支持自定义展开/收缩 图标
2、支持自定义缩进距离
3、N层子集展开父级收缩 子集统一收缩；
更新日志

2019-5-8：很多朋友在博客私信说要一份DEMO，今天上传了DEMO样例仅供大家参考；注意要在WEB容器运行
2019-4-11：新增expandAll配置属性，true默认展开，false不展开不配置默认false
2018-10-11：当多层数据时，第一个子集未展开，第二个子集展开，点击父级收缩会出现死循环问题解决；
2018-10-11：多层子集收缩的时候会导致第二级以下的展开不会删除问题；解决方案采用递归方式改写收缩方法

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

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

'treeGrid': {
   'left': 15, // 图标的缩进像素
   'expandAll' : true, //是否默认展开 true 是
   'expandIcon': '<span><i class="fa fa-plus-square"></i></span>', //展开图标
   'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>' //收缩图标
},

展现效果

使用方法

//注意自行下载 dataTables  
<script src='您的资源目录/jquery.js'></script>
<script src='您的资源目录/jquery.dataTables.min.js'></script>
//引入我们写的dataTables  Tree 插件
<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 对我的支持~