layui勾选不联动⽗项树形控件,treetable-lay 简介
Layui的树形表格treeTable，⽀持异步加载(懒加载)、复选框联动、折叠状态记忆。
更新⽇志
2019-11-18 (v2.0)
重构treeTable，不再基于数据表格table模块
⽀持懒加载(异步加载)、⽀持数据渲染
同时⽀持pid形式数据和children形式数据
⽆需指定最顶级pid，⾃动查
⽀持复选框联动，⽀持半选状态
⽀持折叠状态记忆
⽀持只刷新某个节点下数据
⽀持⾃定义树形图标
⽀持设置节点勾选、获取勾选节点
⽀持⾏单击、双击、单元格单击、双击事件
⽀持单元格编辑，并且⽀持校验格式
⽀持固定表头，⽀持ful-xxx的写法
⽀持⾃定义复杂表头
优化搜索功能，提供更好的搜索体验
2018-07-22 (v1.0)
基于数据表格table模板实现树形结构
实现折叠/展开功能
使⽤⽂档
以下是1.0版本使⽤⽂档
引⼊模块
下载module/treetable-lay整个⽂件夹，放在你的项⽬⾥⾯，然后使⽤模块加载的⽅式使⽤：
base: 'module/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {
var treetable = able;
});
渲染表格
layui.use(['treetable'], function () {
var treetable = able;
// 渲染表格
treeColIndex: 2, // treetable新增参数
treeSpid: -1, // treetable新增参数
treeIdName: 'd_id', // treetable新增参数
treePidName: 'd_pid', // treetable新增参数
treeDefaultClose: true, // treetable新增参数
treeLinkage: true, // treetable新增参数
elem: '#table1',
url: 'json/data1.json',
cols: [[
{type: 'numbers'},
{field: 'id', title: 'id'},
{field: 'name', title: 'name'},
{field: 'sex', title: 'sex'},
{field: 'pid', title: 'pid'},
]]
});
});
注意：
可以使⽤url传递数据，也可以使⽤data传递数据，如果使⽤url传递数据，参数是where字段，
跟layui数据表格的使⽤⽅式⼀致。
数据格式
总⽽⾔之就是以id、pid的形式，不是以subMenus的形式，当然id、pid这两个字段的名称可以⾃定义：{
"code":0,
"msg":"ok",
"data":[{
"id":1,
"name":"xx",
"sex":"male",
"pid":-1
},{
layui下载"id":2,
"name":"xx",
"sex":"male",
"pid":1
}
]
}
参数说明
layui数据表格的所有参数都可以⽤，除此之外treetable新增的参数有：参数
类型
是否必填
描述
treeColIndex
int
是
树形图标显⽰在第⼏列
treeSpid
object
是
最上级的⽗级id
treeIdName
string
否
id字段的名称
treePidName
string
否
pid字段的名称
treeDefaultClose
boolean
否
是否默认折叠
boolean
否
⽗级展开时是否⾃动展开所有⼦级
treeColIndex
树形图标(箭头和⽂件夹、⽂件的图标)显⽰在第⼏列， 索引值是cols数组的下标。
treeSpid
最上级的⽗级id，⽐如你可以规定pid为0或-1的是最顶级的⽬录。
treeIdName
treetable是以id和pid字段来渲染树形结构的，如果你的数据没有id和pid字段，你可以指定id和pid字段的名称。treePidName
pid在你的数据字段中的名称。
treeDefaultClose
默认是全部展开的，如果需要默认全部关闭，加上treeDefaultClose:true即可。
treeLinkage
⽗级展开时是否⾃动展开所有⼦级
注意事项
不能使⽤分页功能，即使写了page:true，也会忽略该参数。
不能使⽤排序功能，不要开启排序功能。
除了⽂档上写的的⽅法之外，其他数据表格的⽅法都使⽤。
建议删除和修改请求完后台之后请刷新(重新渲染)表格，最好不要使⽤obj.delete⽅式删除。
其他⽅法
全部展开
全部折叠
treetable.foldAll('#table1');
如何修改图标
通过css来修改图标，content是图标的unicode字符。
修改⽂件夹图标：
/** 未展开 */
.treeTable-icon .layui-icon-layer:before {
content: "\e638";
}
.treeTable-icon.open .layui-icon-layer:before { content: "\e638";
}
修改⽂件图标：
.treeTable-icon .layui-icon-file:before {
content: "\e621";
}
修改箭头的图标：
/** 未展开 */
.treeTable-icon .layui-icon-triangle-d:before { content: "\e623";
}
/** 展开 */
.treeTable-icon.open .layui-icon-triangle-d:before { content: "\e625";
}
效果展⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。