layui动态穿梭框的实现

最新推荐文章于 2024-06-20 22:08:49 发布

今天打代码刷题了吗

最新推荐文章于 2024-06-20 22:08:49 发布

阅读量844

点赞数 1

分类专栏： html 文章标签： mysql java html

本文链接：https://blog.csdn.net/chaotiantian/article/details/117380355

版权

html 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这是一个关于HTML页面与后端交互的例子，用于实现用户角色的添加和移除功能。页面使用layui框架，通过AJAX异步获取用户角色数据，利用穿梭框组件实现用户角色的选择和变更。当用户在穿梭框中选择角色时，会实时发送POST请求到后台，根据用户ID添加或移除角色。

摘要由CSDN通过智能技术生成

前台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;
	}
}