介绍
首先介绍一下layui，是一个模块化前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。
前段时间，自己闲来写一个后端管理系统，引进了layui，使用了树形菜单的内置模块，可是该功能并未完全满足需求。 由于layui是开源包，为满足需求，故基于layui-tree写了一个treetable.
使用
页面元素
js代码
var layout = [
{name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%'}
];
layui.use(['tree', 'layer', 'form'], function(){
var layer = layui.layer, $ = layui.jquery;
var form = layui.form();
layui.treeGird({
elem: '#demo', //传入元素选择器
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"
}
]
}
]
}
],
layout:layout
});
});
页面展示
方法 语法：layui.treeGird(options)
options是一个对象参数，可支持的key如下表
节点数据格式nodes nodes
列表头元素layout layout
自定义的render
var layout = [
{name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%'},
{name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 20%', render: function(row) {
return ' 删除'; //列渲染
}},
];
效果如下：
总结 灵感来源layui，感谢layui的开源。
附代码下载地址：https://gitee.com/shaojiepeng...