From 025fd18fed6c9f4140fdcdf25675640de173317a Mon Sep 17 00:00:00 2001 From: fs-danaus <danaus314@qq.com> Date: 星期五, 16 六月 2023 15:05:42 +0800 Subject: [PATCH] 表格多选js库文件 --- WebRoot/js/selectedGrid/img/close.png | 0 WebRoot/js/selectedGrid/js/zxxDrag.js | 148 +++++++++++++ WebRoot/js/selectedGrid/css/main.css | 192 +++++++++++++++++ WebRoot/js/selectedGrid/img/open.png | 0 WebRoot/js/selectedGrid/js/selectGrid.js | 261 +++++++++++++++++++++++ WebRoot/js/selectedGrid/img/close-icon.png | 0 6 files changed, 601 insertions(+), 0 deletions(-) diff --git a/WebRoot/js/selectedGrid/css/main.css b/WebRoot/js/selectedGrid/css/main.css new file mode 100644 index 0000000..7790e4e --- /dev/null +++ b/WebRoot/js/selectedGrid/css/main.css @@ -0,0 +1,192 @@ +锘�.layui-layer.layui-layer-page{ + border-radius: 10px; +} +/* 鍙嫋鎷藉浘鏍� */ +.selected-icon-container{ + cursor: pointer; + position: absolute; + right: 70px; + top: 10px; + width: 70px; + height: 70px; +} +.icon-liebiao-open{ + display: inline-block; + width: 66px; + height: 66px; + border-radius: 66px; + /* cursor: pointer; */ + background-image: url(../img/open.png) ; + background-size: 66px 66px; +} +.icon-open{ + background-image: url(../img/open.png) ; +} +.icon-close{ + background-image: url(../img/close-icon.png) ; +} +.icon-dot{ + display: inline-block; + color: #fff; + width: 22px; + height: 22px; + border-radius: 22px; + background-color: #fe2323; + line-height: 22px; + text-align: center; + font-size: 12px; + position: absolute; + right: 2px; + top: 0px; + font-style: normal; +} + + +/* 閫氱敤鏍峰紡 */ +.absolute{ + position: absolute; +} +.relative{ + position: relative; + z-index: 1000; +} +.selected-list-content{ + padding: 30px 20px; +} +.pointer{ + cursor: pointer; + background-color: #fff; + padding: auto; +} +.margin-auto{ + margin: auto; +} +.text-center { + text-align: center; +} +.smark{ + color: #116eab; +} +.hide{ + display: none; +} +.font-size-20{ + font-size: 20px; +} +.margin-top-10{ + margin-top: 10px; +} +.padding-top-10{ + padding-top: 10px; +} + +.flex-box{ + display: flex; +} + +.flex-row{ + display: flex; + flex-direction: row; + align-items: center; +} +.flex-col{ + display: flex; + flex-direction: column; +} +.flex-jc-center{ + justify-content: center; +} +.flex-ai-center{ + align-items: center; +} +.flex-jc-around{ + justify-content: space-around; +} +.flex-jc-start{ + justify-content: flex-start; +} +.text-left{ + text-align: left; +} + + + +/* 寮圭獥 */ +.selected-list-header{ + position: relative; +} +.selected-list-header i.icon-liebiao-close{ + right: 10px; + top: -26px; + background-image: url(../img/close.png); + width: 22px; + height: 22px; +} +.selected-list-table-nav .selected-list-li { + cursor: pointer; + flex: 1; +} +.selected-list-layer .layui-layer-page .layui-layer-content{ + overflow: visible; +} +.selected-list-layer .layui-layer-title{ + cursor: move; + background-color: white; +} +.selected-list-table-nav{ + justify-content: space-around; + border-bottom: 1px solid #f9f9f9; +} +.selected-list-table-nav .selected-list-li.selected span{ + border-bottom: 2px solid #4b4b4b; +} +.selected-list-table-nav .desc-span{ + /*margin-bottom: 10px;*/ + display: inline-block; +} + +.selected-list-table{ + padding-top: 0px; + width: 742px; +} +.border-top{ + border-top: 1px solid #f9f9f9; +} +.selected-list-container-content{ + overflow-y: auto; + height: 500px; + margin-right: 10px; +} +.selected-list-container-content::-webkit-scrollbar{/*婊氬姩鏉℃暣浣撴牱寮�*/ + width: 6px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ + height: 1px; +} + +.selected-list-container-content::-webkit-scrollbar-thumb{/*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ + border-radius: 10px; + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); + background: #9a9a9a; +} +.selected-list-container-content::-webkit-scrollbar-track{/*婊氬姩鏉¢噷闈㈣建閬�*/ + background: transparent; +} +.selected-list-container .layui-btn-confirm{ + background-color: #116eab; + border-radius: 10px; +} +.selected-list-table-container{ + padding: 15px 0; +} +.selected-list-th{ + padding: 10px 0; + background-color: #f3f3f5; +} +.selected-list-ul{ + padding-top: 10px; + padding-left: 0px; +} +.selected-list-tr{ + flex: 1; + text-align: center; + font-size: 14px; +} diff --git a/WebRoot/js/selectedGrid/img/close-icon.png b/WebRoot/js/selectedGrid/img/close-icon.png new file mode 100644 index 0000000..e5f5664 --- /dev/null +++ b/WebRoot/js/selectedGrid/img/close-icon.png Binary files differ diff --git a/WebRoot/js/selectedGrid/img/close.png b/WebRoot/js/selectedGrid/img/close.png new file mode 100644 index 0000000..da64b7b --- /dev/null +++ b/WebRoot/js/selectedGrid/img/close.png Binary files differ diff --git a/WebRoot/js/selectedGrid/img/open.png b/WebRoot/js/selectedGrid/img/open.png new file mode 100644 index 0000000..2257dc3 --- /dev/null +++ b/WebRoot/js/selectedGrid/img/open.png Binary files differ diff --git a/WebRoot/js/selectedGrid/js/selectGrid.js b/WebRoot/js/selectedGrid/js/selectGrid.js new file mode 100644 index 0000000..6e94ff4 --- /dev/null +++ b/WebRoot/js/selectedGrid/js/selectGrid.js @@ -0,0 +1,261 @@ +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; //鏄惁姝e湪鎷栨嫿 + selectGridRowsDom.isOpen = false;//鏄惁宸茬粡鎵撳紑閫夋嫨鍒楄〃寮圭獥 + selectGridRowsDom.selectedListLayerIndex = null ;// 閫夋嫨鍒楄〃寮圭獥鐨刬ndex + selectGridRowsDom.selectedData =[]; //閫変腑鐨勫垪琛ㄦ暟鎹� + selectGridRowsDom.selectFields="";//涓夌偣澶栬〃瀛楁鍒楄〃 + selectGridRowsDom.refGrid=null;//褰撳墠寮曠敤鐨刧rid + // 鎵撳紑閫夋嫨鍒楄〃寮圭獥 + 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); + if(num<4){ + num=8; + } + var htmlTitle='<ul class="selected-list-th flex-row" style="width:'+num*100+'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); + } + // 鍦ㄥ脊绐楀唴鐢熸垚椤甸潰宸查�夊垪琛ㄦ暟鎹瓺om + selectGridRowsDom.createSelectedListDom=function(data,grid) { + if(grid!=undefined) selectGridRowsDom.refGrid=grid; + var html = ''; + var parm=selectGridRowsDom.selectFields.split(";"); + var num=selectGridRowsDom.getFieldsLength(parm); + if(num<4){ + num=8; + } + 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:'+num*100+'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; + // 瀵筼ffsetTop杩涜鍒ゆ柇锛屽鏋滆秴鍑哄睆骞曢珮搴︼紝鍒欒缃负璐村簳鐨勪綅缃� + if (offsetTop + iconHeight + layerHeight > $(window).height()) { + offsetTop = $(window).height() - layerHeight - iconHeight; + } + // 瀵筼ffsetLeft杩涜鍒ゆ柇锛屽鏋滀负璐熸暟锛屽垯璁剧疆涓�0 + if (offsetLeft < 0) { + offsetLeft = 0; + } + return { + top: offsetTop, + left: offsetLeft + }; + } + }) \ No newline at end of file diff --git a/WebRoot/js/selectedGrid/js/zxxDrag.js b/WebRoot/js/selectedGrid/js/zxxDrag.js new file mode 100644 index 0000000..3fbada2 --- /dev/null +++ b/WebRoot/js/selectedGrid/js/zxxDrag.js @@ -0,0 +1,148 @@ +/*! + * @description 绠�鍗曠殑鎷栨嫿鏁堟灉锛屽吋瀹� IE 鍜� 绉诲姩绔紝甯﹁竟鐣屽垽鏂� + * 鐩稿叧鍐呭锛歨ttps://www.zhangxinxu.com/wordpress/?p=683 + * @author zhangxinxu(.com) + * @create 2021-12-03 + * @license MIT +**/ + +/** + * @param {Element} eleBar 鎷栨嫿瑙﹀彂鍏冪礌 + * @param {Object} options 鍙�夊弬鏁� + * @returns + */ +var zxxDrag = function (eleBar, options) { + if (!eleBar) { + return; + } + // 榛樿鏁版嵁 + var defaults = { + target: eleBar, + bounding: window, + edgeLock: true, + onMove: function () {}, + onEnd: function () {} + }; + + options = options || {}; + + var params = {}; + for (var key in defaults) { + if (typeof options[key] != 'undefined') { + params[key] = options[key]; + } else { + params[key] = defaults[key]; + } + } + + // 鎷栨嫿鍏冪礌 + var eleTarget = params.target; + // 闄愬埗鑼冨洿 + var bounding = params.bounding; + var objBounding = bounding; + + // 浜嬩欢绫诲瀷澶勭悊 + var objEventType = { + start: 'mousedown', + move: 'mousemove', + end: 'mouseup' + }; + + if ('ontouchstart' in document) { + objEventType = { + start: 'touchstart', + move: 'touchmove', + end: 'touchend' + }; + } + + // 鍧愭爣瀛樺偍鏁版嵁 + var store = {}; + eleBar.addEventListener(objEventType.start, function (event) { + // IE 鎷栨嫿鍙兘鎷栦笉鍔ㄧ殑澶勭悊 + if (!window.WeakMap || typeof document.msHidden != 'undefined') { + event.preventDefault(); + } + // 鍏奸【绉诲姩绔� + if (event.touches && event.touches.length) { + event = event.touches[0]; + } + store.y = event.pageY; + store.x = event.pageX; + store.isMoving = true; + store.top = parseFloat(getComputedStyle(eleTarget).top) || 0; + store.left = parseFloat(getComputedStyle(eleTarget).left) || 0; + + if (params.edgeLock === true && bounding) { + if (bounding === window) { + objBounding = { + left: 0, + top: 0, + bottom: innerHeight, + right: Math.min(innerWidth, document.documentElement.clientWidth) + }; + } else if (bounding.tagName) { + objBounding = bounding.getBoundingClientRect(); + } + + // 鎷栨嫿鍏冪礌鐨� bounding 浣嶇疆 + var objBoundingTarget = eleTarget.getBoundingClientRect(); + + // 鍙Щ鍔ㄨ寖鍥� + store.range = { + y: [objBounding.top - objBoundingTarget.top, objBounding.bottom - objBoundingTarget.bottom], + x: [objBounding.left - objBoundingTarget.left, objBounding.right - objBoundingTarget.right] + }; + } + }); + document.addEventListener(objEventType.move, function (event) { + if (store.isMoving) { + event.preventDefault(); + // 鍏奸【绉诲姩绔� + if (event.touches && event.touches.length) { + event = event.touches[0]; + } + + var distanceY = event.pageY - store.y; + var distanceX = event.pageX - store.x; + + // 杈圭晫鐨勫垽鏂笌chuli + if (params.edgeLock === true && bounding) { + var minX= Math.min.apply(null, store.range.x); + var maxX = Math.max.apply(null, store.range.x); + var minY= Math.min.apply(null, store.range.y); + var maxY = Math.max.apply(null, store.range.y); + + if (distanceX < minX) { + distanceX = minX; + } else if (distanceX > maxX) { + distanceX = maxX; + } + + if (distanceY < minY) { + distanceY = minY; + } else if (distanceY > maxY) { + distanceY = maxY; + } + } + + var top = store.top + distanceY; + var left = store.left + distanceX; + + eleTarget.style.top = top + 'px'; + eleTarget.style.left = left + 'px'; + + // 鍥炶皟 + params.onMove(left, top); + } + }, { + passive: false + }); + document.addEventListener(objEventType.end, function () { + if (store.isMoving) { + store.isMoving = false; + + params.onEnd(); + } + }); +}; -- Gitblit v1.8.0