基于layui v2.2.5的 layui-tree写了一个treetable(树形列表)
效果
1.1 收起效果图
1.2 展开效果图
1.开发预备
首先需要到layui官网/, 下载layui插件，在页面引入layui.js和layui.css
2.页面元素
添加expredable参数: 设置展示treetable时是否展开，默认为false;
treetable显示多列的方式，参考以下，field的值要跟数据格式中的一致
var layout = [
{name: 'id',field: 'id',headerClass: 'value_col',colClass: 'value_col'},
{name: '菜单名称',treeNodes: true,headerClass: 'value_col',colClass: 'value_col'},
{name: '操作',headerClass: 'value_col',colClass: 'value_col',style: 'width: 30%',
render: function(row) {
return [
'',
].join('');
}
}
];
实例化form 2. 传入checkbox参数 3. form.render()渲染页面
layui.use(['form', 'tree', 'layer'], function() {
var layer = layui.layer,
form = layui.form,
$ = layui.jquery;
var tree1 = layui.treeGird({
elem: '#demo', //传入元素选择器
spreadable: false, //设置是否全展开，默认不展开
checkbox: true,
nodes: [{
"id": "1",
"name": "父节点1",
"children": [{
"id": "11",
"name": "父节点11"
},
{
"id": "12",
"name": "父节点12"
}
]
},
{
"id": "2",
"name": "父节点2",
"children": [{
"id": "21",
"name": "子节点21",
"children": [{
"id": "211",
"name": "子节点211"
},
{
"id": "211",
"name": "子节点211"
}
]
}]
}
],
layout: layout
});
form.render();
});
树形菜单全部收起和全部展开功能，调用方式如下
//收起
$('#collapse').on('click', function() {
layui.collapse(tree1);
});
//删除
$('#deleteAll').on('click', function() {
var arr = layui.getSelected(tree1);
//console.log(arr);
});
//展开
$('#expand').on('click', function() {
layui.expand(tree1);
});
本文测试的 demo 下载地址为 /download/majker/10632544
新的链接：/s/1PNRdCnEZW0Wj1Cv_t3_Xjw
提取码：pr43
