layui 树形目录学习记录
通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例，我这边是模拟了一串数据，后面讲讲动态加载树形菜单熬：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
</head>
<body>
<script src="static/layui/layui.js" charset="utf-8"></script>
<div id="test1"></div>
<script>
layui.use('tree', function(){
var tree = layui.tree;
//模拟数据
var data = [{
title: '一级1'
,id: 1
,field: 'name1'
,checked: true
,spread: true
,children: [{
title: '二级1-1 可允许跳转'
,id: 3
,field: 'name11'
,href: 'https://www.layui.com/'
,children: [{
title: '三级1-1-3'
,id: 23
,field: ''
,children: [{
title: '四级1-1-3-1'
,id: 24
,field: ''
,children: [{
title: '五级1-1-3-1-1'
,id: 30
,field: ''
},{
title: '五级1-1-3-1-2'
,id: 31
,field: ''
}]
}]
},{
title: '三级1-1-1'
,id: 7
,field: ''
,children: [{
title: '四级1-1-1-1 可允许跳转'
,id: 15
,field: ''
,href: '#'
}]
},{
title: '三级1-1-2'
,id: 8
,field: ''
,children: [{
title: '四级1-1-2-1'
,id: 32
,field: ''
}]
}]
},{
title: '二级1-2'
,id: 4
,spread: true
,children: [{
title: '三级1-2-1'
,id: 9
,field: ''
,disabled: true
},{
title: '三级1-2-2'
,id: 10
,field: ''
}]
},{
title: '二级1-3'
,id: 20
,field: ''
,children: [{
title: '三级1-3-1'
,id: 21
,field: ''
},{
title: '三级1-3-2'
,id: 22
,field: ''
}]
}]
},{
title: '一级2'
,id: 2
,field: ''
,spread: true
,children: [{
title: '二级2-1'
,id: 5
,field: ''
,spread: true
,children: [{
title: '三级2-1-1'
,id: 11
,field: ''
},{
title: '三级2-1-2'
,id: 12
,field: ''
}]
},{
title: '二级2-2'
,id: 6
,field: ''
,children: [{
title: '三级2-2-1'
,id: 13
,field: ''
},{
title: '三级2-2-2'
,id: 14
,field: ''
,disabled: true
}]
}]
},{
title: '一级3'
,id: 16
,field: ''
,children: [{
title: '二级3-1'
,id: 17
,field: ''
,fixed: true
,children: [{
title: '三级3-1-1'
,id: 18
,field: ''
},{
title: '三级3-1-2'
,id: 19
,field: ''
}]
},{
title: '二级3-2'
,id: 27
,field: ''
,children: [{
title: '三级3-2-1'
,id: 28
,field: ''
},{
title: '三级3-2-2'
,id: 29
,field: ''
}]
}]
}]
//基本演示
var inst1 = tree.render({
elem: '#test1' //绑定元素id
,data: data //数据
,showCheckbox: true //是否显示复选框
,id: 'demoId1' //索引
,isJump: true //是否允许点击节点时弹出新窗口跳转
,click: function(obj){ //点击事件
var data = obj.data; //获取当前点击的节点数据
layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
}
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号