修复 table 点击排序后导致 `scrollPos:'fixed'` 失效的问题

pull/1194/head
贤心 2023-01-28 22:04:04 +08:00
parent e68bb91b02
commit ea5676265f
1 changed files with 88 additions and 43 deletions

View File

@ -19,10 +19,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// api // api
var table = { var table = {
config: { // 全局配置项 config: { // 全局配置项
checkName: 'LAY_CHECKED' // 是否选中状态的字段名 checkName: 'LAY_CHECKED' // 是否选中状态的特定字段名
,indexName: 'LAY_TABLE_INDEX' // 初始下标索引名,用于恢复当前页表格排序 ,indexName: 'LAY_TABLE_INDEX' // 初始下标索引名,用于恢复当前页表格排序
,numbersName: 'LAY_INDEX' // 序号 ,numbersName: 'LAY_INDEX' // 序号
,disabledName: 'LAY_DISABLED' ,disabledName: 'LAY_DISABLED' // 禁用状态的特定字段名
} }
,cache: {} // 数据缓存 ,cache: {} // 数据缓存
,index: layui.table ? (layui.table.index + 10000) : 0 ,index: layui.table ? (layui.table.index + 10000) : 0
@ -908,7 +908,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var response = options.response; var response = options.response;
var sort = function(){ var sort = function(){
if(typeof options.initSort === 'object'){ if(typeof options.initSort === 'object'){
that.sort(options.initSort.field, options.initSort.type); that.sort({
field: options.initSort.field,
type: options.initSort.type,
reloadType: opts.type
});
} }
}; };
@ -1048,7 +1052,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var thisCheckedRowIndex; var thisCheckedRowIndex;
if(!sort && that.sortKey){ if(!sort && that.sortKey){
return that.sort(that.sortKey.field, that.sortKey.sort, true); return that.sort({
field: that.sortKey.field,
type: that.sortKey.sort,
pull: true,
reloadType: opts.type
});
} }
layui.each(data, function(i1, item1){ layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = [] var tds = [], tds_fixed = [], tds_fixed_r = []
@ -1371,33 +1380,54 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
form.render(type, filter); form.render(type, filter);
}; };
//标记当前行选中状态 // 标记当前行选中状态
Class.prototype.setThisRowChecked = function(index){ Class.prototype.setThisRowChecked = function(index, dataChecked){
var that = this var that = this;
,options = that.config var options = that.config;
,ELEM_CLICK = 'layui-table-click' var ELEM_CLICK = 'layui-table-click';
,tr = that.layBody.find('tr[data-index="'+ index +'"]'); var tr = that.layBody.find('tr[data-index="'+ index +'"]');
// 同步数据选中属性值
if(dataChecked){
var thisData = table.cache[that.key];
// 重置数据单选选中属性
layui.each(thisData, function(i, item){
if(index === i){
item[options.checkName] = true;
} else {
delete item[options.checkName];
}
});
// 若存在单选框,则标注单选框选中样式
tr.find('input[lay-type="layTableRadio"]').prop('checked', true);
that.renderForm('radio');
}
// 选中样式
tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK); tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK);
}; };
//数据排序 // 数据排序
Class.prototype.sort = function(th, type, pull, formEvent){ Class.prototype.sort = function(opts){ // field, type, pull, fromEvent
var that = this var that = this;
,field var field;
,res = {} var res = {};
,options = that.config var options = that.config;
,filter = options.elem.attr('lay-filter') var filter = options.elem.attr('lay-filter');
,data = table.cache[that.key], thisData; var data = table.cache[that.key], thisData;
opts = opts || {};
//字段匹配 // 字段匹配
if(typeof th === 'string'){ if(typeof opts.field === 'string'){
field = th; field = opts.field;
that.layHeader.find('th').each(function(i, item){ that.layHeader.find('th').each(function(i, item){
var othis = $(this) var othis = $(this)
,_field = othis.data('field'); ,_field = othis.data('field');
if(_field === th){ if(_field === opts.field){
th = othis; opts.field = othis;
field = _field; field = _field;
return false; return false;
} }
@ -1405,37 +1435,37 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
try { try {
var field = field || th.data('field') var field = field || opts.field.data('field')
,key = th.data('key'); ,key = opts.field.data('key');
//如果欲执行的排序已在状态中,则不执行渲染 // 如果欲执行的排序已在状态中,则不执行渲染
if(that.sortKey && !pull){ if(that.sortKey && !opts.pull){
if(field === that.sortKey.field && type === that.sortKey.sort){ if(field === that.sortKey.field && opts.type === that.sortKey.sort){
return; return;
} }
} }
var elemSort = that.layHeader.find('th .laytable-cell-'+ key).find(ELEM_SORT); var elemSort = that.layHeader.find('th .laytable-cell-'+ key).find(ELEM_SORT);
that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); //清除其它标题排序状态 that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); // 清除其它标题排序状态
elemSort.attr('lay-sort', type || null); elemSort.attr('lay-sort', opts.type || null);
that.layFixed.find('th') that.layFixed.find('th')
} catch(e){ } catch(e){
hint.error('Table modules: sort field \''+ field +'\' not matched'); hint.error('Table modules: sort field \''+ field +'\' not matched');
} }
//记录排序索引和类型 // 记录排序索引和类型
that.sortKey = { that.sortKey = {
field: field field: field
,sort: type ,sort: opts.type
}; };
//默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序) // 默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序)
if(options.autoSort){ if(options.autoSort){
if(type === 'asc'){ //升序 if(opts.type === 'asc'){ //升序
thisData = layui.sort(data, field); thisData = layui.sort(data, field);
} else if(type === 'desc'){ //降序 } else if(opts.type === 'desc'){ //降序
thisData = layui.sort(data, field, true); thisData = layui.sort(data, field, true);
} else { //清除排序 } else { // 清除排序
thisData = layui.sort(data, table.config.indexName); thisData = layui.sort(data, table.config.indexName);
delete that.sortKey; delete that.sortKey;
delete options.initSort; delete options.initSort;
@ -1444,19 +1474,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
res[options.response.dataName] = thisData || data; res[options.response.dataName] = thisData || data;
// 重载数据
that.renderData({ that.renderData({
res: res, res: res,
curr: that.page, curr: that.page,
count: that.count, count: that.count,
sort: true sort: true,
type: opts.reloadType
}); });
if(formEvent){ // 排序是否来自于点击表头事件触发
if(opts.fromEvent){
options.initSort = { options.initSort = {
field: field field: field
,type: type ,type: opts.type
}; };
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', $.extend({ layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({
config: options config: options
}, options.initSort)); }, options.initSort));
} }
@ -1923,16 +1956,28 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} else { } else {
type = 'asc'; type = 'asc';
} }
that.sort(othis, type, null, true); that.sort({
field: othis,
type: type,
fromEvent: true
});
}).find(ELEM_SORT+' .layui-edge ').on('click', function(e){ }).find(ELEM_SORT+' .layui-edge ').on('click', function(e){
var othis = $(this) var othis = $(this)
,index = othis.index() ,index = othis.index()
,field = othis.parents('th').eq(0).data('field') ,field = othis.parents('th').eq(0).data('field')
layui.stope(e); layui.stope(e);
if(index === 0){ if(index === 0){
that.sort(field, 'asc', null, true); that.sort({
field: field,
type: 'asc',
fromEvent: true
});
} else { } else {
that.sort(field, 'desc', null, true); that.sort({
field: field,
type: 'desc',
fromEvent: true
});
} }
}); });