layui+treeTable.js 树形表格示例

1、插件地址：https://gitee.com/grapess/layui

2、树形表格前端

<script type=”text/html” id=”toolbarDemo”>

    <div class=”layui-btn-container”>

        <button id=”add” lay-event=”addPermission” class=”layui-btn layui-btn-sm btnys”>添加</button>

        <button class=”layui-btn layui-btn-sm” lay-event=”btn-expand”>全部展开</button>

        <button class=”layui-btn layui-btn-sm” lay-event=”btn-fold”>全部折叠</button>

        <button class=”layui-btn layui-btn-sm” lay-event=”btn-refresh”>刷新表格</button>

    </div>

</script>

<div class=”xm”>

    <div class=”xm-d2″>

        <div class=”xm-d2-hang2″>

            <table id=”permissionTable” class=”layui-table” lay-filter=”permissionTable”></table>

        </div>

    </div>

</div>

<script>   

$(document).ready(function () {

        layui.config({

            base : /layui/

        }).extend({

            treetable : treetable-lay/treetable

        });

        // 存放拓展模块的根目录

        layui.use([ treetable , table , layer ], function () {

            var table = layui.table;

            var layer = layui.layer;

            var treetable = layui.treetable;

            //渲染表格

            var renderTable = function () {

                layer.load(2);  //加载层

                treetable.render({

                    height: full-160 ,

                    id: menu ,

                    treeColIndex: 1, //树形图标显示在第几列

                    treeSpid: 0 , //最上级的父级id

                    treeIdName: id , //id字段的名称

                    treePidName: parentId , //父级节点字段

                    treeDefaultClose: false, //是否默认折叠

                    treeLinkage: false, //父级展开时是否自动展开所有子级

                    elem: #menu , //表格id

                    url: “”,

                    toolbar: #toolbarDemo ,

                    page: false,

                    cols: [[

                        {type: radio },

                        {field: name , title: 菜单名称 },

                        {field: url , title: 地址 },

                        {field: icon , hide: true, title: 图标 },

                        {field: idx , title: 排序 }

                    ]],

                    //数据渲染完的回调

                    done: function () {

                        //关闭加载

                        layer.closeAll( loading );

                    }

                })

            };

            renderTable();

        });

    })

</script>

3、后台数据结构

{
“msg”: “true”,
“code”: 0,
“data”: [{
“Id”: 1,
“cName”: “开发部”,
“cType”: null,
“icon”: null,
“pid”: 0,
“seq”: 0,
“resType”: “0”
}, {
“Id”: 2,
“cName”: “第一组”,
“cType”: “开发部”,
“icon”: null,
“pid”: 1,
“seq”: 1,
“resType”: “1”
}, {
“Id”: 3,
“cName”: “第二组”,
“cType”: “开发部”,
“icon”: null,
“pid”: 1,
“seq”: 2,
“resType”: “1”
}, {
“Id”: 4,
“cName”: “运营部”,
“cType”: “运营部”,
“icon”: null,
“pid”: 1,
“seq”: 3,
“resType”: “1”
}, {
“Id”: 5,
“cName”: “第一组”,
“Type”: “运营部”,
“icon”: null,
“pid”: 1,
“seq”: 4,
“resType”: “1”
}, {
“Id”: 6,
“cName”: “第一组”,
“cType”: “运营部”,
“icon”: null,
“pid”: 1,
“seq”: 5,
“resType”: “1”
}],
“count”: 6
}

实现效果如下：

4、新增时下拉框树形

下拉选择器使用文档

前端代码

<input type=”text” id=”tree” lay-filter=”tree” class=”layui-input”>

<script>

layui.config({

base:”/layui/module/”

    }).extend({treeSelect:”treeSelect/treeSelect”});

layui.use([ treeSelect , form ],function () {

    var treeSelect=layui.treeSelect;

    treeSelect.render({

        // 选择器

            elem: #tree ,

            // 数据

            data:url ,

            // 异步加载方式：get/post，默认get

            type: get ,

            // 占位符

            placeholder: 请选择 ,

            // 是否开启搜索功能：true/false，默认false

            search:true,

            style:{

                    line: {// 连接线

                         enable:true // 是否开启：true/false

                        },

                folder: {// 父节点图标

                        enable:true // 是否开启：true/false

                    },

                },

// 点击回调

            click:function(d){

                console.log(d);

            },

// 加载完成后的回调函数

            success:function (d) {

                console.log(d);

    //                选中节点，根据id筛选

                  treeSelect.checkNode( tree ,1);

//                获取zTree对象，可以调用zTree方法

                  var treeObj =treeSelect.zTree( tree );

                console.log(treeObj);

//                刷新树结构

                  treeSelect.refresh();

        }

    });

});

</script>

后台返回数据结构

[ { “id”: 1, “name”: “zzz”, “open”: true, “children”: [ { “id”: 2, “name”: “1”, “open”: false, “checked”: true }, { “id”: 3, “name”: “2”, “open”: false, “checked”: true }, { “id”: 17, “name”: “3z”, “open”: false, “checked”: true } ], “checked”: true }, { “id”: 4, “name”: “评论”, “open”: false, “children”: [ { “id”: 5, “name”: “留言列表”, “open”: false, “checked”: false }, { “id”: 6, “name”: “发表留言”, “open”: false, “checked”: false }, { “id”: 333, “name”: “233333”, “open”: false, “checked”: false } ], “checked”: false }, { “id”: 10, “name”: “权限管理”, “open”: false, “children”: [ { “id”: 8, “name”: “用户列表”, “open”: false, “children”: [ { “id”: 40, “name”: “添加用户”, “open”: false, “url”: null, “title”: “40”, “checked”: false, “level”: 2, “check_Child_State”: 0, “check_Focus”: false, “checkedOld”: false, “dropInner”: false, “drag”: false, “parent”: false }, { “id”: 41, “name”: “编辑用户”, “open”: false, “checked”: false }, { “id”: 42, “name”: “删除用户”, “open”: false, “checked”: false } ], “checked”: false }, { “id”: 11, “name”: “角色列表”, “open”: false, “checked”: false }, { “id”: 13, “name”: “所有权限”, “open”: false, “children”: [ { “id”: 34, “name”: “添加权限”, “open”: false, “checked”: false }, { “id”: 37, “name”: “编辑权限”, “open”: false, “checked”: false }, { “id”: 38, “name”: “删除权限”, “open”: false, “checked”: false } ], “checked”: false }, { “id”: 15, “name”: “操作日志”, “open”: false, “checked”: false } ], “checked”: false } ]

效果如下：