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

最新推荐文章于 2024-07-24 23:16:01 发布
最新推荐文章于 2024-07-24 23:16:01 发布
阅读量5.2k 收藏 7
点赞数 2
分类专栏： layui 文章标签： layui 穿梭框 上移下移置顶置底
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Richard_reallife/article/details/95597971
版权

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">&#xe619;</i>
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('grid')"> 
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('grid')">
						<i class="layui-icon">&#xe61a;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('grid')">
						<i class="layui-icon">&#xe61a;</i>
						<i class="layui-icon">&#xe61a;</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">&#xe619;</i>
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('ofForm')"> 
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('ofForm')">
						<i class="layui-icon">&#xe61a;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('ofForm')">
						<i class="layui-icon">&#xe61a;</i>
						<i class="layui-icon">&#xe61a;</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">&#xe619;</i>
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('adSearch')"> 
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('adSearch')">
						<i class="layui-icon">&#xe61a;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('adSearch')">
						<i class="layui-icon">&#xe61a;</i>
						<i class="layui-icon">&#xe61a;</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">&#xe619;</i>
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('ofDdto')"> 
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('ofDdto')">
						<i class="layui-icon">&#xe61a;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('ofDdto')">
						<i class="layui-icon">&#xe61a;</i>
						<i class="layui-icon">&#xe61a;</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">&#xe619;</i>
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('usingForm')"> 
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('usingForm')">
						<i class="layui-icon">&#xe61a;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('usingForm')">
						<i class="layui-icon">&#xe61a;</i>
						<i class="layui-icon">&#xe61a;</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">&#xe619;</i>
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown upBtn" onclick="moveUp('usingGrid')"> 
						<i class="layui-icon">&#xe619;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDown downBtn" onclick="moveDown('usingGrid')">
						<i class="layui-icon">&#xe61a;</i>
					</button>
					<button type="button" class="layui-btn layui-btnUpDownmax downMaxBtn" onclick="moveDownMax('usingGrid')">
						<i class="layui-icon">&#xe61a;</i>
						<i class="layui-icon">&#xe61a;</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) {
			//找到选中的li
			var 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) {
			//找到选中的li
			var 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) {
			//找到选中的li
			var 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) {
			//找到选中的li
			var 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>
Richard_reallife
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
树状图形式的穿梭框
前端技术
07-11 1万+
废话少说直接上代码&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;jQuery轻量级树状菜单插件代码&lt;/title&gt;&lt;link href="jquery.treemenu.css" rel="stylesheet&q
PHP 实现上移下移置顶功能
weishuo110的博客
05-16 2631
1.数据库：idint(11)  否无sortint(11)  否1排序topint(1)  否1是否置顶 1为不置顶，2为置顶2.视图：sortint(11)  否1排序&lt;div class="layui-form news_list"&gt; &lt;table class="layui-table" lay-filter="test" &gt; ...
layui 穿梭框transfer组件 数据data用ajax来获取
php菜鸟技术天地
06-20 143
【代码】layui 穿梭框组件 数据data用ajax来获取。
vue 表格嵌套表格 实现上移下移置顶置底
陈怂怂的博客
04-07 1966
vue 中实现上移下移置顶置底排序 1.使用数组splice方法交换位置实现上移、下移功能 2.使用数组splice、unshift、push方法实现置顶、置底功能 主要就是以下代码： // 置顶 handleTop(index, row, type) { // 将要置顶的元素存储后删除 const temp = this.tableData.splice(index, 1)[0]; // 将元素unshift到数组第一位 this.table
java数据置顶置低_在有序数据表中实现多记录上移下移置顶置底算法思路
weixin_39604685的博客
02-24 705
引言数据库应用中常需要在一个有序数据子集中，对指定的若干条记录进行上下移动。例如，管理员需要对新闻列表中的若干条新闻置顶，考试出卷时需要对选定题目进行上下移动重排顺序，等等。总的应该场景在数据表中可以概括为如下模型：数据表 TblData(id,fid,rank)，id表示记录的唯一标识，fid指记录的父节点，rank代表父节点下兄弟的前后顺序，依次从1递增，没有空隙。问题是要对相同fid下选中的...
java链表实现列表数据上移下移_在有序数据表中实现多记录上移下移置顶置底算法思路...
weixin_32226023的博客
02-25 335
引言数据库应用中常需要在一个有序数据子集中，对指定的若干条记录进行上下移动。例如，管理员需要对新闻列表中的若干条新闻置顶，考试出卷时需要对选定题目进行上下移动重排顺序，等等。总的应该场景在数据表中可以概括为如下模型：数据表 TblData(id,fid,rank)，id表示记录的唯一标识，fid指记录的父节点，rank代表父节点下兄弟的前后顺序，依次从1递增，没有空隙。问题是要对相同fid下选中的...
数组选中某一行或多行实现上移下移置顶置底
m0_72873795的博客
05-16 62
上移方法下移方法置顶方法置底方法。
前端数组元素上移下移置顶和置底
weixin_38355349的博客
04-15 943
遇到个表格列上下一定，然后确定保存移动后的位置，这就要用到前端数组移动，然后后端保存移动后的数据。 自己写了个上下移动： function upOrdown(arr, index, type="up") { if(type==="up"){ const current = arr[index]; const perv = arr[index-1]; arr[index-1]= current; arr[index] = perv; }else{ const current = arr
在有序数据表中实现多记录上移下移置顶置底算法思路
weixin_34189116的博客
02-23 724
引言 数据库应用中常需要在一个有序数据子集中，对指定的若干条记录进行上下移动。例如，管理员需要对新闻列表中的若干条新闻置顶，考试出卷时需要对选定题目进行上下移动重排顺序，等等。 总的应该场景在数据表中可以概括为如下模型： 数据表 TblData(id,fid,rank)，id表示记录的唯一标识，fid指记录的父节点，rank代表父节点下兄弟的前后顺序，依次从1递增，没有空隙。 问题...
sql中上下移置顶置底置换的排序实现
菜鸟小回的博客
10-28 369
sql中上下移置顶置底置换的排序实现
vue 数组上移下移置顶置底公共工具类
10-16
vue 数组上移下移置顶置底公共工具类,支持批量上移下移
js表格行上移下移置顶置底
12-19
支持所有浏览器，包过IE6-8,支持多选行操作，支持不连续选择行表格操作，操作按钮单独分开的。
jQuery实现的表格上移下移置顶操作特效源码.zip
11-07
本资源“jQuery实现的表格上移下移置顶操作特效源码.zip”显然提供了一种利用jQuery来操作表格元素的示例代码，特别关注于行的移动功能，包括上移、下移以及置顶操作。这些功能在数据管理和用户界面交互中非常常见，...
jQuery表格上移下移置顶特效代码
03-20
下面将详细讲解这个功能的实现原理和相关技术。 首先，我们需要一个HTML表格作为基础结构。表格通常由`<table>`元素、`<tr>`（行）元素和`<td>`（单元格）元素组成。例如： ```html 姓名 年龄 ...
Layui修改表格分页为英文
qq_46517733的博客
07-24 362
主要记录初次使用Layui没有好好看官方文档踩坑，修改了源码才发现可以自定义使用的Layui版本2.9.14。
怎么在使用select2时，覆盖layui的下拉框样式
qq_36973384的博客
07-24 248
* 改变边框样式 *//* 蓝色边框 *//* 改变边框圆角 *//* 改变背景色 *//* 白色背景 *//* 改变字体样式 *//* 可以在这里添加更多的样式，比如padding, margin, color等 *//* 内边距 *//* 外边距 *//* 注意：改变下拉列表（即选项列表）的样式通常是不可能的，因为它是由浏览器控制的 */
Layui Selcet选择框动态选择问题
最新发布
m0_66648798的博客
07-24 491
时隔多日我也是重新回归写作，高考已经完毕，我将继续我的文章创作，今天我将分享的是我在开发我自己的一个新项目所遇到的问题，这里预告一下我的新项目: VitaApi管理系统 这个系统可以看作是萌新源api管理系统的延续，算是续作吧，也是我为了完成高考前想要写一套不错的api管理系统的愿望，大家后续可以关注一下进展，如果项目完工我也会在各大平台发布通知的。
layui改造优化ITtools技术笔记01—layui.js重要修正
吴加明的技术坊
07-24 281
一开始以为是单选按钮name属性值和单选按钮组的表格id的属性值不一致引起的问题，name中的连接符是$，id中的连接符是_。他们都是由后台代码自动生成的。input[name= xxx]，其中xxx含有特殊字符，如$等，导致layui渲染时，表达式出错，无法及时渲染。经过一番骚操作，用jq改写name值，提交数据前再恢复原值，一时也能接受，但有未可知后果。ittools教学平台自动生成的单选按钮渲染后无法切换选项。在name属性值外面加上单引号''可以解决问题。
前端实现上移下移置顶置底
05-17
前端实现上移下移置顶置底需要使用 JavaScript 来操作 DOM 元素。 具体实现可以参考以下代码： ```html 列表项1 列表项2 列表项3 列表项4 列表项5 ()">上移 ()">下移 ()">置顶 ()">置底 ``` ```javascript...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值