layui+treeTable.js 树形表格示例

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

2、树形表格前端

   

       

           

       

   

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、新增时下拉框树形

下拉选择器使用文档

前端代码

后台返回数据结构

[ { "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 } ]

效果如下：