fix(atree): 优化atree模块

This commit is contained in:
smallwei 2018-07-17 00:24:18 +08:00
parent 1b541568a0
commit a34c39a1dd
3 changed files with 89 additions and 45 deletions

View File

@ -30,11 +30,14 @@
skin: 'as' //设定皮肤 skin: 'as' //设定皮肤
//,target: '_blank' //是否新选项卡打开比如节点返回href才有效 //,target: '_blank' //是否新选项卡打开比如节点返回href才有效
, ,
drag: true, // drag: true,
spreadAll:true,
props:{ props:{
name: 'name', name: 'name',
id: 'id', id: 'id',
children:'children' children:'children',
checkbox:'checkbox',
spread:'spread'
}, },
change:function(val){ change:function(val){
console.group('change event') console.group('change event')
@ -101,8 +104,10 @@
children: [{ children: [{
name: '收件箱', name: '收件箱',
id: 211, id: 211,
spread: true,
children: [{ children: [{
name: '所有未读', name: '所有未读',
checkbox:true,
id: 2111 id: 2111
}, { }, {
name: '置顶邮件', name: '置顶邮件',

View File

@ -902,19 +902,23 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-tree{line-height: 26px;} .layui-tree{line-height: 26px;}
.layui-tree li{position:relative;text-overflow: ellipsis; overflow:hidden; white-space: nowrap;} .layui-tree li{position:relative;text-overflow: ellipsis; overflow:hidden; white-space: nowrap;}
.layui-tree li a, .layui-tree li a,
.layui-tree li .layui-tree-spread{display: inline-block; vertical-align: top; height: 26px; *display: inline; *zoom:1; cursor: pointer;} .layui-tree li .layui-tree-spread{display: inline-block; vertical-align: top;font-size: 12px; height: 26px; *display: inline; *zoom:1; cursor: pointer;color: #c0c4cc}
.layui-tree li a{font-size: 0;} .layui-tree li a{font-size: 0;}
.layui-tree li a i{font-size: 16px;} .layui-tree li a i{font-size: 16px;}
.layui-tree li a cite{padding: 0 6px; font-size: 14px; font-style: normal;} .layui-tree li a cite{padding: 0 6px; font-size: 14px; font-style: normal;color: #606266;}
.layui-tree li i{padding-left: 6px; color: #333; -moz-user-select: none;} .layui-tree li i{padding-left: 6px; -moz-user-select: none;}
.layui-tree li .layui-tree-check{font-size: 13px;} .layui-tree li .layui-tree-check{font-size: 16px;color: #dcdfe6}
.layui-tree li .layui-tree-check:hover{color: #009E94;} .layui-tree li .layui-tree-check:hover{color: #409eff;}
.layui-tree li ul{display: none; margin-left: 40px;} .layui-tree li .layui-tree-check.is-checked{color: #409eff;}
.layui-tree li ul{ display:none;margin-left: 40px;}
.layui-tree li .layui-tree-enter{line-height: 24px; border: 1px dotted #000;} .layui-tree li .layui-tree-enter{line-height: 24px; border: 1px dotted #000;}
.layui-tree-drag{display: none; position: absolute; left: -666px; top: -666px; background-color: #f2f2f2; padding: 5px 10px; border: 1px dotted #000; white-space: nowrap} .layui-tree-drag{display: none; position: absolute; left: -666px; top: -666px; background-color: #f2f2f2; padding: 5px 10px; border: 1px dotted #000; white-space: nowrap}
.layui-tree-drag i{padding-right: 5px;} .layui-tree-drag i{padding-right: 5px;}
.layui-tree-node{position: relative;}
.layui-tree-node:hover { background-color:#eee;}
.layui-tree-menu{position: absolute;top:0;right: 0;z-index:1024;} .layui-tree-menu{position: absolute;top:0;right: 0;z-index:1024;}
.layui-tree-menu span{margin-left: 10px;} .layui-tree-menu span{margin-left: 10px;}
/** 导航菜单 **/ /** 导航菜单 **/
.layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;} .layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}
.layui-nav *{font-size: 14px;} .layui-nav *{font-size: 14px;}

View File

@ -17,16 +17,21 @@ layui.define('jquery', function(exports) {
var props ={ var props ={
name: 'name', name: 'name',
id: 'id', id: 'id',
children:'children' children:'children',
checkbox:'checkbox',
spread:'spread'
}; };
var enterSkin = 'layui-tree-enter', var enterSkin = 'layui-tree-enter',
Tree = function(options) { Tree = function(options) {
this.options = options; this.options = options;
this.nodes = options.nodes || [];
this.props = this.options.props || props; this.props = this.options.props || props;
this.nameKey = this.props.name || props.name; this.nameKey = this.props.name || props.name;
this.idKey = this.props.id || props.id; this.idKey = this.props.id || props.id;
this.childrenKey = this.props.children || props.children; this.childrenKey = this.props.children || props.children;
this.checkboxKey = this.props.checkbox || props.checkbox;
this.spreadKey = this.props.spread || props.spread;
}; };
//图标 //图标
var icon = { var icon = {
@ -53,11 +58,17 @@ layui.define('jquery', function(exports) {
var that = this, var that = this,
options = that.options options = that.options
var nodes = children || options.nodes; var nodes = children || options.nodes;
layui.each(nodes, function(index, item) { layui.each(nodes, function(index, item) {
var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0; var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
var ul = $('<ul class="' + (item.spread ? "layui-show" : "") + '"></ul>'); var dom = that.getDom(item);
var li = that.getNode(item, hasChild); var ul = $(dom.ul(item));
var li = $(that.getNode(item));
//如果被选中加入checkbox集合里
if(item[that.checkboxKey]){
changeList.push(item);
}
//如果有子节点,则递归继续生成树 //如果有子节点,则递归继续生成树
if(hasChild) { if(hasChild) {
li.append(ul); li.append(ul);
@ -72,31 +83,34 @@ layui.define('jquery', function(exports) {
}; };
//节点dom拼接 //节点dom拼接
Tree.prototype.getDom = function() { Tree.prototype.getDom = function(item) {
var that = this, var that = this,
options = that.options options = that.options,
item = item,
hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
return { return {
spread: function(item, hasChild) { spread: function() {
return hasChild ? '<i class="layui-icon layui-tree-spread">' + ( return hasChild ? '<i class="layui-icon layui-tree-spread">' + (
item.spread ? icon.arrow[1] : icon.arrow[0] item[that.spreadKey] || options.spreadAll ? icon.arrow[1] : icon.arrow[0]
) + '</i>' : ''; ) + '</i>' : '';
}, },
checkbox: function(item) { checkbox: function() {
return options.check ? ( return options.check ? (
'<i class="layui-icon layui-tree-check">' + ( '<i class="layui-icon layui-tree-check'+(item[that.checkboxKey]?' is-checked':'')+'">' + (
options.check === 'checkbox' ? icon.checkbox[0] : ( item[that.checkboxKey]? icon.checkbox[1] : icon.checkbox[0]
options.check === 'radio' ? icon.radio[0] : ''
)
) + '</i>' ) + '</i>'
) : ''; ) : '';
}, },
node: function(item) { ul:function(){
return '<ul class="' + (item[that.spreadKey] || options.spreadAll ? "layui-show" : "") + '"></ul>'
},
node: function() {
return '<a href="' + (item.href || 'javascript:;') + '" ' + ( return '<a href="' + (item.href || 'javascript:;') + '" ' + (
options.target && item.href ? 'target=\"' + options.target + '\"' : '' options.target && item.href ? 'target=\"' + options.target + '\"' : ''
) + '>' + ) + '>' +
('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>') ('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>')
}, },
menu: function(item) { menu: function() {
return '<div class="layui-tree-menu">' + return '<div class="layui-tree-menu">' +
'<span class="layui-tree-add">Add</span>' + '<span class="layui-tree-add">Add</span>' +
'<span class="layui-tree-delete">Delete</span>' + '<span class="layui-tree-delete">Delete</span>' +
@ -106,28 +120,32 @@ layui.define('jquery', function(exports) {
} }
//获取树节点 //获取树节点
Tree.prototype.getNode = function(item, hasChild) { Tree.prototype.getNode = function(item) {
var that = this, var that = this,
options = that.options options = that.options
var dom = that.getDom(); var dom = that.getDom(item);
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') +('data-id=' + item[that.idKey])+ '>' var li = ['<li '
+ (item[that.spreadKey] || options.spreadAll ? 'data-spread="' + (item[that.spreadKey] || true) + '"' : '')
+(item[that.checkboxKey] ? 'data-check="' + item[that.checkboxKey] + '"' : '')
+('data-id=' + item[that.idKey])
+ '><div class="layui-tree-node">'
//展开箭头 //展开箭头
, ,
dom.spread(item, hasChild) dom.spread()
//复选框/单选框 //复选框
, ,
dom.checkbox(item) dom.checkbox()
//节点 //节点
, ,
dom.node(item) dom.node()
//菜单 //菜单
, ,
dom.menu() dom.menu()
, ,
'</li>' '</div></li>'
].join('')); ].join('');
return li; return li;
} }
@ -162,27 +180,33 @@ layui.define('jquery', function(exports) {
Tree.prototype.add = function(elem, item) { Tree.prototype.add = function(elem, item) {
var that = this, var that = this,
options = that.options; options = that.options;
var addBtn = elem.children('.layui-tree-menu').children('.layui-tree-add') var node =elem.children('.layui-tree-node');
var arrow = elem.children('.layui-tree-spread') var addBtn = node.children('.layui-tree-menu').children('.layui-tree-add')
var arrow = node.children('.layui-tree-spread')
var ul = elem.children('ul'), var ul = elem.children('ul'),
a = elem.children('a'); a = node.children('a');
var addEvent = function(e) { var addEvent = function(e) {
layui.stope(e); layui.stope(e);
var _addEvent = { var _addEvent = {
add: function(itemAddObj) { add: function(itemAddObj) {
if(!item[that.childrenKey]){
item[that.childrenKey] = [];
}
item[that.childrenKey].push(itemAddObj);
var dom = that.getDom(item);
if(!ul[0]) { if(!ul[0]) {
ul = $('<ul class="layui-show"></ul>'); ul = $(dom.ul())
elem.append(ul); elem.append(ul);
} }
if(!arrow[0]) { if(!arrow[0]) {
arrow = $('<i class="layui-icon layui-tree-spread">' + icon.arrow[1] + '</i>'); arrow = $(dom.spread());
elem.prepend(arrow); elem.prepend(arrow);
that.spread(elem, item); that.spread(elem, item);
} }
if(!elem.data('spread')) { if(!elem.data('spread')) {
that.open(elem, ul, arrow) that.open(elem, ul, arrow)
} }
var li = that.getNode(itemAddObj, false); var li = $(that.getNode(itemAddObj));
that.bindUlEvent(li, itemAddObj); that.bindUlEvent(li, itemAddObj);
ul.append(li); ul.append(li);
} }
@ -196,14 +220,20 @@ layui.define('jquery', function(exports) {
Tree.prototype.delete = function(elem, item) { Tree.prototype.delete = function(elem, item) {
var that = this, var that = this,
options = that.options; options = that.options;
var deleteBtn = elem.children('.layui-tree-menu').children('.layui-tree-delete') var node =elem.children('.layui-tree-node');
var deleteBtn = node.children('.layui-tree-menu').children('.layui-tree-delete')
var ul = elem.children('ul'), var ul = elem.children('ul'),
a = elem.children('a'); a = elem.children('a');
var deleteEvent = function(e) { var deleteEvent = function(e) {
layui.stope(e); layui.stope(e);
var _deleteEvent = { var _deleteEvent = {
done: function() { done: function() {
elem.html(''); var parent =elem.parent();
var arrow = parent.parent().children('.layui-tree-spread')
if(parent.children('li').length===1){
arrow.remove();
}
elem.remove();
} }
} }
options.deleteClick(item, elem, _deleteEvent.done) options.deleteClick(item, elem, _deleteEvent.done)
@ -215,7 +245,8 @@ layui.define('jquery', function(exports) {
Tree.prototype.click = function(elem, item) { Tree.prototype.click = function(elem, item) {
var that = this, var that = this,
options = that.options; options = that.options;
elem.children('a').on('click', function(e) { var node =elem.children('.layui-tree-node');
node.children('a').on('click', function(e) {
layui.stope(e); layui.stope(e);
options.click(item) options.click(item)
}); });
@ -225,16 +256,19 @@ layui.define('jquery', function(exports) {
Tree.prototype.checkbox = function(elem, item) { Tree.prototype.checkbox = function(elem, item) {
var that = this, var that = this,
options = that.options; options = that.options;
var checkbox = elem.children('.layui-tree-check') var node =elem.children('.layui-tree-node');
var checkbox = node.children('.layui-tree-check')
var ul = elem.children('ul'), var ul = elem.children('ul'),
a = elem.children('a'); a = node.children('a');
var check = function() { var check = function() {
var index = layui.findObj(changeList, item); var index = layui.findObj(changeList, item);
if(elem.data('check')) { if(elem.data('check')) {
elem.data('check', null) elem.data('check', null)
checkbox.removeClass(' is-checked');
checkbox.html(icon.checkbox[0]); checkbox.html(icon.checkbox[0]);
} else { } else {
elem.data('check', true); elem.data('check', true);
checkbox.addClass(' is-checked');
checkbox.html(icon.checkbox[1]); checkbox.html(icon.checkbox[1]);
} }
if(index === -1) { if(index === -1) {
@ -252,9 +286,10 @@ layui.define('jquery', function(exports) {
Tree.prototype.spread = function(elem, item) { Tree.prototype.spread = function(elem, item) {
var that = this, var that = this,
options = that.options; options = that.options;
var arrow = elem.children('.layui-tree-spread') var node =elem.children('.layui-tree-node');
var arrow = node.children('.layui-tree-spread')
var ul = elem.children('ul'), var ul = elem.children('ul'),
a = elem.children('a'); a = node.children('a');
//如果没有子节点,则不执行 //如果没有子节点,则不执行
if(!ul[0]) return; if(!ul[0]) return;
arrow.on('click', function() { arrow.on('click', function() {