layui扩展的树形表格treetable

layui开发时，遇到要求做成这样的树形表格的需求。这里我们要用到layui的第三方控件treetable，最终实现效果如下图所示： 引入控件： layui.config({ base: '/js/' //直接在项目中引用}).extend({ treetable: 'treetable/treetable', ztree: 'ztree/ztree-object', ax: 'ax/ax',}).

layui开发时，遇到要求做成这样的树形表格的需求。这里我们要用到layui的第三方控件treetable，最终实现效果如下图所示：



引入控件：

layui.config({
    base: '/js/'           //直接在项目中引用
}).extend({
    treetable: 'treetable/treetable',
    ztree: 'ztree/ztree-object',
    ax: 'ax/ax',
}).use(['ztree', 'treetable', 'table','form'], function(){
     var $zTree = layui.ztree;
     var treetable = layui.treetable;
     var table = layui.table;
     var form = layui.form;

然后初始化表格，这里和layui是一样的：

 /**
      * 初始化表格的列
      */
     Dept.initColumn = function () {
         return [[
             {type: 'checkbox', fixed: 'left'},
             { field: 'id', hide: true,title: 'ID'},
             { field: 'name', title: '部门名称', minWidth: 200},
             { field: 'code', title: '部门编号'},
             { field: 'pcode', title: '父级权限编号'},
             {field: 'remark', title: '备注', sort: true}
         ]];
     };

Dept.initTable = function () {
        return treetable.render({
            elem: '#' +tableid,//表格id
            url: '/appconfig/dept/list',//数据接口
            /*
                        page: false,
            */
            height: "full-158",
            cellMinWidth: 100,
            cols: Dept.initColumn(),//调用上面初始化的表格
            treeColIndex: 2,      //下拉图标出现的列数，这里是第2列
            treeSpid: 0,          //最上级的父级编号，这个是自定义的，但是必须和你数据库中一致
            treeIdName: 'code',   //子表格的编号
            treePidName: 'pcode', //子表格父级编号
            treeDefaultClose: false,
            treeLinkage: true,
            where : {
                type : 0,
                key : ""
            }
        });
    };

这样其实就已经可以实现下拉表格了。但是这里需要对数据库表的字段做一下说明：



子表格的pcode必须是父级的code。