feat(atree): 新增atree模块

This commit is contained in:
smallwei 2018-07-16 22:15:18 +08:00
parent 8dae2c5feb
commit 1b541568a0
6 changed files with 847 additions and 522 deletions

0
HARD Normal file
View File

144
examples/atree.html Normal file
View 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>

View File

@ -1,182 +1,147 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title> <title>树模块 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style> <style>
body { body{padding: 50px 100px;}
padding: 50px 100px; </style>
}
</style>
</head> </head>
<body> <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 src="../src/layui.js"></script>
<script> <script>
layui.use('tree', function() {
var tree = layui.tree({ layui.use('tree', function(){
elem: '#demo' //指定元素 var tree = layui.tree({
, elem: '#demo' //指定元素
check: 'checkbox' //勾选风格 //,check: 'checkbox' //勾选风格
, ,skin: 'as' //设定皮肤
skin: 'as' //设定皮肤 //,target: '_blank' //是否新选项卡打开比如节点返回href才有效
//,target: '_blank' //是否新选项卡打开比如节点返回href才有效 ,drag: true
, ,click: function(item){ //点击节点回调
drag: true, console.log(item)
props:{ }
name: 'name', ,nodes: [ //节点
id: 'id', {
children:'children' name: '常用文件夹'
}, ,id: 1
change:function(val){ ,alias: 'changyong'
console.group('change event') ,children: [
console.log('Array') {
console.log(val); name: '所有未读'
console.groupEnd() ,id: 11
}, //,href: 'http://www.layui.com/'
click: function(item) { //点击节点回调 ,alias: 'weidu'
console.group('click event') }, {
console.log('Object') name: '置顶邮件'
console.log(item); ,id: 12
console.groupEnd() }, {
}, name: '标签邮件'
addClick:function(item,elem,add){ ,id: 13
console.group('append event') }
console.log('Object') ]
console.log(item); }, {
console.log('dom') name: '我的邮箱'
console.log(elem); ,id: 2
console.log('dom add event') ,spread: true
var item ={ ,children: [
name: '测试节点'+new Date().getTime(), {
id:-1 name: 'QQ邮箱'
} ,id: 21
add(item) ,spread: true
console.groupEnd() ,children: [
}, {
deleteClick:function(item,elem,done){ name: '收件箱'
console.group('delete event') ,id: 211
console.log('Object') ,children: [
console.log(item); {
console.log('dom') name: '所有未读'
console.log(elem); ,id: 2111
console.log('dom delete event') }, {
done(); name: '置顶邮件'
console.groupEnd() ,id: 2112
}, }, {
nodes: [ //节点 name: '标签邮件'
{ ,id: 2113
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
}]
}]
}
] ]
}); }, {
name: '已发出的邮件'
//生成一个模拟树 ,id: 212
var createTree = function(node, start) { }, {
node = node || function() { name: '垃圾邮件'
var arr = []; ,id: 213
for (var i = 1; i < 10; i++) { }
arr.push({ ]
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1') }, {
}); name: '阿里云邮'
} ,id: 22
return arr; ,children: [
}(); {
start = start || 1; name: '收件箱'
layui.each(node, function(index, item) { ,id: 221
if (start < 10 && index < 9) { }, {
var child = [{ name: '已发出的邮件'
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1') ,id: 222
}]; }, {
node[index].children = child; name: '垃圾邮件'
createTree(child, index + start + 1); ,id: 223
} }
}); ]
return node; }
}; ]
}
layui.tree({ ]
elem: '#demo1' //指定元素 });
,
nodes: createTree() //生成一个模拟树
}); 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({
# layui.tree-v2 备忘 elem: '#demo1' //指定元素
* check参数 - checkbox、radio的支持 ,nodes: createTree()
* 拖拽的支持 });
</pre>-->
});
</script>
<pre class="layui-code">
# layui.tree-v2 备忘
* check参数 - checkbox、radio的支持
* 拖拽的支持
</pre>
</body> </body>
</html>
</html>

360
src/lay/modules/atree.js Normal file
View File

@ -0,0 +1,360 @@
/**
@Namelayui.atree2.0 树组件
@Authorsmallwei
@LicenseMIT
*/
layui.define('jquery', function(exports) {
"use strict";
var $ = layui.$,
hint = layui.hint();
//勾选集合
var changeList = [];
//变量别名
var props ={
name: 'name',
id: 'id',
children:'children'
};
var enterSkin = 'layui-tree-enter',
Tree = function(options) {
this.options = options;
this.props = this.options.props || props;
this.nameKey = this.props.name || props.name;
this.idKey = this.props.id || props.id;
this.childrenKey = this.props.children || props.children;
};
//图标
var icon = {
arrow: ['&#xe623;', '&#xe625;'] //箭头
,
checkbox: ['&#xe68c;', '&#xe624;'] //复选框
,
leaf: '&#xe621;' //叶节点
};
//初始化
Tree.prototype.init = function(elem) {
var that = this;
elem.addClass('layui-box layui-tree'); //添加tree样式
if(that.options.skin) {
elem.addClass('layui-tree-skin-' + that.options.skin);
}
that.tree(elem);
that.on(elem);
};
//树节点解析
Tree.prototype.tree = function(elem, children) {
var that = this,
options = that.options
var nodes = children || options.nodes;
layui.each(nodes, function(index, item) {
var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
var ul = $('<ul class="' + (item.spread ? "layui-show" : "") + '"></ul>');
var li = that.getNode(item, hasChild);
//如果有子节点,则递归继续生成树
if(hasChild) {
li.append(ul);
that.tree(ul, item[that.childrenKey]);
}
//伸展节点
that.spread(li, item);
that.bindUlEvent(li, item);
elem.append(li);
});
};
//节点dom拼接
Tree.prototype.getDom = function() {
var that = this,
options = that.options
return {
spread: function(item, hasChild) {
return hasChild ? '<i class="layui-icon layui-tree-spread">' + (
item.spread ? icon.arrow[1] : icon.arrow[0]
) + '</i>' : '';
},
checkbox: function(item) {
return options.check ? (
'<i class="layui-icon layui-tree-check">' + (
options.check === 'checkbox' ? icon.checkbox[0] : (
options.check === 'radio' ? icon.radio[0] : ''
)
) + '</i>'
) : '';
},
node: function(item) {
return '<a href="' + (item.href || 'javascript:;') + '" ' + (
options.target && item.href ? 'target=\"' + options.target + '\"' : ''
) + '>' +
('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>')
},
menu: function(item) {
return '<div class="layui-tree-menu">' +
'<span class="layui-tree-add">Add</span>' +
'<span class="layui-tree-delete">Delete</span>' +
'</div>'
}
}
}
//获取树节点
Tree.prototype.getNode = function(item, hasChild) {
var that = this,
options = that.options
var dom = that.getDom();
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') +('data-id=' + item[that.idKey])+ '>'
//展开箭头
,
dom.spread(item, hasChild)
//复选框/单选框
,
dom.checkbox(item)
//节点
,
dom.node(item)
//菜单
,
dom.menu()
,
'</li>'
].join(''));
return li;
}
//父绑定事件
Tree.prototype.bindUlEvent = function(li, item) {
var that = this,
options = that.options
//触发点击节点回调
typeof options.click === 'function' && that.click(li, item);
//节点选择
typeof options.change === 'function' && options.check === 'checkbox' && that.checkbox(li, item);
//新增方法
typeof options.addClick === 'function' && that.add(li, item);
//删除方法
typeof options.deleteClick === 'function' && that.delete(li, item);
//拖拽节点
options.drag && that.drag(li, item);
}
//选中回调函数
Tree.prototype.change = function() {
var that = this,
options = that.options;
options.change(changeList);
},
//新增方法回调
Tree.prototype.add = function(elem, item) {
var that = this,
options = that.options;
var addBtn = elem.children('.layui-tree-menu').children('.layui-tree-add')
var arrow = elem.children('.layui-tree-spread')
var ul = elem.children('ul'),
a = elem.children('a');
var addEvent = function(e) {
layui.stope(e);
var _addEvent = {
add: function(itemAddObj) {
if(!ul[0]) {
ul = $('<ul class="layui-show"></ul>');
elem.append(ul);
}
if(!arrow[0]) {
arrow = $('<i class="layui-icon layui-tree-spread">' + icon.arrow[1] + '</i>');
elem.prepend(arrow);
that.spread(elem, item);
}
if(!elem.data('spread')) {
that.open(elem, ul, arrow)
}
var li = that.getNode(itemAddObj, false);
that.bindUlEvent(li, itemAddObj);
ul.append(li);
}
}
options.addClick(item, elem, _addEvent.add)
}
addBtn.on('click', addEvent);
}
//删除方法回调
Tree.prototype.delete = function(elem, item) {
var that = this,
options = that.options;
var deleteBtn = elem.children('.layui-tree-menu').children('.layui-tree-delete')
var ul = elem.children('ul'),
a = elem.children('a');
var deleteEvent = function(e) {
layui.stope(e);
var _deleteEvent = {
done: function() {
elem.html('');
}
}
options.deleteClick(item, elem, _deleteEvent.done)
}
deleteBtn.on('click', deleteEvent);
}
//点击节点回调
Tree.prototype.click = function(elem, item) {
var that = this,
options = that.options;
elem.children('a').on('click', function(e) {
layui.stope(e);
options.click(item)
});
};
//节点选择
Tree.prototype.checkbox = function(elem, item) {
var that = this,
options = that.options;
var checkbox = elem.children('.layui-tree-check')
var ul = elem.children('ul'),
a = elem.children('a');
var check = function() {
var index = layui.findObj(changeList, item);
if(elem.data('check')) {
elem.data('check', null)
checkbox.html(icon.checkbox[0]);
} else {
elem.data('check', true);
checkbox.html(icon.checkbox[1]);
}
if(index === -1) {
changeList.push(item);
} else {
changeList.splice(index, 1);
}
that.change();
}
checkbox.on('click', check);
};
//伸展节点
Tree.prototype.spread = function(elem, item) {
var that = this,
options = that.options;
var arrow = elem.children('.layui-tree-spread')
var ul = elem.children('ul'),
a = elem.children('a');
//如果没有子节点,则不执行
if(!ul[0]) return;
arrow.on('click', function() {
that.open(elem, ul, arrow)
});
}
//打开节点
Tree.prototype.open = function(elem, ul, arrow) {
if(elem.data('spread')) {
elem.data('spread', null)
ul.removeClass('layui-show');
arrow.html(icon.arrow[0]);
} else {
elem.data('spread', true);
ul.addClass('layui-show');
arrow.html(icon.arrow[1]);
}
};
//通用事件
Tree.prototype.on = function(elem) {
var that = this,
options = that.options;
var dragStr = 'layui-tree-drag';
//屏蔽选中文字
elem.find('i').on('selectstart', function(e) {
return false
});
//拖拽
if(options.drag) {
$(document).on('mousemove', function(e) {
var move = that.move;
if(move.from) {
var to = move.to,
treeMove = $('<div class="layui-box ' + dragStr + '"></div>');
e.preventDefault();
$('.' + dragStr)[0] || $('body').append(treeMove);
var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove;
(dragElem).addClass('layui-show').html(move.from.elem.children('a').html());
dragElem.css({
left: e.pageX + 10,
top: e.pageY + 10
})
}
}).on('mouseup', function() {
var move = that.move;
if(move.from) {
move.from.elem.children('a').removeClass(enterSkin);
move.to && move.to.elem.children('a').removeClass(enterSkin);
that.move = {};
$('.' + dragStr).remove();
}
});
}
};
//拖拽节点
Tree.prototype.move = {};
Tree.prototype.drag = function(elem, item) {
var that = this,
options = that.options;
var a = elem.children('a'),
mouseenter = function() {
var othis = $(this),
move = that.move;
if(move.from) {
move.to = {
item: item,
elem: elem
};
othis.addClass(enterSkin);
}
};
a.on('mousedown', function() {
var move = that.move
move.from = {
item: item,
elem: elem
};
});
a.on('mouseenter', mouseenter).on('mousemove', mouseenter)
.on('mouseleave', function() {
var othis = $(this),
move = that.move;
if(move.from) {
delete move.to;
othis.removeClass(enterSkin);
}
});
};
//暴露接口
exports('atree', function(options) {
var tree = new Tree(options = options || {});
var elem = $(options.elem);
if(!elem[0]) {
return hint.error('layui.tree 没有找到' + options.elem + '元素');
}
tree.init(elem);
});
});

View File

@ -1,360 +1,215 @@
/** /**
@Namelayui.tree2.0 树组件 @Namelayui.tree 树组件
@Authorsmallwei @Author贤心
@LicenseMIT @LicenseMIT
*/ */
layui.define('jquery', function(exports) {
"use strict"; layui.define('jquery', function(exports){
"use strict";
var $ = layui.$,
hint = layui.hint(); var $ = layui.$
//勾选集合 ,hint = layui.hint();
var changeList = [];
//变量别名 var enterSkin = 'layui-tree-enter', Tree = function(options){
var props ={ this.options = options;
name: 'name', };
id: 'id',
children:'children' //图标
}; var icon = {
arrow: ['&#xe623;', '&#xe625;'] //箭头
var enterSkin = 'layui-tree-enter', ,checkbox: ['&#xe626;', '&#xe627;'] //复选框
Tree = function(options) { ,radio: ['&#xe62b;', '&#xe62a;'] //单选框
this.options = options; ,branch: ['&#xe622;', '&#xe624;'] //父节点
this.props = this.options.props || props; ,leaf: '&#xe621;' //叶节点
this.nameKey = this.props.name || props.name; };
this.idKey = this.props.id || props.id;
this.childrenKey = this.props.children || props.children; //初始化
}; Tree.prototype.init = function(elem){
//图标 var that = this;
var icon = { elem.addClass('layui-box layui-tree'); //添加tree样式
arrow: ['&#xe623;', '&#xe625;'] //箭头 if(that.options.skin){
, elem.addClass('layui-tree-skin-'+ that.options.skin);
checkbox: ['&#xe68c;', '&#xe624;'] //复选框 }
, that.tree(elem);
leaf: '&#xe621;' //叶节点 that.on(elem);
}; };
//初始化 //树节点解析
Tree.prototype.init = function(elem) { Tree.prototype.tree = function(elem, children){
var that = this; var that = this, options = that.options
elem.addClass('layui-box layui-tree'); //添加tree样式 var nodes = children || options.nodes;
if(that.options.skin) {
elem.addClass('layui-tree-skin-' + that.options.skin); layui.each(nodes, function(index, item){
} var hasChild = item.children && item.children.length > 0;
that.tree(elem); var ul = $('<ul class="'+ (item.spread ? "layui-show" : "") +'"></ul>');
that.on(elem); var li = $(['<li '+ (item.spread ? 'data-spread="'+ item.spread +'"' : '') +'>'
}; //展开箭头
,function(){
//树节点解析 return hasChild ? '<i class="layui-icon layui-tree-spread">'+ (
Tree.prototype.tree = function(elem, children) { item.spread ? icon.arrow[1] : icon.arrow[0]
var that = this, ) +'</i>' : '';
options = that.options }()
var nodes = children || options.nodes;
//复选框/单选框
layui.each(nodes, function(index, item) { ,function(){
var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0; return options.check ? (
var ul = $('<ul class="' + (item.spread ? "layui-show" : "") + '"></ul>'); '<i class="layui-icon layui-tree-check">'+ (
var li = that.getNode(item, hasChild); options.check === 'checkbox' ? icon.checkbox[0] : (
//如果有子节点,则递归继续生成树 options.check === 'radio' ? icon.radio[0] : ''
if(hasChild) { )
li.append(ul); ) +'</i>'
that.tree(ul, item[that.childrenKey]); ) : '';
} }()
//伸展节点
that.spread(li, item); //节点
that.bindUlEvent(li, item); ,function(){
elem.append(li); return '<a href="'+ (item.href || 'javascript:;') +'" '+ (
options.target && item.href ? 'target=\"'+ options.target +'\"' : ''
}); ) +'>'
}; + ('<i class="layui-icon layui-tree-'+ (hasChild ? "branch" : "leaf") +'">'+ (
hasChild ? (
//节点dom拼接 item.spread ? icon.branch[1] : icon.branch[0]
Tree.prototype.getDom = function() { ) : icon.leaf
var that = this, ) +'</i>') //节点图标
options = that.options + ('<cite>'+ (item.name||'未命名') +'</cite></a>');
return { }()
spread: function(item, hasChild) {
return hasChild ? '<i class="layui-icon layui-tree-spread">' + ( ,'</li>'].join(''));
item.spread ? icon.arrow[1] : icon.arrow[0]
) + '</i>' : ''; //如果有子节点,则递归继续生成树
}, if(hasChild){
checkbox: function(item) { li.append(ul);
return options.check ? ( that.tree(ul, item.children);
'<i class="layui-icon layui-tree-check">' + ( }
options.check === 'checkbox' ? icon.checkbox[0] : (
options.check === 'radio' ? icon.radio[0] : '' elem.append(li);
)
) + '</i>' //触发点击节点回调
) : ''; typeof options.click === 'function' && that.click(li, item);
},
node: function(item) { //伸展节点
return '<a href="' + (item.href || 'javascript:;') + '" ' + ( that.spread(li, item);
options.target && item.href ? 'target=\"' + options.target + '\"' : ''
) + '>' + //拖拽节点
('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>') options.drag && that.drag(li, item);
}, });
menu: function(item) { };
return '<div class="layui-tree-menu">' +
'<span class="layui-tree-add">Add</span>' + //点击节点回调
'<span class="layui-tree-delete">Delete</span>' + Tree.prototype.click = function(elem, item){
'</div>' var that = this, options = that.options;
} elem.children('a').on('click', function(e){
} layui.stope(e);
options.click(item)
} });
//获取树节点 };
Tree.prototype.getNode = function(item, hasChild) {
var that = this, //伸展节点
options = that.options Tree.prototype.spread = function(elem, item){
var dom = that.getDom(); var that = this, options = that.options;
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') +('data-id=' + item[that.idKey])+ '>' var arrow = elem.children('.layui-tree-spread')
//展开箭头 var ul = elem.children('ul'), a = elem.children('a');
,
dom.spread(item, hasChild) //执行伸展
var open = function(){
//复选框/单选框 if(elem.data('spread')){
, elem.data('spread', null)
dom.checkbox(item) ul.removeClass('layui-show');
arrow.html(icon.arrow[0]);
//节点 a.find('.layui-icon').html(icon.branch[0]);
, } else {
dom.node(item) elem.data('spread', true);
//菜单 ul.addClass('layui-show');
, arrow.html(icon.arrow[1]);
dom.menu() a.find('.layui-icon').html(icon.branch[1]);
, }
'</li>' };
].join(''));
return li; //如果没有子节点,则不执行
} if(!ul[0]) return;
//父绑定事件 arrow.on('click', open);
Tree.prototype.bindUlEvent = function(li, item) { a.on('dblclick', open);
var that = this, }
options = that.options
//触发点击节点回调 //通用事件
typeof options.click === 'function' && that.click(li, item); Tree.prototype.on = function(elem){
var that = this, options = that.options;
//节点选择 var dragStr = 'layui-tree-drag';
typeof options.change === 'function' && options.check === 'checkbox' && that.checkbox(li, item);
//屏蔽选中文字
//新增方法 elem.find('i').on('selectstart', function(e){
typeof options.addClick === 'function' && that.add(li, item); return false
});
//删除方法
typeof options.deleteClick === 'function' && that.delete(li, item); //拖拽
if(options.drag){
//拖拽节点 $(document).on('mousemove', function(e){
options.drag && that.drag(li, item); var move = that.move;
} if(move.from){
var to = move.to, treeMove = $('<div class="layui-box '+ dragStr +'"></div>');
//选中回调函数 e.preventDefault();
Tree.prototype.change = function() { $('.' + dragStr)[0] || $('body').append(treeMove);
var that = this, var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove;
options = that.options; (dragElem).addClass('layui-show').html(move.from.elem.children('a').html());
options.change(changeList); dragElem.css({
}, left: e.pageX + 10
,top: e.pageY + 10
//新增方法回调 })
Tree.prototype.add = function(elem, item) { }
var that = this, }).on('mouseup', function(){
options = that.options; var move = that.move;
var addBtn = elem.children('.layui-tree-menu').children('.layui-tree-add') if(move.from){
var arrow = elem.children('.layui-tree-spread') move.from.elem.children('a').removeClass(enterSkin);
var ul = elem.children('ul'), move.to && move.to.elem.children('a').removeClass(enterSkin);
a = elem.children('a'); that.move = {};
var addEvent = function(e) { $('.' + dragStr).remove();
layui.stope(e); }
var _addEvent = { });
add: function(itemAddObj) { }
if(!ul[0]) { };
ul = $('<ul class="layui-show"></ul>');
elem.append(ul); //拖拽节点
} Tree.prototype.move = {};
if(!arrow[0]) { Tree.prototype.drag = function(elem, item){
arrow = $('<i class="layui-icon layui-tree-spread">' + icon.arrow[1] + '</i>'); var that = this, options = that.options;
elem.prepend(arrow); var a = elem.children('a'), mouseenter = function(){
that.spread(elem, item); var othis = $(this), move = that.move;
} if(move.from){
if(!elem.data('spread')) { move.to = {
that.open(elem, ul, arrow) item: item
} ,elem: elem
var li = that.getNode(itemAddObj, false); };
that.bindUlEvent(li, itemAddObj); othis.addClass(enterSkin);
ul.append(li); }
} };
} a.on('mousedown', function(){
options.addClick(item, elem, _addEvent.add) var move = that.move
} move.from = {
addBtn.on('click', addEvent); item: item
} ,elem: elem
};
//删除方法回调 });
Tree.prototype.delete = function(elem, item) { a.on('mouseenter', mouseenter).on('mousemove', mouseenter)
var that = this, .on('mouseleave', function(){
options = that.options; var othis = $(this), move = that.move;
var deleteBtn = elem.children('.layui-tree-menu').children('.layui-tree-delete') if(move.from){
var ul = elem.children('ul'), delete move.to;
a = elem.children('a'); othis.removeClass(enterSkin);
var deleteEvent = function(e) { }
layui.stope(e); });
var _deleteEvent = { };
done: function() {
elem.html(''); //暴露接口
} exports('tree', function(options){
} var tree = new Tree(options = options || {});
options.deleteClick(item, elem, _deleteEvent.done) var elem = $(options.elem);
} if(!elem[0]){
deleteBtn.on('click', deleteEvent); return hint.error('layui.tree 没有找到'+ options.elem +'元素');
} }
tree.init(elem);
//点击节点回调 });
Tree.prototype.click = function(elem, item) { });
var that = this,
options = that.options;
elem.children('a').on('click', function(e) {
layui.stope(e);
options.click(item)
});
};
//节点选择
Tree.prototype.checkbox = function(elem, item) {
var that = this,
options = that.options;
var checkbox = elem.children('.layui-tree-check')
var ul = elem.children('ul'),
a = elem.children('a');
var check = function() {
var index = layui.findObj(changeList, item);
if(elem.data('check')) {
elem.data('check', null)
checkbox.html(icon.checkbox[0]);
} else {
elem.data('check', true);
checkbox.html(icon.checkbox[1]);
}
if(index === -1) {
changeList.push(item);
} else {
changeList.splice(index, 1);
}
that.change();
}
checkbox.on('click', check);
};
//伸展节点
Tree.prototype.spread = function(elem, item) {
var that = this,
options = that.options;
var arrow = elem.children('.layui-tree-spread')
var ul = elem.children('ul'),
a = elem.children('a');
//如果没有子节点,则不执行
if(!ul[0]) return;
arrow.on('click', function() {
that.open(elem, ul, arrow)
});
}
//打开节点
Tree.prototype.open = function(elem, ul, arrow) {
if(elem.data('spread')) {
elem.data('spread', null)
ul.removeClass('layui-show');
arrow.html(icon.arrow[0]);
} else {
elem.data('spread', true);
ul.addClass('layui-show');
arrow.html(icon.arrow[1]);
}
};
//通用事件
Tree.prototype.on = function(elem) {
var that = this,
options = that.options;
var dragStr = 'layui-tree-drag';
//屏蔽选中文字
elem.find('i').on('selectstart', function(e) {
return false
});
//拖拽
if(options.drag) {
$(document).on('mousemove', function(e) {
var move = that.move;
if(move.from) {
var to = move.to,
treeMove = $('<div class="layui-box ' + dragStr + '"></div>');
e.preventDefault();
$('.' + dragStr)[0] || $('body').append(treeMove);
var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove;
(dragElem).addClass('layui-show').html(move.from.elem.children('a').html());
dragElem.css({
left: e.pageX + 10,
top: e.pageY + 10
})
}
}).on('mouseup', function() {
var move = that.move;
if(move.from) {
move.from.elem.children('a').removeClass(enterSkin);
move.to && move.to.elem.children('a').removeClass(enterSkin);
that.move = {};
$('.' + dragStr).remove();
}
});
}
};
//拖拽节点
Tree.prototype.move = {};
Tree.prototype.drag = function(elem, item) {
var that = this,
options = that.options;
var a = elem.children('a'),
mouseenter = function() {
var othis = $(this),
move = that.move;
if(move.from) {
move.to = {
item: item,
elem: elem
};
othis.addClass(enterSkin);
}
};
a.on('mousedown', function() {
var move = that.move
move.from = {
item: item,
elem: elem
};
});
a.on('mouseenter', mouseenter).on('mousemove', mouseenter)
.on('mouseleave', function() {
var othis = $(this),
move = that.move;
if(move.from) {
delete move.to;
othis.removeClass(enterSkin);
}
});
};
//暴露接口
exports('tree', function(options) {
var tree = new Tree(options = options || {});
var elem = $(options.elem);
if(!elem[0]) {
return hint.error('layui.tree 没有找到' + options.elem + '元素');
}
tree.init(elem);
});
});

View File

@ -56,6 +56,7 @@
,layedit: 'modules/layedit' //富文本编辑器 ,layedit: 'modules/layedit' //富文本编辑器
,form: 'modules/form' //表单集 ,form: 'modules/form' //表单集
,upload: 'modules/upload' //上传 ,upload: 'modules/upload' //上传
,atree: 'modules/atree' //新树结构
,tree: 'modules/tree' //树结构 ,tree: 'modules/tree' //树结构
,table: 'modules/table' //表格 ,table: 'modules/table' //表格
,element: 'modules/element' //常用元素操作 ,element: 'modules/element' //常用元素操作