Layui 设置多个穿梭框，并增加上移下移置顶置底功能

介绍

针对layui穿梭框进行了一些修改，增加上移下移置顶置底功能，设置了右侧框的排序功能，按序取值，按序加载的功能。

基于layui 2.5.4 ，致敬贤心大神。

样式

源码

<!DOCTYPE HTML>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/header.jsp"%>
<%@ include file="/common/headerbase.jsp"%>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="${ctx}/layui2.5.4/layui/css/layui.css"><style type="text/css">.widthheight {width:480px;height:340px;}body {overflow:auto;}body::-webkit-scrollbar {/*滚动条整体样式*/width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/height: 1px;}body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 13px;-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);background: #00BFFF;}body::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);border-radius: 13px;background: #E0FFFF;}.commonFather {margin-left:15px;margin-top:15px;width:490px;height:445px;border:solid 1px #dddddd;position:relative;}.title {font-size: 16px;text-align: center;font-weight: 900;font-family: serif;color: #037fd6;margin-bottom: 5px;margin-top:5px;}.marLef {margin-left:10px;}.buttonDiv {text-align:center;width:100%;height:40px;margin-top:7px;}.rightDiv {position:absolute;left:520px;}#ofForm {top:0px;}#ofDdto{top:462px;}#usingGrid {top:924px;}.layui-btn .layui-icon{font-size: 18px;height: 10px;line-height: 10px;display: block;}.layui-btnUpDownmax{margin-left: 0;padding: 0 10px;height: 30px;line-height: 30px;background-color: #5FB878;border-color: #5FB878;}.layui-btnUpDown {margin-left: 0;padding: 0 10px;height: 30px;line-height: 30px;background-color: #5FB878;border-color: #5FB878;}.upBtn {position: absolute;left: 217px;top: 110px;}.upMaxBtn {position: absolute;left: 227px;top: 60px;}.downBtn {position: absolute;left: 217px;top: 270px;}.downMaxBtn {position: absolute;left: 217px;top: 320px;}</style></head><body><div id="isDisplay"><input id="structureId" name="structureId" type="hidden" value="${structureId }"/><div id="grid" class="commonFather"><div class="title">选择列表字段</div><div id="gridTransfer" class="marLef"></div><div class="buttonDiv"><button type="button" class="layui-btn layui-btnUpDownmax upMaxBtn" onclick="moveUpMax('grid')"> <i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('grid')"> <i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('grid')"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('grid')"><i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-normal" onclick="saveChooseData('grid')">保存</button></div></div><div id="ofForm" class="commonFather rightDiv"><div class="title">选择表单字段</div><div id="ofFormTransfer" class="marLef"></div><div class="buttonDiv"><button type="button" class="layui-btn layui-btnUpDownmax upMaxBtn" onclick="moveUpMax('ofForm')"> <i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('ofForm')"> <i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('ofForm')"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('ofForm')"><i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-normal" onclick="saveChooseData('ofForm')">保存</button></div></div><div id="adSearch" class="commonFather"><div class="title">综合查询字段</div><div id="adSearchTransfer" class="marLef"></div><div class="buttonDiv"><button type="button" class="layui-btn layui-btnUpDownmax upMaxBtn" onclick="moveUpMax('adSearch')"> <i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('adSearch')"> <i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('adSearch')"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('adSearch')"><i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-normal" onclick="saveChooseData('adSearch')">保存</button></div></div><div id="ofDdto" class="commonFather rightDiv"><div class="title">选择追加携带字段</div><div id="ofDdtoTransfer" class="marLef"></div><div class="buttonDiv"><button type="button" class="layui-btn layui-btnUpDownmax upMaxBtn" onclick="moveUpMax('ofDdto')"> <i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('ofDdto')"> <i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('ofDdto')"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('ofDdto')"><i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-normal" onclick="saveChooseData('ofDdto')">保存</button></div></div><div id="usingForm" class="commonFather"><div class="title">检索功能中参与检索的字段</div><div id="usingFormTransfer" class="marLef"></div><div class="buttonDiv"><button type="button" class="layui-btn layui-btnUpDownmax upMaxBtn" onclick="moveUpMax('usingForm')"> <i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('usingForm')"> <i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('usingForm')"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('usingForm')"><i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-normal" onclick="saveChooseData('usingForm')">保存</button></div></div><div id="usingGrid" class="commonFather rightDiv"><div class="title">检索结果参与显示的字段</div><div id="usingGridTransfer" class="marLef"></div><div class="buttonDiv"><button type="button" class="layui-btn layui-btnUpDownmax upMaxBtn" onclick="moveUpMax('usingGrid')"> <i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('usingGrid')"> <i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('usingGrid')"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('usingGrid')"><i class="layui-icon"></i><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-normal" onclick="saveChooseData('usingGrid')">保存</button></div></div></div></body><%@ include file="/common/widgets.jsp"%><script type="text/javascript" src="${ctx}/layui2.5.4/layui/layui.js"></script><script type="text/javascript">function setData() {var allZDJson = {};var gridList = JSON.parse('${gridList}');allZDJson['gridList']=gridList;var ofFormList = JSON.parse('${ofFormList}');allZDJson['ofFormList']=ofFormList;var adSearchList = JSON.parse('${adSearchList}');allZDJson['adSearchList']=adSearchList;var ofDdtoList = JSON.parse('${ofDdtoList}');allZDJson['ofDdtoList']=ofDdtoList;var usingFormList = JSON.parse('${usingFormList}');allZDJson['usingFormList']=usingFormList;var usingGridList = JSON.parse('${usingGridList}');allZDJson['usingGridList']=usingGridList;var allYuanList = JSON.parse('${allYuanList}');allZDJson['allYuanList']=allYuanList;return allZDJson;}//转换源数据格式function formatData(data) {if(data == null || data.length == 0 || data[0] == null) {return null;  }var newData = [];for(var i = 0; i < data.length; i++) {/* {"value": "1", "title": "李白", "disabled": "", "checked": ""}, */var jData = {};jData['value']=data[i].id;jData['title']=data[i].esIdentifier;jData['disabled']="";jData['checked']="";newData.push(jData);}return newData;}//转换源数据中选中数据的格式function formatDataIsChecked(data) {if(data == null || data.length == 0 || data[0] == null) {return null;    }var newData = [];for(var i = 0; i < data.length; i++) {newData.push(data[i].idtag);}return newData;}var dataJson;$(function() {var dataFlag = "${dataFlag }";if(dataFlag == "NO") {layer.msg("请先在结构视图页面设置引用字段！");$("#isDispaly").css("display","none");}dataJson = setData();    })//防止无数据时，穿梭框重载改变页面function checkYUANData(dom) {var dataFlag = "${dataFlag }";if(dataFlag == "NO") {$("#"+dom).css("display","none");}}//加载穿梭框layui.use('transfer', function(){checkYUANData("grid");checkYUANData("ofForm");checkYUANData("adSearch");checkYUANData("ofDdto");checkYUANData("usingForm");checkYUANData("usingGrid");var transfer = layui.transfer;//渲染transfer.render({elem: '#gridTransfer',//绑定元素title:['源','目标'],showSearch:true,data: formatData(dataJson.allYuanList),id: 'gridTransfer', //定义索引value:formatDataIsChecked(dataJson.gridList),text: {none: '无数据', //没有数据时的文案searchNone: '无匹配数据' //搜索无匹配数据时的文案} });transfer.render({elem: '#ofFormTransfer',//绑定元素title:['源','目标'],showSearch:true,data: formatData(dataJson.allYuanList),id: 'ofFormTransfer', //定义索引value:formatDataIsChecked(dataJson.ofFormList),text: {none: '无数据', //没有数据时的文案searchNone: '无匹配数据' //搜索无匹配数据时的文案} });transfer.render({elem: '#adSearchTransfer',//绑定元素title:['源','目标'],showSearch:true,data: formatData(dataJson.allYuanList),id: 'adSearchTransfer', //定义索引value:formatDataIsChecked(dataJson.adSearchList),text: {none: '无数据', //没有数据时的文案searchNone: '无匹配数据' //搜索无匹配数据时的文案} });transfer.render({elem: '#ofDdtoTransfer',//绑定元素title:['源','目标'],showSearch:true,data: formatData(dataJson.allYuanList),id: 'ofDdtoTransfer', //定义索引value:formatDataIsChecked(dataJson.ofDdtoList),text: {none: '无数据', //没有数据时的文案searchNone: '无匹配数据' //搜索无匹配数据时的文案} });transfer.render({elem: '#usingFormTransfer',//绑定元素title:['源','目标'],showSearch:true,data: formatData(dataJson.allYuanList),id: 'usingFormTransfer', //定义索引value:formatDataIsChecked(dataJson.usingFormList),text: {none: '无数据', //没有数据时的文案searchNone: '无匹配数据' //搜索无匹配数据时的文案} });transfer.render({elem: '#usingGridTransfer',//绑定元素title:['源','目标'],showSearch:true,data: formatData(dataJson.allYuanList),id: 'usingGridTransfer', //定义索引value:formatDataIsChecked(dataJson.usingGridList),text: {none: '无数据', //没有数据时的文案searchNone: '无匹配数据' //搜索无匹配数据时的文案} });setRightPosition(dataJson,"grid");setRightPosition(dataJson,"ofForm");setRightPosition(dataJson,"adSearch");setRightPosition(dataJson,"ofDdto");setRightPosition(dataJson,"usingForm");setRightPosition(dataJson,"usingGrid");});//穿梭框加载时不会按照设定的顺序来，需要删除重载function setRightPosition(json,dom) {var index = $("#"+dom+ " ul").eq(1); var dataFlag = dom + "List";var list = json[dataFlag];var str = "";for(var i = 0; i < list.length; i++) {var inObj = list[i];var tagName = inObj.tagName;var htmlStr = $(index).children().children("input[title='"+tagName+"']").parent().prop("outerHTML");str += htmlStr;}$("#"+dom+" ul").eq(1).empty();$("#"+dom+" ul").eq(1).append(str);}//上移function moveUp(dom) {//找到选中的livar index = $("#"+dom+" ul" ).eq(1).find('.layui-form-checked').parent(); if(typeof(index[0]) == "undefined") {layer.msg("请选中后，再进行移位操作");return;}for(var i=0;i<index.length;i++){if(index.eq(i).index()!=0){index.eq(i).prev().before(index.eq(i));}}                 }//置顶function moveUpMax(dom) {//找到选中的livar index = $("#"+dom+" ul" ).eq(1).find('.layui-form-checked').parent(); if(typeof(index[0]) == "undefined") {layer.msg("请选中后，再进行移位操作");return;}for(var i=index.length-1;i>=0;i--){do{index.eq(i).prev().before(index.eq(i));}while(index.eq(i).index()!=0)}                }//下移function moveDown(dom) {//找到选中的livar index = $("#"+dom+" ul" ).eq(1).find('.layui-form-checked').parent(); if(typeof(index[0]) == "undefined") {layer.msg("请选中后，再进行移位操作");return;}for(var i=index.length-1;i>=0;i--){if(index.eq(i).index()!=($("#"+dom+" ul li").length-1)){index.eq(i).next().after(index.eq(i));}}                }//置底function moveDownMax(dom) {//找到选中的livar index = $("#"+dom+" ul" ).eq(1).find('.layui-form-checked').parent(); if(typeof(index[0]) == "undefined") {layer.msg("请选中后，再进行移位操作");return;}for(var i=0;i<index.length;i++){do{index.eq(i).next().after(index.eq(i));}while(index.eq(i).index()!=($("#"+dom+" ul").eq(1).find("li").length-1))}                  }//获取并保存数据function saveChooseData(dom) {var structureId = "${structureId }";var ul = $("#"+ dom).find("ul").eq(1);var input = $(ul).find("input");var saveArr = [];for(var i = 0; i < input.length; i++) {var inJson = {};inJson["esorder"] = i+1;inJson["idstructure"] = structureId;inJson["idtag"] = input[i].value;saveArr.push(inJson);}var saveObj = {};saveObj["data"] = JSON.stringify(saveArr);saveObj["tableFlag"] = dom;saveObj["idstructure"] = structureId;console.log(saveObj);if(saveArr.length == 0) {layer.confirm('确定删除目标数据？', {icon: 3, title:'提示'}, function(index){saveZDXZData(saveObj);layer.close(index);}); } else {saveZDXZData(saveObj);}}//保存数据function saveZDXZData(obj) {obj = $.ajax({url:"${ctx}/xxx_xxxxxxxxxxx.do",type:"post",async:true,cache: false,dataType:"json",data:obj,success:function(data){var flag = data.flag;if(flag == "success") {layer.msg("修改成功");} else {layer.msg("修改失败");}},error:function(){layer.msg("系统错误请重试");}  });}</script>
</html>

Layui 设置多个穿梭框，并增加上移下移置顶置底功能相关推荐

maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听（点击面出弹框）、右键菜单、绘制mark、锁定视角
maptalks常见操作--图层置顶置底.添加清空图层.添加标注.切换底图.添加缩放工具.事件监听(点击面出弹框).右键菜单.绘制mark.锁定视角 1.图层置顶置底 layer.show().br ...
html评论置顶功能,微信公众号精选留言评论怎么置顶显示？功能在哪里设置？...
微信公众号精选留言怎么置顶?微信公众号留言功能新增了置顶精选留言的设置,那么微信公众号留言功能在哪里设置呢?下文小乐哥给大家介绍一下! 微信公众号精选留言怎么置顶? 微信公众平台悄然上线了一个新功能, ...
vue+elementui穿梭框+上下移动功能
elementUI组件样式: 需要的样式:增加上移.下移功能下面就看一下的我实现方法(希望大家有更好的方法) 1.首先在底部内容区增加需要的功能按钮,如:上移,下移, 确定,取消[这里是为了数据操作 ...
ThinkPHP5 集成使用 Layui 穿梭框（transfer）控件
背景最近在做后台业务处理时,接触到了 Layui 中的一个穿梭框 transfer 控件的使用: 个人觉得效果还是挺满意的: 但是毕竟是在 ThinkPHP5 框架下进行的集成,不能不适合部分同行理 ...
vue数据穿梭框自定义排序
吐槽最近项目使用vue+element-ui做后台,其中有个功能用到了数据穿梭框,刚好element里有,原本相安无事(哈哈),突然老大说要对选择中的列来个自定义排序(当时我就老不乐意了,我一个后端 ...
电脑桌面云便签怎么通过便签快捷键设置窗口置顶或置底？
电脑桌面云便签Windows版既支持设置透明皮肤颜色,也可以使用便签快捷键,快捷打开云便签的某些功能或进行相关设置.那么,电脑桌面云便签怎么通过便签快捷键进行窗口置顶或置底的快捷操作设置呢? 一.打开 ...
wordpress如何设置文章置顶以及区分置顶文章与普通文章
很多博客都有自己的置顶文章,在默认情况下WP对置顶文章只是将它们的位置排在前面,除了位置差异外,跟其他文章是没有任何区别的.那我们怎样才能将它们区别开来呢?我这里有几种方法: 一.在WordPres ...
Elemet-UI 中利用穿梭框对表格列进行动态设置
Elemet-UI 中利用穿梭框对表格列进行动态设置第一步引入控件在需要表格设置的文件下引入公共穿梭框控件 import Transfer from '../components/common/ ...
Layui组件: transfer穿梭框
定义穿梭框容器 <div id="transferDiv" style="width: 600px;height: 400px;"></div ...

Layui 设置多个穿梭框，并增加上移下移置顶置底功能

Layui 设置多个穿梭框，并增加上移下移置顶置底功能

介绍

样式

源码

Layui 设置多个穿梭框，并增加上移下移置顶置底功能相关推荐

最新文章

热门文章