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。