1
0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00

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

This commit is contained in:
贤心 2023-06-12 15:00:23 +08:00
parent 3e2fd79318
commit 29543f04b3
2 changed files with 84 additions and 101 deletions
src

View File

@ -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,

View File

@ -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>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
// 添加 tr 属性
var trAttr = function(){
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();
@ -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);
};
// 行工具条单击事件