layui树形菜单写的树形列表（treetable）

基于layui v2.2.5的 layui-tree写了一个treetable（树形列表）

效果

1.1 收起效果图

1.2 展开效果图

1.开发预备

首先需要到layui官网https://www.layui.com/, 下载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('');
				}
			}
];

1. 实例化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 下载地址为 https://download.csdn.net/download/majker/10632544
新的链接：https://pan.baidu.com/s/1PNRdCnEZW0Wj1Cv_t3_Xjw
提取码：pr43