fix table 排序后多选不能使用

This commit is contained in:
Theluyuan 2023-05-09 18:33:32 +08:00
parent 096ee2fc96
commit 6a0e0fd6b1
3 changed files with 382 additions and 186 deletions

460
dist/layui.js vendored
View File

@ -701,6 +701,93 @@
desc && clone.reverse(); // 倒序 desc && clone.reverse(); // 倒序
return clone; return clone;
}; };
// 不复制 将数组中的成员对象按照某个 key 的 value 值进行排序
Layui.prototype.thissort = function(arr, key, desc){
var that = this
,clone = (arr || []);
// 若未传入 key则直接返回原对象
if(that.type(arr) === 'object' && !key){
return clone;
} else if(typeof arr !== 'object'){ //若 arr 非对象
return [clone];
}
// 开始排序
clone.sort(function(o1, o2){
var v1 = o1[key]
,v2 = o2[key];
/*
* 特殊数据
* 若比较的成员均非对象
*/
// 若比较的成员均为数字
if(!isNaN(o1) && !isNaN(o2)) return o1 - o2;
// 若比较的成员只存在某一个非对象
if(!isNaN(o1) && isNaN(o2)){
if(key && typeof o2 === 'object'){
v1 = o1;
} else {
return -1;
}
} else if (isNaN(o1) && !isNaN(o2)){
if(key && typeof o1 === 'object'){
v2 = o2;
} else {
return 1;
}
}
/*
* 正常数据
* 即成员均为对象也传入了对比依据 key
* value 为数字大小排序 value 非数字则按字典序排序
*/
// value 是否为数字
var isNum = [!isNaN(v1), !isNaN(v2)];
// 若为数字比较
if(isNum[0] && isNum[1]){
if(v1 && (!v2 && v2 !== 0)){ //数字 vs 空
return 1;
} else if((!v1 && v1 !== 0) && v2){ //空 vs 数字
return -1;
} else { //数字 vs 数字
return v1 - v2;
}
};
/**
* 字典序排序
*/
// 若为非数字比较
if(!isNum[0] && !isNum[1]){
// 字典序比较
if(v1 > v2){
return 1;
} else if (v1 < v2) {
return -1;
} else {
return 0;
}
}
// 若为混合比较
if(isNum[0] || !isNum[1]){ //数字 vs 非数字
return -1;
} else if(!isNum[0] || isNum[1]) { //非数字 vs 数字
return 1;
}
});
desc && clone.reverse(); // 倒序
return clone;
};
//阻止事件冒泡 //阻止事件冒泡
Layui.prototype.stope = function(thisEvent){ Layui.prototype.stope = function(thisEvent){
@ -19589,6 +19676,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,disabledName: 'LAY_DISABLED' ,disabledName: 'LAY_DISABLED'
} //全局配置项 } //全局配置项
,cache: {} //数据缓存 ,cache: {} //数据缓存
,allData:[] // 全部数据
,index: layui.table ? (layui.table.index + 10000) : 0 ,index: layui.table ? (layui.table.index + 10000) : 0
//设置全局项 //设置全局项
@ -19628,6 +19716,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
} }
,resize: function(){ //重置表格尺寸/结构 ,resize: function(){ //重置表格尺寸/结构
that.resize.call(that); that.resize.call(that);
},
getData: function(){
console.log(that)
return that.config.data
} }
} }
} }
@ -19819,7 +19911,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//构造器 //构造器
,Class = function(options){ ,Class = function(options){
var that = this; var that = this;
that.reanderTime = new Date().getTime()
that.index = ++table.index; that.index = ++table.index;
that.config = $.extend({}, that.config, table.config, options); that.config = $.extend({}, that.config, table.config, options);
that.render(); that.render();
@ -19916,6 +20010,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
options.index = that.index; options.index = that.index;
that.key = options.id || options.index; that.key = options.id || options.index;
table.allData[that.key] = options.data
//生成替代元素 //生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender
@ -20305,7 +20400,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//对参数进行深度或浅扩展 //对参数进行深度或浅扩展
that.config = $.extend(deep, {}, that.config, options); that.config = $.extend(deep, {}, that.config, options);
table.allData[that.key] = that.config.data
//执行渲染 //执行渲染
that.render(type); that.render(type);
}; };
@ -20806,18 +20901,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序) //默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序)
if(options.autoSort){ if(options.autoSort){
if(type === 'asc'){ //升序 if(type === 'asc'){ //升序
thisData = layui.sort(data, field); thisData = layui.thissort(data, field);
} else if(type === 'desc'){ //降序 } else if(type === 'desc'){ //降序
thisData = layui.sort(data, field, true); thisData = layui.thissort(data, field, true);
} else { //清除排序 } else { //清除排序
thisData = layui.sort(data, table.config.indexName); thisData = layui.thissort(data, table.config.indexName);
delete that.sortKey; delete that.sortKey;
} }
} }
res[options.response.dataName] = thisData || data; res[options.response.dataName] = thisData || data;
that.renderData(res, that.page, that.count, true); that.renderData(res, that.page, that.count, true);
// table.cache[that.key] = thisData
if(formEvent){ if(formEvent){
options.initSort = { options.initSort = {
field: field field: field
@ -20825,6 +20920,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}; };
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', options.initSort); layui.event.call(th, MOD_NAME, 'sort('+ filter +')', options.initSort);
} }
// if(this)
this.config.afterSort && this.config.afterSort()
}; };
//请求loading //请求loading
@ -20847,6 +20944,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//同步选中值状态 //同步选中值状态
Class.prototype.setCheckData = function(index, checked){ Class.prototype.setCheckData = function(index, checked){
console.log("同步选中值状态",index,checked,this)
var that = this var that = this
,options = that.config ,options = that.config
,thisData = table.cache[that.key]; ,thisData = table.cache[that.key];
@ -23693,6 +23791,182 @@ layui.define('jquery',function(exports){
exports(MOD_NAME, rate); exports(MOD_NAME, rate);
})/** })/**
* flow 流加载组件
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$, Flow = function(options){}
,ELEM_MORE = 'layui-flow-more'
,ELEM_LOAD = '<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon ">&#xe63e;</i>';
//主方法
Flow.prototype.load = function(options){
var that = this, page = 0, lock, isOver, lazyimg, timer;
options = options || {};
var elem = $(options.elem); if(!elem[0]) return;
var scrollElem = $(options.scrollElem || document); //滚动条所在元素
var mb = options.mb || 50; //与底部的临界距离
var isAuto = 'isAuto' in options ? options.isAuto : true; //是否自动滚动加载
var end = options.end || '没有更多了'; //“末页”显示文案
//滚动条所在元素是否为document
var notDocment = options.scrollElem && options.scrollElem !== document;
//加载更多
var ELEM_TEXT = '<cite>加载更多</cite>'
,more = $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>');
if(!elem.find('.layui-flow-more')[0]){
elem.append(more);
}
//加载下一个元素
var next = function(html, over){
html = $(html);
more.before(html);
over = over == 0 ? true : null;
over ? more.html(end) : more.find('a').html(ELEM_TEXT);
isOver = over;
lock = null;
lazyimg && lazyimg();
};
//触发请求
var done = function(){
lock = true;
more.find('a').html(ELEM_LOAD);
typeof options.done === 'function' && options.done(++page, next);
};
done();
//不自动滚动加载
more.find('a').on('click', function(){
var othis = $(this);
if(isOver) return;
lock || done();
});
//如果允许图片懒加载
if(options.isLazyimg){
var lazyimg = that.lazyimg({
elem: options.elem + ' img'
,scrollElem: options.scrollElem
});
}
if(!isAuto) return that;
scrollElem.on('scroll', function(){
var othis = $(this), top = othis.scrollTop();
if(timer) clearTimeout(timer);
if(isOver || !elem.width()) return; //如果已经结束,或者元素处于隐藏状态,则不执行滚动加载
timer = setTimeout(function(){
//计算滚动所在容器的可视高度
var height = notDocment ? othis.height() : $(window).height();
//计算滚动所在容器的实际高度
var scrollHeight = notDocment
? othis.prop('scrollHeight')
: document.documentElement.scrollHeight;
//临界点
if(scrollHeight - top - height <= mb){
lock || done();
}
}, 100);
});
return that;
};
//图片懒加载
Flow.prototype.lazyimg = function(options){
var that = this, index = 0, haveScroll;
options = options || {};
var scrollElem = $(options.scrollElem || document); //滚动条所在元素
var elem = options.elem || 'img';
//滚动条所在元素是否为document
var notDocment = options.scrollElem && options.scrollElem !== document;
//显示图片
var show = function(item, height){
var start = scrollElem.scrollTop(), end = start + height;
var elemTop = notDocment ? function(){
return item.offset().top - scrollElem.offset().top + start;
}() : item.offset().top;
/* 始终只加载在当前屏范围内的图片 */
if(elemTop >= start && elemTop <= end){
if(item.attr('lay-src')){
var src = item.attr('lay-src');
layui.img(src, function(){
var next = that.lazyimg.elem.eq(index);
item.attr('src', src).removeAttr('lay-src');
/* 当前图片加载就绪后,检测下一个图片是否在当前屏 */
next[0] && render(next);
index++;
}, function(){
var next = that.lazyimg.elem.eq(index);
item.removeAttr('lay-src');
});
}
}
}, render = function(othis, scroll){
//计算滚动所在容器的可视高度
var height = notDocment ? (scroll||scrollElem).height() : $(window).height();
var start = scrollElem.scrollTop(), end = start + height;
that.lazyimg.elem = $(elem);
if(othis){
show(othis, height);
} else {
//计算未加载过的图片
for(var i = 0; i < that.lazyimg.elem.length; i++){
var item = that.lazyimg.elem.eq(i), elemTop = notDocment ? function(){
return item.offset().top - scrollElem.offset().top + start;
}() : item.offset().top;
show(item, height);
index = i;
//如果图片的top坐标超出了当前屏则终止后续图片的遍历
if(elemTop > end) break;
}
}
};
render();
if(!haveScroll){
var timer;
scrollElem.on('scroll', function(){
var othis = $(this);
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
render(null, othis);
}, 50);
});
haveScroll = true;
}
return render;
};
//暴露接口
exports('flow', new Flow());
});
/**
* layedit 富文本编辑器 * layedit 富文本编辑器
*/ */
@ -24262,182 +24536,6 @@ layui.define(['layer', 'form'], function(exports){
exports(MOD_NAME, edit); exports(MOD_NAME, edit);
}); });
/**
* flow 流加载组件
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$, Flow = function(options){}
,ELEM_MORE = 'layui-flow-more'
,ELEM_LOAD = '<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon ">&#xe63e;</i>';
//主方法
Flow.prototype.load = function(options){
var that = this, page = 0, lock, isOver, lazyimg, timer;
options = options || {};
var elem = $(options.elem); if(!elem[0]) return;
var scrollElem = $(options.scrollElem || document); //滚动条所在元素
var mb = options.mb || 50; //与底部的临界距离
var isAuto = 'isAuto' in options ? options.isAuto : true; //是否自动滚动加载
var end = options.end || '没有更多了'; //“末页”显示文案
//滚动条所在元素是否为document
var notDocment = options.scrollElem && options.scrollElem !== document;
//加载更多
var ELEM_TEXT = '<cite>加载更多</cite>'
,more = $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>');
if(!elem.find('.layui-flow-more')[0]){
elem.append(more);
}
//加载下一个元素
var next = function(html, over){
html = $(html);
more.before(html);
over = over == 0 ? true : null;
over ? more.html(end) : more.find('a').html(ELEM_TEXT);
isOver = over;
lock = null;
lazyimg && lazyimg();
};
//触发请求
var done = function(){
lock = true;
more.find('a').html(ELEM_LOAD);
typeof options.done === 'function' && options.done(++page, next);
};
done();
//不自动滚动加载
more.find('a').on('click', function(){
var othis = $(this);
if(isOver) return;
lock || done();
});
//如果允许图片懒加载
if(options.isLazyimg){
var lazyimg = that.lazyimg({
elem: options.elem + ' img'
,scrollElem: options.scrollElem
});
}
if(!isAuto) return that;
scrollElem.on('scroll', function(){
var othis = $(this), top = othis.scrollTop();
if(timer) clearTimeout(timer);
if(isOver || !elem.width()) return; //如果已经结束,或者元素处于隐藏状态,则不执行滚动加载
timer = setTimeout(function(){
//计算滚动所在容器的可视高度
var height = notDocment ? othis.height() : $(window).height();
//计算滚动所在容器的实际高度
var scrollHeight = notDocment
? othis.prop('scrollHeight')
: document.documentElement.scrollHeight;
//临界点
if(scrollHeight - top - height <= mb){
lock || done();
}
}, 100);
});
return that;
};
//图片懒加载
Flow.prototype.lazyimg = function(options){
var that = this, index = 0, haveScroll;
options = options || {};
var scrollElem = $(options.scrollElem || document); //滚动条所在元素
var elem = options.elem || 'img';
//滚动条所在元素是否为document
var notDocment = options.scrollElem && options.scrollElem !== document;
//显示图片
var show = function(item, height){
var start = scrollElem.scrollTop(), end = start + height;
var elemTop = notDocment ? function(){
return item.offset().top - scrollElem.offset().top + start;
}() : item.offset().top;
/* 始终只加载在当前屏范围内的图片 */
if(elemTop >= start && elemTop <= end){
if(item.attr('lay-src')){
var src = item.attr('lay-src');
layui.img(src, function(){
var next = that.lazyimg.elem.eq(index);
item.attr('src', src).removeAttr('lay-src');
/* 当前图片加载就绪后,检测下一个图片是否在当前屏 */
next[0] && render(next);
index++;
}, function(){
var next = that.lazyimg.elem.eq(index);
item.removeAttr('lay-src');
});
}
}
}, render = function(othis, scroll){
//计算滚动所在容器的可视高度
var height = notDocment ? (scroll||scrollElem).height() : $(window).height();
var start = scrollElem.scrollTop(), end = start + height;
that.lazyimg.elem = $(elem);
if(othis){
show(othis, height);
} else {
//计算未加载过的图片
for(var i = 0; i < that.lazyimg.elem.length; i++){
var item = that.lazyimg.elem.eq(i), elemTop = notDocment ? function(){
return item.offset().top - scrollElem.offset().top + start;
}() : item.offset().top;
show(item, height);
index = i;
//如果图片的top坐标超出了当前屏则终止后续图片的遍历
if(elemTop > end) break;
}
}
};
render();
if(!haveScroll){
var timer;
scrollElem.on('scroll', function(){
var othis = $(this);
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
render(null, othis);
}, 50);
});
haveScroll = true;
}
return render;
};
//暴露接口
exports('flow', new Flow());
});
/** /**
* code * code
* 代码区简易修饰 * 代码区简易修饰

View File

@ -701,6 +701,93 @@
desc && clone.reverse(); // 倒序 desc && clone.reverse(); // 倒序
return clone; return clone;
}; };
// 不复制 将数组中的成员对象按照某个 key 的 value 值进行排序
Layui.prototype.thissort = function(arr, key, desc){
var that = this
,clone = (arr || []);
// 若未传入 key则直接返回原对象
if(that.type(arr) === 'object' && !key){
return clone;
} else if(typeof arr !== 'object'){ //若 arr 非对象
return [clone];
}
// 开始排序
clone.sort(function(o1, o2){
var v1 = o1[key]
,v2 = o2[key];
/*
* 特殊数据
* 若比较的成员均非对象
*/
// 若比较的成员均为数字
if(!isNaN(o1) && !isNaN(o2)) return o1 - o2;
// 若比较的成员只存在某一个非对象
if(!isNaN(o1) && isNaN(o2)){
if(key && typeof o2 === 'object'){
v1 = o1;
} else {
return -1;
}
} else if (isNaN(o1) && !isNaN(o2)){
if(key && typeof o1 === 'object'){
v2 = o2;
} else {
return 1;
}
}
/*
* 正常数据
* 即成员均为对象也传入了对比依据 key
* value 为数字大小排序 value 非数字则按字典序排序
*/
// value 是否为数字
var isNum = [!isNaN(v1), !isNaN(v2)];
// 若为数字比较
if(isNum[0] && isNum[1]){
if(v1 && (!v2 && v2 !== 0)){ //数字 vs 空
return 1;
} else if((!v1 && v1 !== 0) && v2){ //空 vs 数字
return -1;
} else { //数字 vs 数字
return v1 - v2;
}
};
/**
* 字典序排序
*/
// 若为非数字比较
if(!isNum[0] && !isNum[1]){
// 字典序比较
if(v1 > v2){
return 1;
} else if (v1 < v2) {
return -1;
} else {
return 0;
}
}
// 若为混合比较
if(isNum[0] || !isNum[1]){ //数字 vs 非数字
return -1;
} else if(!isNum[0] || isNum[1]) { //非数字 vs 数字
return 1;
}
});
desc && clone.reverse(); // 倒序
return clone;
};
//阻止事件冒泡 //阻止事件冒泡
Layui.prototype.stope = function(thisEvent){ Layui.prototype.stope = function(thisEvent){

View File

@ -23,6 +23,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,disabledName: 'LAY_DISABLED' ,disabledName: 'LAY_DISABLED'
} //全局配置项 } //全局配置项
,cache: {} //数据缓存 ,cache: {} //数据缓存
,allData:[] // 全部数据
,index: layui.table ? (layui.table.index + 10000) : 0 ,index: layui.table ? (layui.table.index + 10000) : 0
//设置全局项 //设置全局项
@ -62,6 +63,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
} }
,resize: function(){ //重置表格尺寸/结构 ,resize: function(){ //重置表格尺寸/结构
that.resize.call(that); that.resize.call(that);
},
getData: function(){
console.log(that)
return that.config.data
} }
} }
} }
@ -253,7 +258,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//构造器 //构造器
,Class = function(options){ ,Class = function(options){
var that = this; var that = this;
that.reanderTime = new Date().getTime()
that.index = ++table.index; that.index = ++table.index;
that.config = $.extend({}, that.config, table.config, options); that.config = $.extend({}, that.config, table.config, options);
that.render(); that.render();
@ -350,6 +357,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
options.index = that.index; options.index = that.index;
that.key = options.id || options.index; that.key = options.id || options.index;
table.allData[that.key] = options.data
//生成替代元素 //生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender
@ -739,7 +747,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//对参数进行深度或浅扩展 //对参数进行深度或浅扩展
that.config = $.extend(deep, {}, that.config, options); that.config = $.extend(deep, {}, that.config, options);
table.allData[that.key] = that.config.data
//执行渲染 //执行渲染
that.render(type); that.render(type);
}; };
@ -1240,18 +1248,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序) //默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序)
if(options.autoSort){ if(options.autoSort){
if(type === 'asc'){ //升序 if(type === 'asc'){ //升序
thisData = layui.sort(data, field); thisData = layui.thissort(data, field);
} else if(type === 'desc'){ //降序 } else if(type === 'desc'){ //降序
thisData = layui.sort(data, field, true); thisData = layui.thissort(data, field, true);
} else { //清除排序 } else { //清除排序
thisData = layui.sort(data, table.config.indexName); thisData = layui.thissort(data, table.config.indexName);
delete that.sortKey; delete that.sortKey;
} }
} }
res[options.response.dataName] = thisData || data; res[options.response.dataName] = thisData || data;
that.renderData(res, that.page, that.count, true); that.renderData(res, that.page, that.count, true);
// table.cache[that.key] = thisData
if(formEvent){ if(formEvent){
options.initSort = { options.initSort = {
field: field field: field
@ -1259,6 +1267,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}; };
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', options.initSort); layui.event.call(th, MOD_NAME, 'sort('+ filter +')', options.initSort);
} }
// if(this)
this.config.afterSort && this.config.afterSort()
}; };
//请求loading //请求loading
@ -1281,6 +1291,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//同步选中值状态 //同步选中值状态
Class.prototype.setCheckData = function(index, checked){ Class.prototype.setCheckData = function(index, checked){
console.log("同步选中值状态",index,checked,this)
var that = this var that = this
,options = that.config ,options = that.config
,thisData = table.cache[that.key]; ,thisData = table.cache[that.key];