ulthon/ulthon_admin
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_admin.git synced 2026-07-08 11:02:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化表格选择时预览图片的问题;

Browse Source
This commit is contained in:
augushong
2022-02-25 16:25:37 +08:00
parent 08ab934a37
commit 5ee08f2d58
1 changed files with 82 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
public/static/plugs/lay-module/tableSelect/tableSelect.js
View File

@@ -14,7 +14,7 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
*/ */
tableSelect.prototype.render = function (opt) { tableSelect.prototype.render = function (opt) {
var elem = $(opt.elem); var elem = $(opt.elem);
var tableDone = opt.table.done || function(){}; var tableDone = opt.table.done || function () { };
//默认设置 //默认设置
opt.searchKey = opt.searchKey || 'keyword'; opt.searchKey = opt.searchKey || 'keyword';
@@ -28,36 +28,36 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
//多搜索条件 //多搜索条件
opt.searchType = opt.searchType || 'one'; opt.searchType = opt.searchType || 'one';
opt.searchList = opt.searchList || [{key: opt.searchKey, placeholder: opt.searchPlaceholder}]; opt.searchList = opt.searchList || [{ key: opt.searchKey, placeholder: opt.searchPlaceholder }];
elem.off('click').on('click', function(e) { elem.off('click').on('click', function (e) {
e.stopPropagation(); e.stopPropagation();
if($('div.tableSelect').length >= 1){ if ($('div.tableSelect').length >= 1) {
return false; return false;
} }
var t = elem.offset().top + elem.outerHeight()+"px"; var t = elem.offset().top + elem.outerHeight() + "px";
var l = elem.offset().left +"px"; var l = elem.offset().left + "px";
var tableName = "tableSelect_table_" + new Date().getTime(); var tableName = "tableSelect_table_" + new Date().getTime();
var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:'+opt.width+'px;">'; var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:' + l + ';top:' + t + ';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: fixed;z-index:666;margin: 5px 0;border-radius: 2px;min-width:' + opt.width + 'px;">';
tableBox += '<div class="tableSelectBar">'; tableBox += '<div class="tableSelectBar">';
tableBox += '<form class="layui-form" action="" style="display:inline-block;">'; tableBox += '<form class="layui-form" action="" style="display:inline-block;">';
//判断是否多搜索条件 //判断是否多搜索条件
if(opt.searchType == 'more'){ if (opt.searchType == 'more') {
$.each(opt.searchList, function (index, item) { $.each(opt.searchList, function (index, item) {
tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="'+item.searchKey+'" placeholder="'+item.searchPlaceholder+'" autocomplete="off" class="layui-input">'; tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="' + item.searchKey + '" placeholder="' + item.searchPlaceholder + '" autocomplete="off" class="layui-input">';
}); });
}else{ } else {
tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="'+opt.searchKey+'" placeholder="'+opt.searchPlaceholder+'" autocomplete="off" class="layui-input">'; tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="' + opt.searchKey + '" placeholder="' + opt.searchPlaceholder + '" autocomplete="off" class="layui-input">';
} }
tableBox += '<button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>'; tableBox += '<button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>';
tableBox += '</form>'; tableBox += '</form>';
tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>'; tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
tableBox += '</div>'; tableBox += '</div>';
tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'"></table>'; tableBox += '<table id="' + tableName + '" lay-filter="' + tableName + '"></table>';
tableBox += '</div>'; tableBox += '</div>';
tableBox = $(tableBox); tableBox = $(tableBox);
$('body').append(tableBox); $('body').append(tableBox);
@@ -66,9 +66,9 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
var checkedData = []; var checkedData = [];
//渲染TABLE //渲染TABLE
opt.table.elem = "#"+tableName; opt.table.elem = "#" + tableName;
opt.table.id = tableName; opt.table.id = tableName;
opt.table.done = function(res, curr, count){ opt.table.done = function (res, curr, count) {
defaultChecked(res, curr, count); defaultChecked(res, curr, count);
setChecked(res, curr, count); setChecked(res, curr, count);
tableDone(res, curr, count); tableDone(res, curr, count);
@@ -76,28 +76,28 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
var tableSelect_table = table.render(opt.table); var tableSelect_table = table.render(opt.table);
//分页选中保存数组 //分页选中保存数组
table.on('radio('+tableName+')', function(obj){ table.on('radio(' + tableName + ')', function (obj) {
if(opt.checkedKey){ if (opt.checkedKey) {
checkedData = table.checkStatus(tableName).data checkedData = table.checkStatus(tableName).data
} }
updataButton(table.checkStatus(tableName).data.length) updataButton(table.checkStatus(tableName).data.length)
}) })
table.on('checkbox('+tableName+')', function(obj){ table.on('checkbox(' + tableName + ')', function (obj) {
if(opt.checkedKey){ if (opt.checkedKey) {
if(obj.checked){ if (obj.checked) {
for (var i=0;i<table.checkStatus(tableName).data.length;i++){ for (var i = 0; i < table.checkStatus(tableName).data.length; i++) {
checkedData.push(table.checkStatus(tableName).data[i]) checkedData.push(table.checkStatus(tableName).data[i])
} }
}else{ } else {
if(obj.type=='all'){ if (obj.type == 'all') {
for (var j=0;j<table.cache[tableName].length;j++) { for (var j = 0; j < table.cache[tableName].length; j++) {
for (var i=0;i<checkedData.length;i++){ for (var i = 0; i < checkedData.length; i++) {
if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){ if (checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]) {
checkedData.splice(i,1) checkedData.splice(i, 1)
} }
} }
} }
}else{ } else {
//因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。 //因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。
var nu = function () { var nu = function () {
var noCheckedKey = ''; var noCheckedKey = '';
@@ -109,49 +109,49 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
return noCheckedKey return noCheckedKey
}; };
var noCheckedKey = obj.data[opt.checkedKey] || nu(); var noCheckedKey = obj.data[opt.checkedKey] || nu();
for (var i=0;i<checkedData.length;i++){ for (var i = 0; i < checkedData.length; i++) {
if(checkedData[i][opt.checkedKey] == noCheckedKey){ if (checkedData[i][opt.checkedKey] == noCheckedKey) {
checkedData.splice(i,1); checkedData.splice(i, 1);
} }
} }
} }
} }
checkedData = uniqueObjArray(checkedData, opt.checkedKey); checkedData = uniqueObjArray(checkedData, opt.checkedKey);
updataButton(checkedData.length) updataButton(checkedData.length)
}else{ } else {
updataButton(table.checkStatus(tableName).data.length) updataButton(table.checkStatus(tableName).data.length)
} }
}); });
//渲染表格后选中 //渲染表格后选中
function setChecked (res, curr, count) { function setChecked(res, curr, count) {
for(var i=0;i<res.data.length;i++){ for (var i = 0; i < res.data.length; i++) {
for (var j=0;j<checkedData.length;j++) { for (var j = 0; j < checkedData.length; j++) {
if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){ if (res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]) {
res.data[i].LAY_CHECKED = true; res.data[i].LAY_CHECKED = true;
var index= res.data[i]['LAY_TABLE_INDEX']; var index = res.data[i]['LAY_TABLE_INDEX'];
var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]'); var checkbox = $('#' + tableName + '').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
checkbox.prop('checked', true).next().addClass('layui-form-checked'); checkbox.prop('checked', true).next().addClass('layui-form-checked');
var radio = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]'); var radio = $('#' + tableName + '').next().find('tr[data-index=' + index + '] input[type="radio"]');
radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;'); radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;');
} }
} }
} }
var checkStatus = table.checkStatus(tableName); var checkStatus = table.checkStatus(tableName);
if(checkStatus.isAll){ if (checkStatus.isAll) {
$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true); $('#' + tableName + '').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked'); $('#' + tableName + '').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
} }
updataButton(checkedData.length) updataButton(checkedData.length)
} }
//写入默认选中值(puash checkedData) //写入默认选中值(puash checkedData)
function defaultChecked (res, curr, count){ function defaultChecked(res, curr, count) {
if(opt.checkedKey && elem.attr('ts-selected')){ if (opt.checkedKey && elem.attr('ts-selected')) {
var selected = elem.attr('ts-selected').split(","); var selected = elem.attr('ts-selected').split(",");
for(var i=0;i<res.data.length;i++){ for (var i = 0; i < res.data.length; i++) {
for(var j=0;j<selected.length;j++){ for (var j = 0; j < selected.length; j++) {
if(res.data[i][opt.checkedKey] == selected[j]){ if (res.data[i][opt.checkedKey] == selected[j]) {
checkedData.push(res.data[i]) checkedData.push(res.data[i])
} }
} }
@@ -161,28 +161,28 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
} }
//更新选中数量 //更新选中数量
function updataButton (n) { function updataButton(n) {
tableBox.find('.tableSelect_btn_select span').html(n==0?'':'('+n+')') tableBox.find('.tableSelect_btn_select span').html(n == 0 ? '' : '(' + n + ')')
} }
//数组去重 //数组去重
function uniqueObjArray(arr, type){ function uniqueObjArray(arr, type) {
var newArr = []; var newArr = [];
var tArr = []; var tArr = [];
if(arr.length == 0){ if (arr.length == 0) {
return arr; return arr;
}else{ } else {
if(type){ if (type) {
for(var i=0;i<arr.length;i++){ for (var i = 0; i < arr.length; i++) {
if(!tArr[arr[i][type]]){ if (!tArr[arr[i][type]]) {
newArr.push(arr[i]); newArr.push(arr[i]);
tArr[arr[i][type]] = true; tArr[arr[i][type]] = true;
} }
} }
return newArr; return newArr;
}else{ } else {
for(var i=0;i<arr.length;i++){ for (var i = 0; i < arr.length; i++) {
if(!tArr[arr[i]]){ if (!tArr[arr[i]]) {
newArr.push(arr[i]); newArr.push(arr[i]);
tArr[arr[i]] = true; tArr[arr[i]] = true;
} }
@@ -195,11 +195,11 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
//FIX位置 //FIX位置
var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height(); var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width(); var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
overHeight && tableBox.css({'top':'auto','bottom':'0px'}); overHeight && tableBox.css({ 'top': 'auto', 'bottom': '0px' });
overWidth && tableBox.css({'left':'auto','right':'5px'}) overWidth && tableBox.css({ 'left': 'auto', 'right': '5px' })
//关键词搜索 //关键词搜索
form.on('submit(tableSelect_btn_search)', function(data){ form.on('submit(tableSelect_btn_search)', function (data) {
tableSelect_table.reload({ tableSelect_table.reload({
where: data.field, where: data.field,
page: { page: {
@@ -210,28 +210,28 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
}); });
//双击行选中 //双击行选中
table.on('rowDouble('+tableName+')', function(obj){ table.on('rowDouble(' + tableName + ')', function (obj) {
var checkStatus = {data:[obj.data]}; var checkStatus = { data: [obj.data] };
selectDone(checkStatus); selectDone(checkStatus);
}) })
//按钮选中 //按钮选中
tableBox.find('.tableSelect_btn_select').on('click', function() { tableBox.find('.tableSelect_btn_select').on('click', function () {
var checkStatus = table.checkStatus(tableName); var checkStatus = table.checkStatus(tableName);
if(checkedData.length > 1){ if (checkedData.length > 1) {
checkStatus.data = checkedData; checkStatus.data = checkedData;
} }
selectDone(checkStatus); selectDone(checkStatus);
}) })
//写值回调和关闭 //写值回调和关闭
function selectDone (checkStatus){ function selectDone(checkStatus) {
if(opt.checkedKey){ if (opt.checkedKey) {
var selected = []; var selected = [];
for(var i=0;i<checkStatus.data.length;i++){ for (var i = 0; i < checkStatus.data.length; i++) {
selected.push(checkStatus.data[i][opt.checkedKey]) selected.push(checkStatus.data[i][opt.checkedKey])
} }
elem.attr("ts-selected",selected.join(",")); elem.attr("ts-selected", selected.join(","));
} }
opt.done(elem, checkStatus); opt.done(elem, checkStatus);
tableBox.remove(); tableBox.remove();
@@ -240,9 +240,19 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
} }
//点击其他区域关闭 //点击其他区域关闭
$(document).mouseup(function(e){ $(document).mouseup(function (e) {
var userSet_con = $(''+opt.elem+',.tableSelect'); var userSet_con = $('' + opt.elem + ',.tableSelect');
if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){ if (!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0) {
if (
$(e.target).hasClass('layui-layer-shade')
|| $(e.target).closest('.layui-layer').length != 0
|| $(e.target).hasClass('layui-layer-move')
) {
return false;
}
tableBox.remove(); tableBox.remove();
delete table.cache[tableName]; delete table.cache[tableName];
checkedData = []; checkedData = [];
@@ -262,7 +272,7 @@ layui.define(['table', 'jquery', 'form'], function (exports) {
var tableSelect = new tableSelect(); var tableSelect = new tableSelect();
//FIX 滚动时错位 //FIX 滚动时错位
if(window.top == window.self){ if (window.top == window.self) {
$(window).scroll(function () { $(window).scroll(function () {
tableSelect.hide(); tableSelect.hide();
}); });