layui动态穿梭框的实现

最新推荐文章于 2023-08-08 14:09:46 发布
最新推荐文章于 2023-08-08 14:09:46 发布
阅读量812 收藏 4
点赞数 1
分类专栏： html 文章标签： mysql java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaotiantian/article/details/117380355
版权
前台HTML页面
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script type="text/javascript" src="js/global.js"></script>
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>

	<body>
		<div hidden="hidden" class="layui-form-item" style="margin-top: 20px">
			<label class="layui-form-label">ID：</label>
			<div class="layui-input-inline" style="width: 350px">
				<input type="text" name="id" id="userid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			</div>
		</div>
		</div>
		<div style="margin-top: 20px" id="test4" class="demo-transfer"></div>
		<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
		<!--<legend>数据格式解析</legend>-->
		<!--</fieldset>-->

		<script src="./layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			layui.use(['transfer', 'layer', 'util', 'form'], function() {
				var $ = layui.$,
					transfer = layui.transfer,
					layer = layui.layer,
					form = layui.form,
					util = layui.util;
				var userroles = []; //存储用户拥有的角色
				var datass = []; //存储所有角色id名称
				var datas = []; //存储所有角色id名称
				var ids = []; //用来存储角色id
				function getReole() { //延迟加载

					var userid = document.getElementById("userid").value; //当前用户的id
					$.ajax({
						url: globalData.server + "./roles/getAllRoles", //根据用户拿到所有角色
						type: 'post',
						dataType: 'json',
						data: {
							"userId": userid
						},
						success: function(data) {
							for(var i in data.data) {
								userroles.push("" + data.data[i].id + ""); //拿到的数据放入数组中
							}
						},
						error: function(e) {
							alert('请求失败')
						}
					});
					$.ajax({
						url: globalData.server + './roles/getAllRolesAlls', //拿到所有角色
						type: 'post',
						dataType: 'json',
						success: function(data) {
							for(var i in data.data) {
								datas = { //存储所有角色id名称
									value: data.data[i].id, //角色的id id是自己数据库的id名
									title: data.data[i].name //角色名称
								}
								datass.push(datas); //把拿到的所有角色id名称 放到数组
							}

							setTimeout(function() {//延迟加载
								//穿梭时的回调
								transfer.render({
									elem: '#test4',
									data: datass,
									title: ['系统所有角色', '当前用户角色'],
									value: userroles,
									onchange: function(obj, index) {
										for(var i in obj) {
											ids.push(obj[i].value)
										}
										var arr = ['系统所有角色', '当前用户角色'];
										//layer.alert('来自 <strong>' + arr[index] + '</strong> 的数据：' + JSON.stringify(obj)); //获得被穿梭时的数据
										if(arr[index] == '系统所有角色') {
											$.ajax({
												url: globalData.server + 'UserRoles/addUsersByIdRoles', //用户添加角色
												type: 'post',
												dataType: 'json',
												data: {
													"userId": userid, //用户id
													"roleId": ids, //角色id
													'ids': JSON.stringify(ids),
												},
												success: function(data) {
													//												alert(data.msg);
													ids = [];
												},
												error: function(e) {
													alert('请求失败')
												}
											});
										} else {
											$.ajax({
												url: globalData.server + 'UserRoles/removeUsersByIdRoles', //用户移除角色
												type: 'post',
												dataType: 'json',
												data: {
													"userId": userid, //用户id
													"roleId": ids, //角色id
													'ids': JSON.stringify(ids)
												},
												success: function(data) {
													//												alert("成功");
													ids = [];
												},
												error: function(e) {
													alert('请求失败')
												}
											});
										}

									}
								})
							}, 500);
						},
						error: function(e) {
							alert('请求失败')
						}
					});
				}
				setTimeout(function() {
					//延迟加载
					getReole();
				}, 500);
			});
		</script>

	</body>

</html>
后台控制层页面
package com.crm.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.crm.entity.UserRoles;
import com.crm.entity.Users;
import com.crm.service.UserRolesService;
import com.crm.util.Result;

//用户和角色的控制层
@RestController
@RequestMapping("/UserRoles")
public class UserRolesController {
	@Autowired
	private UserRolesService userRolesService;

	/**
	 * 根据用户id去添加角色
	 * 
	 * @return
	 */
	@RequestMapping("/addUsersByIdRoles")
	public Object addUsersByIdRoles(UserRoles userRoles, @RequestParam("ids") Object ids, int userId) {
		JSONArray js = JSON.parseArray(ids.toString());// 将从ids.toString()中获得的字符串直接转换成对象
		Integer jg = 0;
		for (Object i : js) {//循环着去添加
			userRoles.setUserId(userId);
			userRoles.setRoleId(Integer.parseInt(i.toString()));
			jg += userRolesService.addUsersByIdRoles(userRoles);
		}
		if (jg == js.size()) {
			return new Result("0", "添加成功", jg, "后台请求成功");
		}
		Result result = new Result("0", "true", 100, "后台请求成功");
		return result;
	}

	/**
	 * 根据用户id和角色id去删除角色
	 * 
	 * @return
	 */
	@RequestMapping("/removeUsersByIdRoles")
	public Object removeUsersByIdRoles(UserRoles userRoles, @RequestParam("ids") Object ids, int userId) {
		JSONArray js = JSON.parseArray(ids.toString());// 将从ids.toString()中获得的字符串直接转换成对象
		Integer jg = 0;
		for (Object i : js) {//循环着去添加
			userRoles.setUserId(userId);
			userRoles.setRoleId(Integer.parseInt(i.toString()));
			jg += userRolesService.removeUsersByIdRoles(userRoles);
		}
		if (jg == js.size()) {
			return new Result("0", "移除成功", jg, "后台请求成功");
		}
		Result result = new Result("0", "true", 100, "后台请求成功");
		return result;
	}
}
今天打代码刷题了吗
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui动态表头的实现代码
10-16
主要介绍了layui动态表头的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于layui实现树形穿梭框
03-18
基于layui封装的多选树形穿梭框，双列表互选框
layui 穿梭框transfer右侧数据赋值排序错乱小技巧.doc
05-28
一个简单的没有技术含量的方法
layui穿梭框改写，单击时勾选进行穿梭，取消原本穿梭框的中间点击change部分
qq_44091061的博客
01-12 663
layui穿梭框改写，单击时勾选进行穿梭，取消原本穿梭框的中间点击change部分
layui穿梭框动态查询、添加、删除基于ssm(layui.transfer)
m0_46629316的博客
05-18 1097
layui穿梭框动态查询、添加、删除基于ssm(layui.transfer) 一、前端代码 1.定义角色的弹层页面 <!--角色的弹层页面 --> <div id="editRoleLayer" style="display: none; margin-top: 20px;"> <form class="layui-form" lay-filter="editRoleForm" id="editRoleForm" action=""> <div id=
layui穿梭框数据动态加载
u012230371的博客
08-08 345
layui 穿梭框数据动态加载
layui的select和穿梭框联动
走向CTO的路上...
06-25 657
在事件处理程序中，您可以获取用户选择的选项的值，然后使用 Ajax 请求从服务器获取相应的数据，然后使用 layui 的。这样，当用户选择 Select 框中的选项时，穿梭框的左侧列表将根据选择的选项重新渲染，同时右侧列表的已选城市将被保留。要实现左边的 Select 和右边的穿梭框的联动，您可以使用 JavaScript 和 layui 库。我们还为穿梭框右侧列表的选择事件绑定了一个事件处理程序，以记录用户已选择的城市。方法渲染了一个穿梭框，其中左侧列表的数据是从服务器获取的城市列表。
layui 穿梭框 layui.transfer
热门推荐
jinggaoniao的博客
08-04 1万+
本文是自己对layui.transfer 穿梭框的基本使用总结，未涉及到的内容可以在layui.transfer官方文档中查找。下图为穿梭框的基本样式，效果还是不错的，能够满足系统中多种场景下的需求，它可以进行数据的交互筛选。 1、基础效果实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穿梭框组件</title> <link rel
layui框架学习（28：穿梭框模块）
gc_2299的博客
06-27 1342
学习并记录layui框架中内置模块的穿梭框模块的函数、参数设置方式。
html表格动态加载勾选框,layui动态表格数据选择添加穿梭框代码
weixin_42524530的博客
06-03 536
一款基于layui、vue、jQuery改写的动态表格数据选择添加穿梭框代码，测试用的json数据需要本地服务器才能运行，火狐浏览器可直接运行。查看演示下载资源：41次 下载资源下载积分：20积分js代码 var myVue = new Vue({el: '#app',data: {sites: []}})var arr = [];lay...
基于layui实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
LayUI中的内置模块之 穿梭框组件文档 - layui.transfer
daimeijin的博客
08-14 1937
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 穿梭框组件文档 穿梭框组件的初衷来源于 layui 社区的扩展组件平台，并且在 layui 2.5.0 的版本中开始登场。其适用的业务场景多样，不妨一试。 模块加载名称：transfer 快速使用
layui的穿梭框绑定实时数据并使用
weixin_44541247的博客
07-27 4542
为layui穿梭框绑定实时数据的方法有很多，我这里的只是其中一个比较简单的为layui绑定实时数据的方法。 为穿梭框绑定实时肯定是先要使用到layui的穿梭框， 使用layui穿梭框的第一步，正常情况下肯定是先要加载穿梭框的模块 transfer，但如果想要实时数据绑定在穿梭框在初始化之前还需要用post请求将所需要的数据查询出来，在对layui进行加载。 在将所需要的数据查询出来并将所需要的l...
layui_穿梭框组件（transfer）
m0_46699799的博客
06-30 8335
穿梭框组件（transfer）组件介绍组件举例基础效果代码效果定义标题及数据源代码效果初始右侧数据集合代码效果显示搜索框代码效果穿梭时的回调代码效果注意事项 组件介绍 这篇博客素材的由来是我在玩一个小游戏的时候，它的原理很像穿梭框，而且我觉得在开发中，穿梭框还挺有用的，于是我就去找了layui官网的文档来学习，并且将它分享出来 模块加载名称：transfer 基础的参数： 基础方法： 方法 含义 transfer.set(options); 设定全局默认参数。options 即各项基础参数
layui 穿梭框
我的LOG
11-17 605
layui 穿梭框直接代码 直接代码 Java类 属性 nteger id; String name; String status; boolean checked; layui 穿梭框 js （从后台获得列表后展示） var checkeds=[]; for(var i=0;i<res.data.length;i++){ if(res.data[i].checked){checkeds.pu
layUI穿梭框获取穿梭值（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-26 1545
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layUI穿梭框</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport
layui的穿梭框
xiaosao_的博客
12-28 1398
首先引入CSS样式和Jquery Layui插件 Html部分只有一个fieldast标签和一个设置了ID的div标签 Jq部分直接开启layui中的渲染 然后设置属性值,最主要的是elem属性,输入ID值对当前ID的div进行渲染,最后设置data和htight(列表高度)属性 这是穿梭框中可以手动添加的一些属性 效果: ...
Layui 设置多个穿梭框，并增加上移下移置顶置底功能
Richard_reallife的博客
07-12 5148
Layui 设置多个穿梭框，并增加上移下移置顶置底功能 介绍 针对layui穿梭框进行了一些修改，增加上移下移置顶置底功能，设置了右侧框的排序功能，按序取值，按序加载的功能。 基于layui 2.5.4 ，致敬贤心大神。 样式 源码 <!DOCTYPE HTML> <%@ page contentType="text/html; charset=UTF-8" pageEncod...
layui 穿梭框数据交互
最新发布
04-03
layui 穿梭框（Transfer）是一个用于在两个列表之间移动数据的组件。它可以通过前后端的交互来获取和更新数据。下面是两种实现数据交互的方法： 1. 后端获取数据：通过后端接口获取数据，并将数据传递给穿梭框组件。在后端，你可以使用任何你熟悉的编程语言和框架来实现数据的获取和处理。在前端，你需要使用 layui 的穿梭框组件，并通过 AJAX 请求将数据传递给后端接口。具体的实现步骤如下： - 在前端页面中，创建一个 div 元素，并设置一个唯一的 id，用于放置穿梭框组件。 - 在后端，创建一个接口用于获取数据。你可以使用任何你熟悉的后端框架来实现这个接口。 - 在前端的 JavaScript 代码中，使用 layui 的穿梭框组件，并通过 AJAX 请求将数据传递给后端接口。 - 在后端接口中，获取请求中的数据，并进行相应的处理。然后将处理后的数据返回给前端。 - 在前端的 JavaScript 代码中，接收后端返回的数据，并将数据传递给穿梭框组件进行展示。 以下是一个示例代码： ```html <div id="test4" class="demo-transfer"></div> ``` ```javascript layui.use(['transfer'], function(){ var transfer = layui.transfer; // 通过 AJAX 请求获取数据 $.ajax({ url: 'your_backend_api_url', type: 'GET', success: function(res){ // 将数据传递给穿梭框组件 transfer.render({ elem: '#test4', data: res.data // 假设后端返回的数据为 {data: []} }); } }); }); ``` 2. 前端获取数据：在前端页面中，你可以直接定义一个数组来存储数据，并将数据传递给穿梭框组件。具体的实现步骤如下： - 在前端页面中，创建一个 div 元素，并设置一个唯一的 id，用于放置穿梭框组件。 - 在前端的 JavaScript 代码中，定义一个数组来存储数据，并将数据传递给穿梭框组件进行展示。 以下是一个示例代码： ```html <div id="test4" class="demo-transfer"></div> ``` ```javascript layui.use(['transfer'], function(){ var transfer = layui.transfer; // 定义数据数组 var data = [ {value: '1', title: '选项1'}, {value: '2', title: '选项2'}, {value: '3', title: '选项3'} ]; // 将数据传递给穿梭框组件 transfer.render({ elem: '#test4', data: data }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值