Skip to content

Commit 8228902

Browse files
smallweissmallweis
committed
refactor(atree): refactor atree params
1 parent 5668ca9 commit 8228902

File tree

2 files changed

+75
-52
lines changed

2 files changed

+75
-52
lines changed

‎src/css/layui.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -930,8 +930,9 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
930930
.layui-atree-drag i{padding-right: 5px;}
931931
.layui-atree-node{position: relative;}
932932
.layui-atree-node:hover { background-color:#eee;}
933-
.layui-atree-menu{position: absolute;top:0;right: 0;z-index:1024;}
934-
.layui-atree-menu span{margin-left: 10px;}
933+
.layui-atree-node:hover .layui-atree-menu{display: block;}
934+
.layui-atree-menu{position: absolute;top:0;right: 10px;z-index:1024;display: none;}
935+
.layui-atree-menu span{margin-left: 10px;cursor: pointer;}
935936

936937
/** 导航菜单 **/
937938
.layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}

‎src/lay/modules/atree.js

Lines changed: 72 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,27 @@ layui.define('jquery', function(exports) {
2626

2727
var enterSkin = 'layui-atree-enter',
2828
Atree = function(options) {
29-
this.options = options;
30-
this.nodes = options.nodes || [];
31-
this.props = this.options.props || props;
29+
30+
//缓冲重要变量
31+
this.$vm = this;
32+
this.$options = options || {};
33+
this.$el = this.utils.isElementNode(this.$options.elem) ? this.$options.elem : $(this.$options.elem);
34+
35+
//模块的属性
36+
this.nodes = this.$options.nodes || [];
37+
this.props = this.$options.props || props;
38+
39+
//模块的别名
3240
this.nameKey = this.props.name || props.name;
3341
this.idKey = this.props.id || props.id;
3442
this.childrenKey = this.props.children || props.children;
3543
this.checkboxKey = this.props.checkbox || props.checkbox;
3644
this.spreadKey = this.props.spread || props.spread;
3745
this.addBtnLabelKey = this.props.addBtnLabel || props.addBtnLabel;
3846
this.deleteBtnLabelKey = this.props.deleteBtnLabel || props.deleteBtnLabel;
47+
3948
};
49+
4050
//图标
4151
var icon = {
4252
arrow: ['', ''] //箭头
@@ -46,26 +56,36 @@ layui.define('jquery', function(exports) {
4656
leaf: '' //叶节点
4757
};
4858

59+
//工具包
60+
Atree.prototype.utils = (function() {
61+
return {
62+
isElementNode: function(node) {
63+
return node.nodeType === 1;
64+
}
65+
}
66+
})()
67+
4968
//初始化
50-
Atree.prototype.init = function(elem) {
51-
var that = this;
52-
elem.addClass('layui-box layui-atree'); //添加tree样式
53-
if(that.options.skin) {
54-
elem.addClass('layui-atree-skin-' + that.options.skin);
69+
Atree.prototype.init = function() {
70+
var that = this.$vm,
71+
options = this.$options
72+
that.$el.addClass('layui-box layui-atree'); //添加tree样式
73+
if(options.skin) {
74+
that.$el.addClass('layui-atree-skin-' + options.skin);
5575
}
56-
that.tree(elem);
57-
that.on(elem);
76+
that.tree(that.$el, that.nodes);
77+
that.on(that.$el);
5878
};
5979

6080
//树节点解析
6181
Atree.prototype.tree = function(elem, children, parent) {
62-
var that = this,
63-
options = that.options
64-
var nodes = children || options.nodes;
82+
var that = this.$vm,
83+
options = this.$options
84+
var nodes = children;
6585
layui.each(nodes, function(index, item) {
6686
var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
6787
var dom = that.getDom(item);
68-
if(parent) item.parent = parent;
88+
if(parent) item.$parent = parent;
6989
var ul = $(dom.ul(item));
7090
var li = $(that.getNode(item));
7191

@@ -89,8 +109,8 @@ layui.define('jquery', function(exports) {
89109

90110
//节点dom拼接
91111
Atree.prototype.getDom = function(item) {
92-
var that = this,
93-
options = that.options,
112+
var that = this.$vm,
113+
options = this.$options,
94114
item = item,
95115
hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
96116
return {
@@ -126,8 +146,8 @@ layui.define('jquery', function(exports) {
126146
}
127147
//获取树节点
128148
Atree.prototype.getNode = function(item) {
129-
var that = this,
130-
options = that.options
149+
var that = this.$vm,
150+
options = this.$options
131151
var dom = that.getDom(item);
132152
var li = ['<li ' +
133153
(item[that.spreadKey] || options.spreadAll ? 'data-spread="' + (item[that.spreadKey] || true) + '"' : '') +
@@ -155,8 +175,8 @@ layui.define('jquery', function(exports) {
155175

156176
//父绑定事件
157177
Atree.prototype.bindUlEvent = function(li, item) {
158-
var that = this,
159-
options = that.options
178+
var that = this.$vm,
179+
options = this.$options
160180
//触发点击节点回调
161181
typeof options.click === 'function' && that.click(li, item);
162182

@@ -175,15 +195,15 @@ layui.define('jquery', function(exports) {
175195

176196
//选中回调函数
177197
Atree.prototype.change = function() {
178-
var that = this,
179-
options = that.options;
198+
var that = this.$vm,
199+
options = this.$options;
180200
options.change(changeList);
181201
},
182202

183203
//新增方法回调
184204
Atree.prototype.add = function(elem, item) {
185-
var that = this,
186-
options = that.options;
205+
var that = this.$vm,
206+
options = this.$options;
187207
var node = elem.children('.layui-atree-node');
188208
var addBtn = node.children('.layui-atree-menu').children('.layui-atree-add')
189209
var arrow = node.children('.layui-atree-spread')
@@ -222,8 +242,8 @@ layui.define('jquery', function(exports) {
222242

223243
//删除方法回调
224244
Atree.prototype.delete = function(elem, item) {
225-
var that = this,
226-
options = that.options;
245+
var that = this.$vm,
246+
options = this.$options;
227247
var node = elem.children('.layui-atree-node');
228248
var deleteBtn = node.children('.layui-atree-menu').children('.layui-atree-delete')
229249
var ul = elem.children('ul'),
@@ -247,8 +267,8 @@ layui.define('jquery', function(exports) {
247267

248268
//点击节点回调
249269
Atree.prototype.click = function(elem, item) {
250-
var that = this,
251-
options = that.options;
270+
var that = this.$vm,
271+
options = this.$options;
252272
var node = elem.children('.layui-atree-node');
253273
node.children('a').on('click', function(e) {
254274
layui.stope(e);
@@ -258,34 +278,36 @@ layui.define('jquery', function(exports) {
258278

259279
//节点选择
260280
Atree.prototype.checkbox = function(elem, item) {
261-
var that = this,
262-
options = that.options;
281+
var that = this.$vm,
282+
options = this.$options;
263283
var node = elem.children('.layui-atree-node');
264284
var checkbox = node.children('.layui-atree-check')
265285
var ul = elem.children('ul'),
266286
a = node.children('a');
287+
267288
//递归设置子节点
268-
var whileAllCheck = function(dom, item, type) {
289+
var setAllChildCheck = function(dom, item, type) {
269290
var list = dom.children('.layui-show').find('li');
270291
var children = item ? item.children || [] : [];
271292
for(var i = 0; i < list.length; i++) {
272293
var li = $(list[i]);
273294
setCheck(li, children[i], type);
274-
whileAllCheck(li, children[i], type);
295+
setAllChildCheck(li, children[i], type);
275296
}
276297
}
298+
277299
//递归设置父节点
278-
var whileAllPatentCheck = function(dom, item, type) {
300+
var setAllPatentCheck = function(dom, item, type) {
279301
var parent = dom.parent().parent();
280302
var list = parent.children('.layui-show').find('li');
281303
var isChildrenCheck = true;
282304
for(var i = 0; i < list.length; i++) {
283305
var li = $(list[i]);
284306
if(!li.data('check')) isChildrenCheck = false;
285307
}
286-
if(item.parent &&(isChildrenCheck || !type)) {
287-
setCheck(parent, item.parent, type);
288-
whileAllPatentCheck(parent, item.parent, type);
308+
if(item.$parent && (isChildrenCheck || !type)) {
309+
setCheck(parent, item.$parent, type);
310+
setAllPatentCheck(parent, item.$parent, type);
289311
}
290312
}
291313

@@ -294,12 +316,12 @@ layui.define('jquery', function(exports) {
294316
var checkbox = elem.children('.layui-atree-node').find('.layui-atree-check');
295317
if(type) {
296318
elem.data('check', true)
297-
elem.attr("data-check",true);
319+
elem.attr("data-check", true);
298320
checkbox.html(icon.checkbox[1])
299321
checkbox.addClass(' is-checked');
300322
} else {
301323
elem.data('check', null);
302-
elem.attr("data-check",null);
324+
elem.attr("data-check", null);
303325
checkbox.removeClass(' is-checked');
304326
checkbox.html(icon.checkbox[0])
305327
}
@@ -319,11 +341,11 @@ layui.define('jquery', function(exports) {
319341
} else {
320342
checkFlag = true;
321343
}
322-
344+
323345
setCheck(elem, item, checkFlag)
324-
whileAllCheck(elem, item, checkFlag);
325-
whileAllPatentCheck(elem, item, checkFlag);
326-
346+
setAllChildCheck(elem, item, checkFlag);
347+
setAllPatentCheck(elem, item, checkFlag);
348+
327349
that.change();
328350
}
329351
checkbox.on('click', check);
@@ -332,8 +354,8 @@ layui.define('jquery', function(exports) {
332354

333355
//伸展节点
334356
Atree.prototype.spread = function(elem, item) {
335-
var that = this,
336-
options = that.options;
357+
var that = this.$vm,
358+
options = this.$options;
337359
var node = elem.children('.layui-atree-node');
338360
var arrow = node.children('.layui-atree-spread')
339361
var ul = elem.children('ul'),
@@ -349,20 +371,20 @@ layui.define('jquery', function(exports) {
349371
Atree.prototype.open = function(elem, ul, arrow) {
350372
if(elem.data('spread')) {
351373
elem.data('spread', null)
352-
elem.attr("data-spread",null);
374+
elem.attr("data-spread", null);
353375
ul.removeClass('layui-show');
354376
arrow.html(icon.arrow[0]);
355377
} else {
356378
elem.data('spread', true);
357-
elem.attr("data-spread",true);
379+
elem.attr("data-spread", true);
358380
ul.addClass('layui-show');
359381
arrow.html(icon.arrow[1]);
360382
}
361383
};
362384
//通用事件
363385
Atree.prototype.on = function(elem) {
364-
var that = this,
365-
options = that.options;
386+
var that = this.$vm,
387+
options = this.$options;
366388
var dragStr = 'layui-atree-drag';
367389

368390
//屏蔽选中文字
@@ -401,8 +423,8 @@ layui.define('jquery', function(exports) {
401423
//拖拽节点
402424
Atree.prototype.move = {};
403425
Atree.prototype.drag = function(elem, item) {
404-
var that = this,
405-
options = that.options;
426+
var that = this.$vm,
427+
options = this.$options;
406428
var a = elem.children('a'),
407429
mouseenter = function() {
408430
var othis = $(this),

0 commit comments

Comments
 (0)