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:
parent
3e2fd79318
commit
29543f04b3
@ -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,
|
||||
|
@ -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);
|
||||
};
|
||||
|
||||
// 行工具条单击事件
|
||||
|
Loading…
Reference in New Issue
Block a user