feat(treeTable): expandNode 新增 done 回调 (#2721)

* feat(treeTable): expandNode 新增 done 回调

* docs(treeTable): 更新文档

* update code

* Update docs/treeTable/index.md

docs/treeTable/index.md

@@ -274,7 +274,8 @@ treeTable.addNodes('test', {
 | index | 节点对应的行下标，一般可通过 `<tr>` 元素的 `data-index` 属性获得 | number | - |
 | expandFlag | 设置展开或关闭状态，若为 `true` 则表示展开；`false` 则为关闭；`null` 则表示切换 | boolean/null | - |
 | inherit | 子节点是否继承父节点的展开或关闭状态，`expandFlag` 属性必须为 `boolean` 型时才有效。 | boolean | `false` |
-| callbackFlag | 是否触发事件（`beforeExpand,onExpand`） | boolean | `false` |
+| callbackFlag | 是否触发 tree.callback 事件（`beforeExpand,onExpand`） | boolean | `false` |
+| done <sup>2.11.3+</sup>| 节点操作完成后的回调函数 | (tableId, trData, trExpand) => void | - |
 
 若操作的节点不是一个父节点，则返回 `null`，否则返回操作之后的折叠状态。
 

examples/treeTable-async.html

@@ -14,12 +14,17 @@
   <div class="layui-fluid" style="padding: 15px;">
     <button class="layui-btn" lay-on="asyncLoad">asyncLoad</button>
     <button class="layui-btn" lay-on="flatData">flatData</button>
+    <button class="layui-btn" lay-on="expandNode">expandNode</button>
+    <button class="layui-btn" lay-on="unexpandNode">unexpandNode</button>
     <table id="demo"></table>
   </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
   <script src="../src/layui.js" src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.7/layui.js"
     src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"></script>
   <script>
+    Mock.setup({
+      timeout: '100-300'
+    });
     layui.use(["treeTable", "util"], function () {
       var treeTable = layui.treeTable;
       var util = layui.util;
@@ -39,6 +44,11 @@
               async: {
                 enable: true,
                 autoParam: ["parentId=id"]
+              },
+              callback: {
+                onExpand: function (tableId, trData, trExpand) {
+                  console.log('onExpand', tableId, trData.id, trExpand);
+                }
               }
             },
           }, true)
@@ -57,6 +67,28 @@
               }
             },
           }, true)
+        },
+        expandNode: function(){
+          treeTable.expandNode('demo', {
+            index: 0,
+            expandFlag: true,
+            inherit: true,
+            callbackFlag: true,
+            done: function (tableId, trData, trExpand) {
+              console.log('done', tableId, trData.id, trExpand);
+            }
+          })
+        },
+        unexpandNode: function(){
+          treeTable.expandNode('demo', {
+            index: 0,
+            expandFlag: false,
+            inherit: true,
+            callbackFlag: true,
+            done: function (tableId, trData, trExpand) {
+              console.log('done', tableId, trData.id, trExpand);
+            }
+          })
         }
       })
 
@@ -130,7 +162,7 @@
       //var testDatas = getTreeData(rootNodes);
 
       Mock.mock(/getDatas/, "get", (config) => {
-        console.log(config);
+        //console.log(config);
         var params = layui.url(config.url);
         var search = params.search;
         var parentId = search.parentId;

src/modules/treeTable.js

@@ -590,7 +590,7 @@ layui.define(['table'], function (exports) {
   })()
 
   // 优化参数，添加一个 getNodeByIndex 方法 只传 表格id 和行 dataIndex 分几步优化 todo
-  var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag) {
+  var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag, done) {
     // treeNode // 需要展开的节点
     var trElem = treeNode.trElem;
     var tableViewElem = treeNode.tableViewElem || trElem.closest(ELEM_VIEW);
@@ -658,7 +658,7 @@ layui.define(['table'], function (exports) {
               tableViewElem: tableViewElem,
               tableId: tableId,
               options: options,
-            }, expandFlag, sonSign, focus, callbackFlag);
+            }, expandFlag, sonSign, focus, callbackFlag, done);
           } else if (item1[LAY_EXPAND]) { // 初始化级联展开
             expandNode({
               dataIndex: item1[LAY_DATA_INDEX],
@@ -666,7 +666,7 @@ layui.define(['table'], function (exports) {
               tableViewElem: tableViewElem,
               tableId: tableId,
               options: options,
-            }, true);
+            }, true, undefined, undefined, undefined, done);
           }
         });
       } else {
@@ -681,7 +681,7 @@ layui.define(['table'], function (exports) {
             trData[LAY_ASYNC_STATUS] = 'success';
             trData[customName.children] = data;
             treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX])
-            expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag);
+            expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag, done);
           }
 
           var format = asyncSetting.format; // 自定义数据返回方法
@@ -804,7 +804,7 @@ layui.define(['table'], function (exports) {
                 tableViewElem: tableViewElem,
                 tableId: tableId,
                 options: options,
-              }, expandFlag, sonSign, focus, callbackFlag);
+              }, expandFlag, sonSign, focus, callbackFlag, done);
             })
           }
         }
@@ -820,7 +820,7 @@ layui.define(['table'], function (exports) {
             tableViewElem: tableViewElem,
             tableId: tableId,
             options: options,
-          }, expandFlag, sonSign, focus, callbackFlag);
+          }, expandFlag, sonSign, focus, callbackFlag, done);
         });
         tableViewElem.find(childNodes.map(function (value, index, array) { // 只隐藏直接子节点，其他由递归的处理
           return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
@@ -843,6 +843,10 @@ layui.define(['table'], function (exports) {
       layui.type(onExpand) === 'function' && onExpand(tableId, trData, trExpand);
     }
 
+    if(layui.type(done) === 'function' && trData[LAY_ASYNC_STATUS] !== 'loading'){
+      done(tableId, trData, trExpand);
+    }
+
     return retValue;
   }
 
@@ -853,7 +857,8 @@ layui.define(['table'], function (exports) {
    * @param {Number|String} opts.index 展开行的数据下标
    * @param {Boolean} [opts.expandFlag] 展开、关闭、切换
    * @param {Boolean} [opts.inherit] 是否级联子节点
-   * @param {Boolean} [opts.callbackFlag] 是否触发事件
+   * @param {Boolean} [opts.callbackFlag] 是否触发 tree.callback 事件
+   * @param {Boolean} [opts.done] 节点操作完成后的回调函数
    * @return [{Boolean}] 状态结果
    * */
   treeTable.expandNode = function (id, opts) {
@@ -871,7 +876,7 @@ layui.define(['table'], function (exports) {
     var tableViewElem = options.elem.next();
     return expandNode({
       trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()
-    }, expandFlag, sonSign, null, callbackFlag)
+    }, expandFlag, sonSign, null, callbackFlag, opts.done)
   };
 
   /**