feat(atree): 新增atree模块
This commit is contained in:
smallwei
144
examples/atree.html
Normal file
144
examples/atree.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!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>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('atree', function() {
|
||||
var tree = layui.atree({
|
||||
elem: '#demo' //指定元素
|
||||
,
|
||||
check: 'checkbox' //勾选风格
|
||||
,
|
||||
skin: 'as' //设定皮肤
|
||||
//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
|
||||
,
|
||||
drag: true,
|
||||
props:{
|
||||
name: 'name',
|
||||
id: 'id',
|
||||
children:'children'
|
||||
},
|
||||
change:function(val){
|
||||
console.group('change event')
|
||||
console.log('Array')
|
||||
console.log(val);
|
||||
console.groupEnd()
|
||||
},
|
||||
click: function(item) { //点击节点回调
|
||||
console.group('click event')
|
||||
console.log('Object')
|
||||
console.log(item);
|
||||
console.groupEnd()
|
||||
},
|
||||
addClick:function(item,elem,add){
|
||||
console.group('append event')
|
||||
console.log('Object')
|
||||
console.log(item);
|
||||
console.log('dom')
|
||||
console.log(elem);
|
||||
console.log('dom add event')
|
||||
var item ={
|
||||
name: '测试节点'+new Date().getTime(),
|
||||
id:-1
|
||||
}
|
||||
add(item)
|
||||
console.groupEnd()
|
||||
},
|
||||
deleteClick:function(item,elem,done){
|
||||
console.group('delete event')
|
||||
console.log('Object')
|
||||
console.log(item);
|
||||
console.log('dom')
|
||||
console.log(elem);
|
||||
console.log('dom delete event')
|
||||
done();
|
||||
console.groupEnd()
|
||||
},
|
||||
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
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,182 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>树模块 - layui</title>
|
||||
<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">
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 50px 100px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body{padding: 50px 100px;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul id="demo"></ul>
|
||||
<ul id="demo"></ul>
|
||||
|
||||
<ul id="demo1" style="margin-top: 50px;"></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,
|
||||
props:{
|
||||
name: 'name',
|
||||
id: 'id',
|
||||
children:'children'
|
||||
},
|
||||
change:function(val){
|
||||
console.group('change event')
|
||||
console.log('Array')
|
||||
console.log(val);
|
||||
console.groupEnd()
|
||||
},
|
||||
click: function(item) { //点击节点回调
|
||||
console.group('click event')
|
||||
console.log('Object')
|
||||
console.log(item);
|
||||
console.groupEnd()
|
||||
},
|
||||
addClick:function(item,elem,add){
|
||||
console.group('append event')
|
||||
console.log('Object')
|
||||
console.log(item);
|
||||
console.log('dom')
|
||||
console.log(elem);
|
||||
console.log('dom add event')
|
||||
var item ={
|
||||
name: '测试节点'+new Date().getTime(),
|
||||
id:-1
|
||||
}
|
||||
add(item)
|
||||
console.groupEnd()
|
||||
},
|
||||
deleteClick:function(item,elem,done){
|
||||
console.group('delete event')
|
||||
console.log('Object')
|
||||
console.log(item);
|
||||
console.log('dom')
|
||||
console.log(elem);
|
||||
console.log('dom delete event')
|
||||
done();
|
||||
console.groupEnd()
|
||||
},
|
||||
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
|
||||
}]
|
||||
}]
|
||||
}
|
||||
<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
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//生成一个模拟树
|
||||
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()
|
||||
});
|
||||
|
||||
}, {
|
||||
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')
|
||||
});
|
||||
</script>
|
||||
}
|
||||
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;
|
||||
};
|
||||
|
||||
<!--<pre class="layui-code">
|
||||
# layui.tree-v2 备忘
|
||||
* check参数 - checkbox、radio的支持
|
||||
* 拖拽的支持
|
||||
</pre>-->
|
||||
layui.tree({
|
||||
elem: '#demo1' //指定元素
|
||||
,nodes: createTree()
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<pre class="layui-code">
|
||||
# layui.tree-v2 备忘
|
||||
* check参数 - checkbox、radio的支持
|
||||
* 拖拽的支持
|
||||
</pre>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user