fix(atree): 优化atree模块

examples/atree.html

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

src/css/layui.css

@@ -902,19 +902,23 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 .layui-tree{line-height: 26px;}
 .layui-tree li{position:relative;text-overflow: ellipsis; overflow:hidden; white-space: nowrap;}
 .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 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-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-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 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 *{font-size: 14px;}

src/lay/modules/atree.js

@@ -17,16 +17,21 @@ layui.define('jquery', function(exports) {
 	var props ={
 		  name: 'name',
            id: 'id',
-           children:'children'
+           children:'children',
+           checkbox:'checkbox',
+           spread:'spread'
 	};
 	
 	var enterSkin = 'layui-tree-enter',
 		Tree = function(options) {
 			this.options = options;
+			this.nodes = options.nodes || [];
 			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;
+			this.checkboxKey = this.props.checkbox || props.checkbox;
+			this.spreadKey = this.props.spread || props.spread;
 		};
 	//图标
 	var icon = {
@@ -53,11 +58,17 @@ layui.define('jquery', function(exports) {
 		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 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) {
 				li.append(ul);
@@ -72,31 +83,34 @@ layui.define('jquery', function(exports) {
 	};
 
 //节点dom拼接
-	Tree.prototype.getDom = function() {
+	Tree.prototype.getDom = function(item) {
 		var that = this,
-			options = that.options
+			options = that.options,
+			item = item,
+			hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
 		return {
-			spread: function(item, hasChild) {
+			spread: function() {
 				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>' : '';
 			},
-			checkbox: function(item) {
+			checkbox: function() {
 				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>'
 				) : '';
 			},
-			node: function(item) {
+			ul:function(){
+				return '<ul class="' + (item[that.spreadKey] || options.spreadAll ? "layui-show" : "") + '"></ul>'
+			},
+			node: function() {
 				return '<a href="' + (item.href || 'javascript:;') + '" ' + (
 						options.target && item.href ? 'target=\"' + options.target + '\"' : ''
 					) + '>' +
 					('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>')
 			},
-			menu: function(item) {
+			menu: function() {
 				return '<div class="layui-tree-menu">' +
 					'<span class="layui-tree-add">Add</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,
 			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()
 			,
-			'</li>'
+			'</div></li>'
-		].join(''));
+		].join('');
 		return li;
 	}
 
@@ -162,27 +180,33 @@ layui.define('jquery', function(exports) {
 		Tree.prototype.add = function(elem, item) {
 			var that = this,
 				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'),
-				a = elem.children('a');
+				a = node.children('a');
 			var addEvent = function(e) {
 				layui.stope(e);
 				var _addEvent = {
 					add: function(itemAddObj) {
+						if(!item[that.childrenKey]){
+							item[that.childrenKey] = [];
+						}
+						item[that.childrenKey].push(itemAddObj);
+						var dom = that.getDom(item);
 						if(!ul[0]) {
-							ul = $('<ul class="layui-show"></ul>');
+							ul = $(dom.ul())
 							elem.append(ul);
 						}
 						if(!arrow[0]) {
-							arrow = $('<i class="layui-icon layui-tree-spread">' + icon.arrow[1] + '</i>');
+							arrow = $(dom.spread());
 							elem.prepend(arrow);
 							that.spread(elem, item);
 						}
 						if(!elem.data('spread')) {
 							that.open(elem, ul, arrow)
 						}
-						var li = that.getNode(itemAddObj, false);
+						var li = $(that.getNode(itemAddObj));
 						that.bindUlEvent(li, itemAddObj);
 						ul.append(li);
 					}
@@ -196,14 +220,20 @@ layui.define('jquery', function(exports) {
 	Tree.prototype.delete = function(elem, item) {
 		var that = this,
 			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'),
 			a = elem.children('a');
 		var deleteEvent = function(e) {
 			layui.stope(e);
 			var _deleteEvent = {
 				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)
@@ -215,7 +245,8 @@ layui.define('jquery', function(exports) {
 	Tree.prototype.click = function(elem, item) {
 		var that = this,
 			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);
 			options.click(item)
 		});
@@ -225,16 +256,19 @@ layui.define('jquery', function(exports) {
 	Tree.prototype.checkbox = function(elem, item) {
 		var that = this,
 			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'),
-			a = elem.children('a');
+			a = node.children('a');
 		var check = function() {
 			var index = layui.findObj(changeList, item);
 			if(elem.data('check')) {
 				elem.data('check', null)
+				checkbox.removeClass(' is-checked');
 				checkbox.html(icon.checkbox[0]);
 			} else {
 				elem.data('check', true);
+				checkbox.addClass(' is-checked');
 				checkbox.html(icon.checkbox[1]);
 			}
 			if(index === -1) {
@@ -252,9 +286,10 @@ layui.define('jquery', function(exports) {
 	Tree.prototype.spread = function(elem, item) {
 		var that = this,
 			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'),
-			a = elem.children('a');
+			a = node.children('a');
 		//如果没有子节点，则不执行
 		if(!ul[0]) return;
 		arrow.on('click', function() {