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.
147 lines
3.2 KiB
147 lines
3.2 KiB
<!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>
|
|
|