mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.2 KiB
148 lines
3.2 KiB
8 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<title>树模块 - layui</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body{padding: 50px 100px;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<ul id="demo"></ul>
|
||
|
|
|
||
|
|
<ul id="demo1" style="margin-top: 50px;"></ul>
|
||
|
|
|
||
|
|
<script src="../src/layui.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
layui.use('tree', function(){
|
||
|
|
var tree = layui.tree({
|
||
|
|
elem: '#demo' //指定元素
|
||
|
|
//,check: 'checkbox' //勾选风格
|
||
|
|
,skin: 'as' //设定皮肤
|
||
|
|
//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
|
||
|
|
,drag: true
|
||
|
|
,click: function(item){ //点击节点回调
|
||
|
|
console.log(item)
|
||
|
|
}
|
||
|
|
,nodes: [ //节点
|
||
|
|
{
|
||
|
|
name: '常用文件夹'
|
||
|
|
,id: 1
|
||
|
|
,alias: 'changyong'
|
||
|
|
,children: [
|
||
|
|
{
|
||
|
|
name: '所有未读'
|
||
|
|
,id: 11
|
||
|
|
//,href: 'http://www.layui.com/'
|
||
|
|
,alias: 'weidu'
|
||
|
|
}, {
|
||
|
|
name: '置顶邮件'
|
||
|
|
,id: 12
|
||
|
|
}, {
|
||
|
|
name: '标签邮件'
|
||
|
|
,id: 13
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}, {
|
||
|
|
name: '我的邮箱'
|
||
|
|
,id: 2
|
||
|
|
,spread: true
|
||
|
|
,children: [
|
||
|
|
{
|
||
|
|
name: 'QQ邮箱'
|
||
|
|
,id: 21
|
||
|
|
,spread: true
|
||
|
|
,children: [
|
||
|
|
{
|
||
|
|
name: '收件箱'
|
||
|
|
,id: 211
|
||
|
|
,children: [
|
||
|
|
{
|
||
|
|
name: '所有未读'
|
||
|
|
,id: 2111
|
||
|
|
}, {
|
||
|
|
name: '置顶邮件'
|
||
|
|
,id: 2112
|
||
|
|
}, {
|
||
|
|
name: '标签邮件'
|
||
|
|
,id: 2113
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}, {
|
||
|
|
name: '已发出的邮件'
|
||
|
|
,id: 212
|
||
|
|
}, {
|
||
|
|
name: '垃圾邮件'
|
||
|
|
,id: 213
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}, {
|
||
|
|
name: '阿里云邮'
|
||
|
|
,id: 22
|
||
|
|
,children: [
|
||
|
|
{
|
||
|
|
name: '收件箱'
|
||
|
|
,id: 221
|
||
|
|
}, {
|
||
|
|
name: '已发出的邮件'
|
||
|
|
,id: 222
|
||
|
|
}, {
|
||
|
|
name: '垃圾邮件'
|
||
|
|
,id: 223
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
//生成一个模拟树
|
||
|
|
var createTree = function(node, start){
|
||
|
|
node = node || function(){
|
||
|
|
var arr = [];
|
||
|
|
for(var i = 1; i < 10; i++){
|
||
|
|
arr.push({
|
||
|
|
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
}();
|
||
|
|
start = start || 1;
|
||
|
|
layui.each(node, function(index, item){
|
||
|
|
if(start < 10 && index < 9){
|
||
|
|
var child = [
|
||
|
|
{
|
||
|
|
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||
|
|
}
|
||
|
|
];
|
||
|
|
node[index].children = child;
|
||
|
|
createTree(child, index + start + 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return node;
|
||
|
|
};
|
||
|
|
|
||
|
|
layui.tree({
|
||
|
|
elem: '#demo1' //指定元素
|
||
|
|
,nodes: createTree()
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<pre class="layui-code">
|
||
|
|
# layui.tree-v2 备忘
|
||
|
|
* check参数 - checkbox、radio的支持
|
||
|
|
* 拖拽的支持
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|