perf(treeTable): 优化行选中性能

src/modules/table.js

@@ -304,7 +304,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     text: {
       none: '无数据'
     },
-    cols: []
+    cols: [],
+    hightlightSelectedRow: true, // 是否高亮选中行
   };
 
   // 表格渲染
@@ -1414,7 +1415,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       // 添加 tr 属性
       var trAttr = function(){
         var arr = ['data-index="'+ i1 +'"'];
-        if(item1[table.config.checkName]) arr.push('class="'+ ELEM_CHECKED +'"');
+        if(options.hightlightSelectedRow && item1[table.config.checkName]) arr.push('class="'+ ELEM_CHECKED +'"');
         return arr.join(' ');
       }();
 
@@ -1746,6 +1747,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     var isCheckMult = layui.type(opts.index) === 'array'; // 是否操作多个
     var isCheckAllOrMult = isCheckAll || isCheckMult; // 是否全选或多选
 
+    // treeTable 内部已处理选中，此处不再处理
+    if(options.tree && options.tree.view) return;
+
     // 全选或多选时
     if (isCheckAllOrMult) {
       that.layBox.addClass(DISABLED_TRANSITION); // 减少回流
@@ -1800,15 +1804,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       }
 
       // 标记数据选中状态
-      var checked = item[options.checkName] = getChecked(el.hasClass(ELEM_CHECKED));
+      var checked = item[options.checkName] = getChecked(item[options.checkName]);
 
       // 标记当前行背景色
-      el.toggleClass(ELEM_CHECKED, !!checked);
+      if(options.hightlightSelectedRow){
+        el.toggleClass(ELEM_CHECKED, !!checked);
+      }
 
       // 若为 radio 类型，则取消其他行选中背景色
       if (opts.type === 'radio') {
         radioCheckedIndex = i;
-        el.siblings().removeClass(ELEM_CHECKED);
+        if(options.hightlightSelectedRow){
+          el.siblings().removeClass(ELEM_CHECKED);
+        }
       }
     });
 
@@ -1839,7 +1847,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     if(isCheckAllOrMult){
       setTimeout(function(){
         that.layBox.removeClass(DISABLED_TRANSITION);
-      },100)
+      }, 1000)
     }
   };
 

src/modules/treeTable.js

@@ -1720,6 +1720,7 @@ layui.define(['table'], function (exports) {
   Class.prototype.setRowCheckedClass = function(tr, checked){
     var that = this;
     var options = that.getOptions();
+    if(!options.hightlightSelectedRow) return;
 
     var index = tr.data('index');
     var tableViewElem = options.elem.next();
@@ -1761,10 +1762,10 @@ layui.define(['table'], function (exports) {
         that.setRowCheckedClass(checkboxElem.closest('tr'), checked);
         
         // 设置原始复选框 checked 属性值并渲染
-        form.render(checkboxElem.prop({
+        checkboxElem.prop({
           checked: checked,
           indeterminate: itemP[LAY_CHECKBOX_HALF]
-        }))
+        })
       })
     }
 
@@ -1793,10 +1794,10 @@ layui.define(['table'], function (exports) {
     }
     
     isIndeterminate = isIndeterminate && !isAll;
-    form.render(tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({
+    tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({
       'checked': isAll,
       indeterminate: isIndeterminate
-    }));
+    })
 
     return isAll
   }
@@ -1908,7 +1909,7 @@ layui.define(['table'], function (exports) {
 
             // 取消当前选中行背景色
             that.setRowCheckedClass(radioElem.closest('tr'), false);
-            form.render(radioElem.prop('checked', false));
+            radioElem.prop('checked', false);
           }
         }); // 取消其他的选中状态
         trData[checkName] = checked;
@@ -1916,8 +1917,11 @@ layui.define(['table'], function (exports) {
         that.setRowCheckedClass(trElem, checked);  // 标记当前选中行背景色
         that.setRowCheckedClass(trElem.siblings(), false); // 取消其他行背景色
 
-        form.render(trElem.find('input[type="radio"][lay-type="layTableRadio"]').prop('checked', checked));
+        trElem.find('input[type="radio"][lay-type="layTableRadio"]').prop('checked', checked);
       } else {
+        var DISABLED_TRANSITION = 'layui-table-disabled-transition';
+        var tableboxElem = tableView.find('.layui-table-box');// 减少回流
+        tableboxElem.addClass(DISABLED_TRANSITION);
         // 切换只能用到单条，全选到这一步的时候应该是一个确定的状态
         checked = layui.type(checked) === 'boolean' ? checked : !trData[checkName]; // 状态切换，如果遇到不可操作的节点待处理 todo
         // 全选或者是一个父节点，将子节点的状态同步为当前节点的状态
@@ -1935,7 +1939,7 @@ layui.define(['table'], function (exports) {
         }).join(','));
 
         that.setRowCheckedClass(checkboxElem.closest('tr'), checked);  // 标记当前选中行背景色
-        form.render(checkboxElem.prop({checked: checked, indeterminate: false}));
+        checkboxElem.prop({checked: checked, indeterminate: false});
 
         var trDataP;
 
@@ -1945,7 +1949,13 @@ layui.define(['table'], function (exports) {
           trDataP = that.getNodeDataByIndex(trData[LAY_PARENT_INDEX]);
         }
 
-        return that.updateCheckStatus(trDataP, checked);
+        var isAll = that.updateCheckStatus(trDataP, checked);
+
+        setTimeout(function(){
+          tableboxElem.removeClass(DISABLED_TRANSITION);
+        }, 1000)
+        
+        return isAll;
       }
     }
   }