github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(atree): 2.0.0-beta

pull/295/head
smallwei 2018-07-19 20:53:05 +08:00
parent a34c39a1dd
commit ea24b7635d
3 changed files with 389 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/atree.html
View File

@ -33,6 +33,8 @@
// drag: true, // drag: true,
spreadAll:true, spreadAll:true,
props:{ props:{
addBtnLabel:'新增',
deleteBtnLabel:'删除',
name: 'name', name: 'name',
id: 'id', id: 'id',
children:'children', children:'children',

103
src/lay/modules/atree.js
View File

@ -14,12 +14,14 @@ layui.define('jquery', function(exports) {
//勾选集合 //勾选集合
var changeList = []; var changeList = [];
//变量别名 //变量别名
var props ={ var props = {
name: 'name', name: 'name',
id: 'id', id: 'id',
children:'children', children: 'children',
checkbox:'checkbox', checkbox: 'checkbox',
spread:'spread' spread: 'spread',
deleteBtnLabelKey: 'delete',
addBtnLabelKey: 'add',
}; };
var enterSkin = 'layui-tree-enter', var enterSkin = 'layui-tree-enter',
@ -32,6 +34,8 @@ layui.define('jquery', function(exports) {
this.childrenKey = this.props.children || props.children; this.childrenKey = this.props.children || props.children;
this.checkboxKey = this.props.checkbox || props.checkbox; this.checkboxKey = this.props.checkbox || props.checkbox;
this.spreadKey = this.props.spread || props.spread; this.spreadKey = this.props.spread || props.spread;
this.addBtnLabelKey = this.props.addBtnLabel || props.addBtnLabel;
this.deleteBtnLabelKey = this.props.deleteBtnLabel || props.deleteBtnLabel;
}; };
//图标 //图标
var icon = { var icon = {
@ -65,7 +69,7 @@ layui.define('jquery', function(exports) {
var li = $(that.getNode(item)); var li = $(that.getNode(item));
//如果被选中加入checkbox集合里 //如果被选中加入checkbox集合里
if(item[that.checkboxKey]){ if(item[that.checkboxKey]) {
changeList.push(item); changeList.push(item);
} }
@ -82,7 +86,7 @@ layui.define('jquery', function(exports) {
}); });
}; };
//节点dom拼接 //节点dom拼接
Tree.prototype.getDom = function(item) { Tree.prototype.getDom = function(item) {
var that = this, var that = this,
options = that.options, options = that.options,
@ -96,12 +100,12 @@ layui.define('jquery', function(exports) {
}, },
checkbox: function() { checkbox: function() {
return options.check ? ( return options.check ? (
'<i class="layui-icon layui-tree-check'+(item[that.checkboxKey]?' is-checked':'')+'">' + ( '<i class="layui-icon layui-tree-check' + (item[that.checkboxKey] ? ' is-checked' : '') + '">' + (
item[that.checkboxKey]? icon.checkbox[1] : icon.checkbox[0] item[that.checkboxKey] ? icon.checkbox[1] : icon.checkbox[0]
) + '</i>' ) + '</i>'
) : ''; ) : '';
}, },
ul:function(){ ul: function() {
return '<ul class="' + (item[that.spreadKey] || options.spreadAll ? "layui-show" : "") + '"></ul>' return '<ul class="' + (item[that.spreadKey] || options.spreadAll ? "layui-show" : "") + '"></ul>'
}, },
node: function() { node: function() {
@ -112,8 +116,8 @@ layui.define('jquery', function(exports) {
}, },
menu: function() { 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">' + that.addBtnLabelKey + '</span>' +
'<span class="layui-tree-delete">Delete</span>' + '<span class="layui-tree-delete">' + that.deleteBtnLabelKey + '</span>' +
'</div>' '</div>'
} }
} }
@ -124,11 +128,11 @@ layui.define('jquery', function(exports) {
var that = this, var that = this,
options = that.options options = that.options
var dom = that.getDom(item); var dom = that.getDom(item);
var li = ['<li ' var li = ['<li ' +
+ (item[that.spreadKey] || options.spreadAll ? 'data-spread="' + (item[that.spreadKey] || true) + '"' : '') (item[that.spreadKey] || options.spreadAll ? 'data-spread="' + (item[that.spreadKey] || true) + '"' : '') +
+(item[that.checkboxKey] ? 'data-check="' + item[that.checkboxKey] + '"' : '') (item[that.checkboxKey] ? 'data-check="' + item[that.checkboxKey] + '"' : '') +
+('data-id=' + item[that.idKey]) ('data-id=' + item[that.idKey]) +
+ '><div class="layui-tree-node">' '><div class="layui-tree-node">'
//展开箭头 //展开箭头
, ,
dom.spread() dom.spread()
@ -142,8 +146,7 @@ layui.define('jquery', function(exports) {
dom.node() dom.node()
//菜单 //菜单
, ,
dom.menu() dom.menu(),
,
'</div></li>' '</div></li>'
].join(''); ].join('');
return li; return li;
@ -180,7 +183,7 @@ 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 node =elem.children('.layui-tree-node'); var node = elem.children('.layui-tree-node');
var addBtn = node.children('.layui-tree-menu').children('.layui-tree-add') var addBtn = node.children('.layui-tree-menu').children('.layui-tree-add')
var arrow = node.children('.layui-tree-spread') var arrow = node.children('.layui-tree-spread')
var ul = elem.children('ul'), var ul = elem.children('ul'),
@ -189,7 +192,7 @@ layui.define('jquery', function(exports) {
layui.stope(e); layui.stope(e);
var _addEvent = { var _addEvent = {
add: function(itemAddObj) { add: function(itemAddObj) {
if(!item[that.childrenKey]){ if(!item[that.childrenKey]) {
item[that.childrenKey] = []; item[that.childrenKey] = [];
} }
item[that.childrenKey].push(itemAddObj); item[that.childrenKey].push(itemAddObj);
@ -200,7 +203,7 @@ layui.define('jquery', function(exports) {
} }
if(!arrow[0]) { if(!arrow[0]) {
arrow = $(dom.spread()); arrow = $(dom.spread());
elem.prepend(arrow); node.prepend(arrow);
that.spread(elem, item); that.spread(elem, item);
} }
if(!elem.data('spread')) { if(!elem.data('spread')) {
@ -220,7 +223,7 @@ 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 node =elem.children('.layui-tree-node'); var node = elem.children('.layui-tree-node');
var deleteBtn = node.children('.layui-tree-menu').children('.layui-tree-delete') 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');
@ -228,9 +231,9 @@ layui.define('jquery', function(exports) {
layui.stope(e); layui.stope(e);
var _deleteEvent = { var _deleteEvent = {
done: function() { done: function() {
var parent =elem.parent(); var parent = elem.parent();
var arrow = parent.parent().children('.layui-tree-spread') var arrow = parent.parent().children('.layui-tree-spread')
if(parent.children('li').length===1){ if(parent.children('li').length === 1) {
arrow.remove(); arrow.remove();
} }
elem.remove(); elem.remove();
@ -245,7 +248,7 @@ 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;
var node =elem.children('.layui-tree-node'); var node = elem.children('.layui-tree-node');
node.children('a').on('click', function(e) { node.children('a').on('click', function(e) {
layui.stope(e); layui.stope(e);
options.click(item) options.click(item)
@ -256,26 +259,48 @@ 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 node =elem.children('.layui-tree-node'); var node = elem.children('.layui-tree-node');
var checkbox = node.children('.layui-tree-check') var checkbox = node.children('.layui-tree-check')
var ul = elem.children('ul'), var ul = elem.children('ul'),
a = node.children('a'); a = node.children('a');
var check = function() { var whileAllCheck = function(dom, item, type) {
var index = layui.findObj(changeList, item); var list = dom.children('.layui-show').find('li');
if(elem.data('check')) { var children = item ? item.children || [] : [];
elem.data('check', null) for(var i = 0; i < list.length; i++) {
checkbox.removeClass(' is-checked'); var li = $(list[i]);
checkbox.html(icon.checkbox[0]); setCheck(li, children[i], type);
} else { whileAllCheck(li, children[i], type);
elem.data('check', true);
checkbox.addClass(' is-checked');
checkbox.html(icon.checkbox[1]);
} }
if(index === -1) { }
changeList.push(item); var setCheck = function(elem, item, type) {
var checkbox = elem.children('.layui-tree-node').find('.layui-tree-check');
if(type) {
elem.data('check', true)
checkbox.html(icon.checkbox[1])
checkbox.addClass(' is-checked');
} else { } else {
elem.data('check', null);
checkbox.removeClass(' is-checked');
checkbox.html(icon.checkbox[0])
}
if(item) {
var index = layui.findObj(changeList, item[that.idKey], that.idKey);
if(index === -1 && type === true) {
changeList.push(item);
} else if(type === false) {
changeList.splice(index, 1); changeList.splice(index, 1);
} }
}
}
var check = function() {
var checkFlag;
if(elem.data('check')) {
checkFlag = false;
} else {
checkFlag = true;
}
setCheck(elem, item, checkFlag)
whileAllCheck(elem, item, checkFlag);
that.change(); that.change();
} }
checkbox.on('click', check); checkbox.on('click', check);
@ -286,7 +311,7 @@ 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 node =elem.children('.layui-tree-node'); var node = elem.children('.layui-tree-node');
var arrow = node.children('.layui-tree-spread') var arrow = node.children('.layui-tree-spread')
var ul = elem.children('ul'), var ul = elem.children('ul'),
a = node.children('a'); a = node.children('a');

4
src/layui.js
View File

@ -437,11 +437,11 @@
} }
//寻找对象是否存在数组中 //寻找对象是否存在数组中
Layui.prototype.findObj = function(list,obj) { Layui.prototype.findObj = function(list,value,key) {
var that = this, var that = this,
result = -1; result = -1;
that.each(list, function(index, item) { that.each(list, function(index, item) {
if(that.isEqualObj(obj,item))result = index; if(item[key] == value)result = index;
}) })
return result; return result;
} }