var selectGridRowsDom = {}
|
$(function () {
|
selectGridRowsDom.openSelectedList=$('.icon-liebiao-open'); //打开选择列表
|
selectGridRowsDom.closeSelectedList=$('.icon-liebiao-close'); //关闭选择列表
|
selectGridRowsDom.iconContainer=$('.selected-icon-container'); //列表图标容器
|
selectGridRowsDom.layer=$('.selected-list-container'); //弹窗
|
selectGridRowsDom.isDrag=false; //是否正在拖拽
|
selectGridRowsDom.isOpen = false;//是否已经打开选择列表弹窗
|
selectGridRowsDom.selectedListLayerIndex = null ;// 选择列表弹窗的index
|
selectGridRowsDom.selectedData =[]; //选中的列表数据
|
selectGridRowsDom.selectFields="";//三点外表字段列表
|
selectGridRowsDom.refGrid=null;//当前引用的grid
|
// 打开选择列表弹窗
|
selectGridRowsDom.openSelectedList.on('mouseup', function (e) {
|
if (selectGridRowsDom.isDrag || selectGridRowsDom.isOpen
|
||selectGridRowsDom.selectedData.length==0
|
) return;
|
selectGridRowsDom.selectedListLayerIndex = layer.open({
|
type: 1,
|
area: ['800px', '610px'],
|
closeBtn: 0,
|
isOutAnim: false,
|
// offset: ['100px', '650px'],
|
title: ['已选择0条记录', 'font-size:18px;text-align:center;font-weight:600;'],
|
resize: false,
|
fixed: false,
|
shade: 0,
|
content: $('.selected-list-container'),
|
move: false,
|
success: function (layero, index) {
|
// 设置弹窗位置
|
var layerPosition = selectGridRowsDom.getLayerPosition();
|
layer.style(index, {
|
top: layerPosition.top + 'px',
|
left: layerPosition.left + 'px',
|
});
|
selectGridRowsDom.isOpen = true;
|
setTimeout(function () {
|
selectGridRowsDom.openSelectedList.removeClass('icon-open');
|
selectGridRowsDom.openSelectedList.addClass('icon-close');
|
}, 200);
|
// 获取已经选中的列表数据，渲染到弹窗中
|
selectGridRowsDom.createSelectedListDom(selectGridRowsDom.selectedData);
|
selectGridRowsDom.updateSelectedListLength(index);
|
// 为弹窗添加拖拽事件
|
addDragLayerEvent();
|
// 弹窗内删除选择列表记录，同时取消页面内选择列表记录的选中状态
|
$('.layui-layer-content').on('click', '.deleteTableRow', function () {
|
var pkObj = $(this).data('index').split(";");//主键数据
|
var delObj={};
|
var curObj=null;
|
selectGridRowsDom.selectedData.forEach(function(item,index){
|
var flag=false;
|
var obj1="";
|
var obj2="";
|
for(var i=0;i<pkObj.length;i++){
|
if(pkObj[i]=="") continue;
|
var obj=pkObj[i].split(":");
|
delObj[obj[0]]=obj[1];
|
obj1+=obj[1]+"";
|
obj2+=item[obj[0]]+"";
|
}
|
if(obj1!=""&&obj1==obj2){//比较由主键串起来的内容，如果一样表明是同一个
|
curObj=item;
|
selectGridRowsDom.selectedData.remove(item);
|
return;
|
}
|
});
|
$(this).parents('.selected-list-data-item').remove();
|
selectGridRowsDom.updateSelectedListLength();
|
//取消表格选择
|
selectGridRowsDom.refGrid.unSelectRow(delObj,curObj);
|
});
|
}
|
|
});
|
});
|
|
|
// 图标拖拽移动
|
zxxDrag(document.querySelector('.icon-liebiao-open'), {
|
target: document.querySelector('.selected-icon-container'),
|
onMove: function (e) {
|
selectGridRowsDom.isDrag = true;
|
selectGridRowsDom.openSelectedList.css({
|
cursor: 'move'
|
});
|
},
|
onEnd: function (e) {
|
selectGridRowsDom.isDrag = false;
|
selectGridRowsDom.openSelectedList.css({
|
cursor: 'pointer'
|
});
|
}
|
});
|
|
|
// 选择列表弹窗选好了按钮点击获取选中的列表数据
|
$('#btn-confirm').on('click', function () {
|
var grid=selectGridRowsDom.refGrid;
|
grid.dbPopCont(grid.FRow ? grid.FRow : grid.ARow,null,true);
|
closeSelectedListLayer();
|
});
|
$('#btn-close').on('click', function () {
|
closeSelectedListLayer();
|
});
|
// 选择列表弹窗右上角按钮点击关闭弹窗
|
selectGridRowsDom.closeSelectedList.on('click', function () {
|
closeSelectedListLayer();
|
});
|
selectGridRowsDom.getFieldsLength=function(parm){
|
//取得需要显示的字段，因为有可能会有重复字段，所以需要过滤
|
var num=0;
|
var tempTile={};
|
var grid=selectGridRowsDom.refGrid;
|
for(var i=0;i<parm.length;i++){
|
if(grid.Cols[parm[i]]!=undefined&&grid.Cols[parm[i]].Visible!=undefined&&grid.Cols[parm[i]].Visible==0) continue;
|
if(tempTile[parm[i]]!=undefined) continue;
|
tempTile[parm[i]]=1;
|
num++;
|
}
|
return num;
|
}
|
//加标题
|
selectGridRowsDom.createSelectedListTitle=function(grid) {
|
selectGridRowsDom.refGrid=grid;
|
selectGridRowsDom.selectFields=grid.gridInfo().formP.toLowerCase();
|
var parm=selectGridRowsDom.selectFields.split(";");
|
var tempTile={};
|
var num=selectGridRowsDom.getFieldsLength(parm);
|
var width=(num+1)*100;
|
if(width<800){
|
width=800;
|
}
|
var htmlTitle='<ul class="selected-list-th flex-row" style="width:'+width+'px;"><li class="selected-list-tr">操作</li>';
|
for(var i=0;i<parm.length;i++){
|
if(grid.Cols[parm[i]]!=undefined&&grid.Cols[parm[i]].Visible!=undefined&&grid.Cols[parm[i]].Visible==0) continue;
|
if(tempTile[parm[i]]!=undefined) continue;
|
htmlTitle+='<li class="selected-list-tr">'+grid.Header[parm[i]]+'</li>';
|
tempTile[parm[i]]=1;
|
}
|
htmlTitle+="</ul>";
|
$('#gridTitle').html(htmlTitle);
|
}
|
// 在弹窗内生成页面已选列表数据Dom
|
selectGridRowsDom.createSelectedListDom=function(data,grid) {
|
if(grid!=undefined) selectGridRowsDom.refGrid=grid;
|
var html = '';
|
var parm=selectGridRowsDom.selectFields.split(";");
|
var num=selectGridRowsDom.getFieldsLength(parm);
|
var width=(num+1)*100;
|
if(width<800){
|
width=800;
|
}
|
var gt=selectGridRowsDom.refGrid;
|
var pkey=gt.primeKey.split(";");//表格的主键
|
data.forEach(function (item, index) {
|
var pkObj="";//主键数据
|
for(var k=0;k<pkey.length;k++){
|
if(pkey[k]!=""){
|
if(pkObj==""){
|
pkObj+=pkey[k]+":"+item[pkey[k]];
|
}else{
|
pkObj+=";"+pkey[k]+":"+item[pkey[k]];
|
}
|
|
}
|
}
|
html += '<li class="selected-list-tr selected-list-data-item">' +
|
'<ul class="selected-list-ul flex-row" style="width:'+width+'px;margin:0;">' +
|
'<li class="selected-list-tr pointer smark deleteTableRow" data-index="' +
|
pkObj + '">[取消]</li>'
|
var tempTile={};
|
for(var i=0;i<parm.length;i++){
|
if(gt.Cols[parm[i]]!=undefined&>.Cols[parm[i]].Visible!=undefined&>.Cols[parm[i]].Visible==0) continue;
|
var value=item[parm[i]];
|
if(tempTile[parm[i]]!=undefined) continue;
|
if(value!=""&>.Cols[parm[i]].Type == "Enum"){
|
|
//下拉框情况需要转换成显示值输出
|
var keys = gt.Cols[parm[i]].EnumKeys.split("|");
|
var val = gt.Cols[parm[i]].Enum.split("|");
|
var indexd = null;
|
var isFound=false;
|
for (var sx = 0; sx < val.length; sx++) {
|
if (keys[sx] == value) {//9802设置是实际值,应该是取实际值
|
indexd = sx;
|
isFound=true;
|
break;
|
}
|
}
|
if(!isFound){
|
for (var sx = 0; sx < val.length; sx++) {
|
if (val[sx] == value) {//9802设置是显示值,应该是取显示值
|
indexd = sx;
|
break;
|
}
|
}
|
}
|
if(indexd!=null&&indexd!=-1){
|
value=val[indexd];
|
}
|
}
|
html += '<li class="selected-list-tr">' + value + '</li>' ;
|
tempTile[parm[i]]=1;
|
}
|
html += '</ul></li>';
|
});
|
$('.layui-layer-content .selected-list-tbody').html(html);
|
}
|
|
function closeSelectedListLayer() {
|
layer.close(selectGridRowsDom.selectedListLayerIndex);
|
selectGridRowsDom.isOpen = false;
|
selectGridRowsDom.openSelectedList.removeClass('icon-close');
|
selectGridRowsDom.openSelectedList.addClass('icon-open');
|
}
|
|
// 为弹窗标题添加拖拽事件
|
function addDragLayerEvent() {
|
zxxDrag(document.querySelector('.selected-list-layer .layui-layer-title'), {
|
target: document.querySelector('.layui-layer.layui-layer-page'),
|
});
|
}
|
|
// 页面更新已选列表数据长度
|
selectGridRowsDom.updateSelectedListLength=function(index) {
|
if (index && typeof index == 'number') {
|
selectGridRowsDom.selectedListLayerIndex = index;
|
}
|
var title = '已选择' + selectGridRowsDom.selectedData.length + '条记录';
|
layer.title(title, selectGridRowsDom.selectedListLayerIndex);
|
$('.selected-icon-container .icon-dot').text(selectGridRowsDom.selectedData.length);
|
// 如果选中的列表数据长度大于0，显示红点
|
if (selectGridRowsDom.selectedData.length > 0) {
|
$('.selected-icon-container .icon-dot').show();
|
} else {
|
$('.selected-icon-container .icon-dot').hide();
|
}
|
}
|
|
// 计算弹窗的位置
|
selectGridRowsDom.getLayerPosition=function() {
|
var layerWidth = selectGridRowsDom.layer.innerWidth();
|
var layerHeight = selectGridRowsDom.layer.innerHeight();
|
var iconWidth = selectGridRowsDom.iconContainer.innerWidth();
|
var iconHeight = selectGridRowsDom.iconContainer.innerHeight();
|
var offsetTop = selectGridRowsDom.iconContainer.offset().top;
|
var offsetLeft = selectGridRowsDom.iconContainer.offset().left - layerWidth + iconWidth;
|
// 对offsetTop进行判断，如果超出屏幕高度，则设置为贴底的位置
|
if (offsetTop + iconHeight + layerHeight > $(window).height()) {
|
offsetTop = $(window).height() - layerHeight - iconHeight;
|
}
|
// 对offsetLeft进行判断，如果为负数，则设置为0
|
if (offsetLeft < 0) {
|
offsetLeft = 0;
|
}
|
return {
|
top: offsetTop,
|
left: offsetLeft
|
};
|
}
|
})
|
