layui树形菜单右键_【前端框架】基于layui树形菜单写的树形列表（treetable）

介绍

首先介绍一下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...