优化 `table.setRowChecked()` 方法，新增当前行选中背景色，便于与 hover 等活动背景色区分

src/css/layui.css

@@ -963,7 +963,9 @@ a cite{font-style: normal; *cursor:pointer;}
 .layui-table-hover,
 .layui-table-click,
 .layui-table[lay-even] tbody tr:nth-child(even){background-color: #f8f8f8;}
-
+.layui-table-checked{background-color: #dbfbf0;}
+.layui-table-checked.layui-table-hover,
+.layui-table-checked.layui-table-click{background-color: #abf8dd;}
 
 
 .layui-table th,

src/modules/table.js

@@ -129,6 +129,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
   var ELEM_PAGE = '.layui-table-page';
   var ELEM_PAGE_VIEW = '.layui-table-pageview';
   var ELEM_SORT = '.layui-table-sort';
+  var ELEM_CHECKED = 'layui-table-checked';
   var ELEM_EDIT = 'layui-table-edit';
   var ELEM_HOVER = 'layui-table-hover';
   var ELEM_GROUP = 'laytable-cell-group';
@@ -1155,9 +1156,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
                 }() +' lay-type="layTableCheckbox">';
                 break;
               case 'radio': // 单选
-                if(tplData[checkName]){
-                  that.thisCheckedRowIndex = i1;
-                }
                 return '<input type="radio" name="layTableRadio_'+ options.index +'" '
                   + function(){
                     var arr = [];
@@ -1188,9 +1186,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
         if(item3.fixed === 'right') tds_fixed_r.push(td);
       });
 
-      trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
+      // 添加 tr 属性
-      trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
+      var trAttr = function(){
-      trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
+        var arr = ['data-index="'+ i1 +'"'];
+        if(item1[table.config.checkName]) arr.push('class="'+ ELEM_CHECKED +'"');
+        return arr.join(' ');
+      }();
+
+      trs.push('<tr '+ trAttr +'>'+ tds.join('') + '</tr>');
+      trs_fixed.push('<tr '+ trAttr +'>'+ tds_fixed.join('') + '</tr>');
+      trs_fixed_r.push('<tr '+ trAttr +'>'+ tds_fixed_r.join('') + '</tr>');
     });
 
     return {
@@ -1228,7 +1233,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       options.HAS_SET_COLS_PATCH || that.setColsPatch();
       options.HAS_SET_COLS_PATCH = true;
 
-      that.thisCheckedRowIndex = '';
       if(!sort && that.sortKey){
         return that.sort({
           field: that.sortKey.field,
@@ -1256,15 +1260,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       that.layFixLeft.find('tbody').html(trs_fixed.join(''));
       that.layFixRight.find('tbody').html(trs_fixed_r.join(''));
 
-      that.renderForm();
+      // 渲染表单
-
-      // 标注选中行样式
-      typeof that.thisCheckedRowIndex === 'number' && that.setRowChecked({
-        type: 'radio',
-        index: that.thisCheckedRowIndex
-      }, true);
-
       that.syncCheckAll();
+      that.renderForm();
 
       // 因为 page 参数有可能发生变化 先重新铺满
       that.fullSize();
@@ -1464,33 +1462,65 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
   // 渲染表单
   Class.prototype.renderForm = function(type){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,filter = that.elem.attr('lay-filter');
+    var filter = that.elem.attr('lay-filter');
     form.render(type, filter);
   };
 
-  // 标记行选中状态
+  // 同步全选按钮状态
-  Class.prototype.setRowChecked = function(opts, selectedStyle){
+  Class.prototype.syncCheckAll = function(){
+    var that = this
+    var options = that.config
+    var checkAllElem = that.layHeader.find('input[name="layTableCheckbox"]')
+    var syncColsCheck = function(checked){
+      that.eachCols(function(i, item){
+        if(item.type === 'checkbox'){
+          item[options.checkName] = checked;
+        }
+      });
+      return checked;
+    };
+
+    if(!checkAllElem[0]) return;
+
+    if(table.checkStatus(that.key).isAll){
+      if(!checkAllElem[0].checked){
+        checkAllElem.prop('checked', true);
+        that.renderForm('checkbox');
+      }
+      syncColsCheck(true);
+    } else {
+      if(checkAllElem[0].checked){
+        checkAllElem.prop('checked', false);
+        that.renderForm('checkbox');
+      }
+      syncColsCheck(false);
+    }
+  };
+
+  // 标记当前活动行背景色
+  Class.prototype.setRowActive = function(index, className){
+    var that = this;
+    var options = that.config;
+    var tr = that.layBody.find('tr[data-index="'+ index +'"]');
+    className = className || 'layui-table-click';
+    tr.addClass(className).siblings('tr').removeClass(className);
+  };
+
+  // 设置行选中状态
+  Class.prototype.setRowChecked = function(opts){
     var that = this;
     var options = that.config;
-    var ELEM_CLICK = 'layui-table-click';
     var tr = that.layBody.find('tr'+ (
       opts.index === 'all' ? '' : '[data-index="'+ opts.index +'"]'
     ));
 
+    // 默认属性
     opts = $.extend({
       type: 'checkbox' // 选中方式
     }, opts);
 
-    // 标注当前行选中样式
-    if(opts.index !== 'all'){
-      tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK);
-    }
-
-    // 仅设置样式状态，不设置数据中的选中属性
-    if(opts.selectedStyle || selectedStyle) return;
-
     // 同步数据选中属性值
     var thisData = table.cache[that.key];
     var existChecked = 'checked' in opts;
@@ -1501,8 +1531,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
     // 设置数据选中属性
     layui.each(thisData, function(i, item){
+      if(layui.type(item) === 'array') return; // 空项
       if(opts.index === i || opts.index === 'all'){
-        item[options.checkName] = getChecked(item[options.checkName]);
+        var checked = item[options.checkName] = getChecked(item[options.checkName]);
+        tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 标记当前选中行背景色
+        // 若为 radio 类型，则取消其他行选中背景色
+        if(opts.type === 'radio'){
+          tr.siblings().removeClass(ELEM_CHECKED);
+        }
       } else if(opts.type === 'radio') {
         delete item[options.checkName];
       }
@@ -1624,55 +1660,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     }
   };
 
-  // 同步选中值状态
-  Class.prototype.setCheckData = function(index, checked, radio){
-    var that = this;
-    var options = that.config;
-    var thisData = table.cache[that.key];
-
-    if(!thisData[index]) return;
-    if(layui.type(thisData[index]) === 'array') return;
-    
-    layui.each(thisData, function(i, item){
-      if(index === i){
-        item[options.checkName] = checked;
-      } else if(radio) { // 是否单选
-        delete item[options.checkName];
-      }
-    });
-  };
-
-  // 同步全选按钮状态
-  Class.prototype.syncCheckAll = function(){
-    var that = this
-    ,options = that.config
-    ,checkAllElem = that.layHeader.find('input[name="layTableCheckbox"]')
-    ,syncColsCheck = function(checked){
-      that.eachCols(function(i, item){
-        if(item.type === 'checkbox'){
-          item[options.checkName] = checked;
-        }
-      });
-      return checked;
-    };
-
-    if(!checkAllElem[0]) return;
-
-    if(table.checkStatus(that.key).isAll){
-      if(!checkAllElem[0].checked){
-        checkAllElem.prop('checked', true);
-        that.renderForm('checkbox');
-      }
-      syncColsCheck(true);
-    } else {
-      if(checkAllElem[0].checked){
-        checkAllElem.prop('checked', false);
-        that.renderForm('checkbox');
-      }
-      syncColsCheck(false);
-    }
-  };
-
   // 获取 cssRule
   Class.prototype.getCssRule = function(key, callback){
     var that = this;
@@ -2175,9 +2162,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
           });
 
           that.renderForm();
-        }
+        },
         // 设置行选中状态
-        ,setRowChecked: function(opts){
+        setRowChecked: function(opts){
           that.setRowChecked($.extend({
             index: index
           }, opts));
@@ -2202,15 +2189,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
       // 全选
       if(isAll){
-        children.each(function(i, item){
+        that.setRowChecked({
-          item.checked = checked;
+          index: 'all',
-          that.setCheckData(i, checked);
+          checked: checked
         });
-        that.syncCheckAll();
-        that.renderForm('checkbox');
       } else {
-        that.setCheckData(index, checked);
+        that.setRowChecked({
-        that.syncCheckAll();
+          index: index,
+          checked: checked
+        });
         layui.stope(e);
       }
 
@@ -2239,14 +2226,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       layui.stope(e);
       if(radio[0].disabled) return false;
 
-      // 标注数据中的选中属性
-      that.setCheckData(index, checked, 'radio');
-
       // 标注选中样式
       that.setRowChecked({
         type: 'radio',
         index: index
-      }, true);
+      });
 
       // 事件
       layui.event.call(
@@ -2460,7 +2444,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       var othis = $(this);
       var td = othis.closest('td');
       var index = othis.parents('tr').eq(0).data('index');
-
+      // 执行事件
       layui.event.call(
         this,
         MOD_NAME,
@@ -2472,11 +2456,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
           }
         })
       );
-      // 设置当前行选中样式
+      // 标记当前活动行
-      that.setRowChecked({
+      that.setRowActive(index);
-        type: 'radio',
-        index: index
-      }, true);
     };
 
      // 行工具条单击事件