修复 tree 组件增删改样式问题

examples/tree.html

@@ -23,7 +23,7 @@
 <div id="test1"></div>
 <div id="test2"></div>
 
-<script src="../dist/layui.js"></script>
+<script src="../src/layui.js"></script>
 <script>
   layui.use(['tree', 'layer'], function(){
     var tree = layui.tree

src/css/layui.css

@@ -1243,7 +1243,7 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-tree-pack{display: none; padding-left: 20px; position: relative;}
 .layui-tree-line .layui-tree-pack{padding-left: 27px;}
 .layui-tree-line .layui-tree-set .layui-tree-set:after{content: ''; position: absolute; top: 14px; left: -9px; width: 17px; height: 0; border-top: 1px dotted #c0c4cc;}
-.layui-tree-entry{position: relative; padding: 3px 0; height: 20px;}
+.layui-tree-entry{position: relative; padding: 3px 0; height: 20px; white-space: nowrap;}
 .layui-tree-entry:hover{background-color: #eee;}
 .layui-tree-line .layui-tree-entry:hover{background-color: rgba(0,0,0,0);}
 .layui-tree-line .layui-tree-entry:hover .layui-tree-txt{color: #999; text-decoration: underline; transition: 0.3s;}
@@ -1261,14 +1261,11 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-tree-spread>.layui-tree-entry>.layui-tree-iconClick>.layui-tree-iconArrow:after{transform: rotate(90deg) translate(3px, 4px);}
 .layui-tree-txt{display: inline-block; vertical-align: middle; color: #555;}
 .layui-tree-search{margin-bottom: 15px; color: #666;}
-.layui-tree-btnGroup{display: none; position: absolute; top: 0; right: 0;}
-.layui-tree-btnGroup .layui-btn{padding: 0 7px; border: none; background-color: rgba(0,0,0,0);}
-.layui-tree-btnGroup .layui-btn:first-child{border: none;}
-.layui-tree-entry:hover .layui-tree-btnGroup{display: block;}
-.layui-tree-editInput{position: absolute; left: 30px; z-index: 99; height: 20px; line-height: 20px; border: none; background-color: rgba(0,0,0,0);}
-.layui-form .layui-tree-editInput{left: 58px;}
-.layui-tree-line .layui-tree-editInput{left: 38px;}
-.layui-tree-line.layui-form .layui-tree-editInput{left: 66px;} 
+.layui-tree-btnGroup{visibility: hidden; display: inline-block; vertical-align: middle; position: relative; margin-left: 10px;}
+.layui-tree-btnGroup .layui-icon{display: inline-block; vertical-align: middle; padding: 0 2px; cursor: pointer;}
+.layui-tree-btnGroup .layui-icon:hover{color: #999; transition: 0.3s;}
+.layui-tree-entry:hover .layui-tree-btnGroup{visibility: visible;}
+.layui-tree-editInput{position: relative; height: 20px; line-height: 20px; padding: 0 3px; border: none; background-color: rgba(0,0,0,0.05);}
 .layui-tree-emptyText{text-align: center; color: #999;}
 
 

src/lay/modules/tree.js

@@ -194,10 +194,10 @@ layui.define('form', function(exports){
       //增删改按钮
       ,function(){
         return options.renderContent ? ['<div class="layui-btn-group layui-tree-btnGroup">'
-          ,'<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="add"><i class="layui-icon layui-icon-add-1"></i></button>'
-          ,'<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="edit"><i class="layui-icon layui-icon-edit"></i></button>'
-          ,'<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="del"><i class="layui-icon layui-icon-delete"></i></button>'         
-        ,'</div>'].join(','): '';
+          ,'<i class="layui-icon layui-icon-add-1"  data-type="add"></i>'
+          ,'<i class="layui-icon layui-icon-edit" data-type="edit"></i>'
+          ,'<i class="layui-icon layui-icon-delete" data-type="del"></i>'         
+        ,'</div>'].join(''): '';
       }()
       ,'</div></div>'].join(''));
       
@@ -353,7 +353,7 @@ layui.define('form', function(exports){
     ,entry = elem.children('.'+ELEM_ENTRY)
     ,elemMain = entry.children('.'+ELEM_MAIN);
 
-    entry.children('.layui-tree-btnGroup').on('click', '.layui-btn', function(e){
+    entry.children('.layui-tree-btnGroup').on('click', '.layui-icon', function(e){
       layui.stope(e);  //阻止节点操作
       var type = $(this).data("type")
       ,packCont = elem.children('.'+ELEM_PACK)
@@ -384,7 +384,7 @@ layui.define('form', function(exports){
         obj.label = 'newElemTree';
         obj[options.key] = key;
         that.tree(elem.children('.'+ELEM_PACK), [obj]);
-
+        
         //放在新增后面，因为要对元素进行操作
         if(options.showLine){
           //节点本身无子节点
@@ -446,7 +446,7 @@ layui.define('form', function(exports){
         var text = elemMain.children('.layui-tree-txt').html();
         elemMain.children('.layui-tree-txt').html('');
         //添加输入框，覆盖在文字上方
-        elemMain.append('<input type="text" class="layui-tree-editInput">');
+        elemMain.append('<input type="text" class="layui-inline layui-tree-editInput">');
         //获取焦点
         elemMain.children('.layui-tree-editInput').val(text).focus();
         //嵌入文字移除输入框
@@ -456,6 +456,9 @@ layui.define('form', function(exports){
           input.remove();
           elemMain.children('.layui-tree-txt').html(textNew);
           
+          //同步数据
+          returnObj.data.label = textNew;
+          
           //节点修改的回调
           options.operate && options.operate(returnObj);
         };
@@ -473,8 +476,9 @@ layui.define('form', function(exports){
 
       //删除
       }else{
-        //节点删除的回调
-        options.operate && options.operate(returnObj);
+        options.operate && options.operate(returnObj); //节点删除的回调
+        returnObj.status = 'remove'; //标注节点删除
+        
         //若删除最后一个，显示空数据提示
         if(!elem.prev('.'+ELEM_SET)[0] && !elem.next('.'+ELEM_SET)[0] && !elem.parent('.'+ELEM_PACK)[0]){
           elem.remove();
@@ -581,6 +585,8 @@ layui.define('form', function(exports){
         };
 
         elem.remove();
+        
+        
       };
     });
   };