DataTables TreeGrid 插件

刺骨的言语ヽ痛彻心扉 2023-05-22 06:36 4阅读 0赞

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

dataTables.treeGrid

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

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>' //收缩图标
    },

展现效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1Y2FpZnUxOTg5_size_16_color_FFFFFF_t_70][]  
使用方法

//注意自行下载 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截图代码为例）

<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 对我的支持~

[datatables_]: http://datatables.club/plug-ins/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1Y2FpZnUxOTg5_size_16_color_FFFFFF_t_70]: /images/20230521/6f3d8e021f51481890b90d6550b6c6b0.png