diff --git a/src/css/layui.css b/src/css/layui.css
index 7a3fb8f9..2bbfab20 100644
--- a/src/css/layui.css
+++ b/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,
diff --git a/src/modules/table.js b/src/modules/table.js
index 9221aff2..1ccb6b0b 100644
--- a/src/modules/table.js
+++ b/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 ''+ tds.join('') + '');
- trs_fixed.push('
'+ tds_fixed.join('') + '
');
- trs_fixed_r.push(''+ tds_fixed_r.join('') + '
');
+ // 添加 tr 属性
+ var trAttr = function(){
+ var arr = ['data-index="'+ i1 +'"'];
+ if(item1[table.config.checkName]) arr.push('class="'+ ELEM_CHECKED +'"');
+ return arr.join(' ');
+ }();
+
+ trs.push(''+ tds.join('') + '
');
+ trs_fixed.push(''+ tds_fixed.join('') + '
');
+ trs_fixed_r.push(''+ tds_fixed_r.join('') + '
');
});
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();
@@ -1462,35 +1460,67 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
return parent.eq(0).find('.laytable-cell-'+ key + ':eq(0)');
};
- //渲染表单
+ // 渲染表单
Class.prototype.renderForm = function(type){
- var that = this
- ,options = that.config
- ,filter = that.elem.attr('lay-filter');
+ var that = this;
+ var options = that.config;
+ 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));
@@ -2200,17 +2187,17 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(checkbox[0].disabled) return;
- //全选
+ // 全选
if(isAll){
- children.each(function(i, item){
- item.checked = checked;
- that.setCheckData(i, checked);
+ that.setRowChecked({
+ index: 'all',
+ checked: checked
});
- that.syncCheckAll();
- that.renderForm('checkbox');
} else {
- that.setCheckData(index, checked);
- that.syncCheckAll();
+ that.setRowChecked({
+ 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({
- type: 'radio',
- index: index
- }, true);
+ // 标记当前活动行
+ that.setRowActive(index);
};
// 行工具条单击事件