最新版本是基于layui v2.2.3, 附件中有layui v1.0.7

2018.4.28 Updated

添加了全选checkbox

另外demo.html删掉部分代码，以免监听事件冲突

2018.2.11 Updated

新增了复选框功能

使用方式：1. 实例化form 2. 传入checkbox参数 3. form.render()渲染页面

获取选中的row: layui.getSelected('id');

2018.2.1 Updated

新增树形菜单全部收起和全部展开功能，调用方式如下：

2017.12.11 Updated

添加expredable参数: 设置展示treetable时是否展开，默认为false; 请参考demo.html

treetable显示多列的方式，参考以下，field的值要跟数据格式中的一致

var layout = [

{name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 40%'},

{name: 'Url', field: 'url', headerClass: 'value_col', colClass: 'value_col', style: 'width: 30%'},

{name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 30%', render: function(row) { return render(row)}}

];

#layui-treeGird

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

});

});

3.页面展示

#方法

语法：layui.treeGird(options)

options是一个对象参数，可支持的key如下表

#节点数据格式nodes

#列表头元素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的开源。