layUI下角色与用户绑定 读取数据库 复选框回显

最新推荐文章于 2022-11-30 14:22:59 发布
最新推荐文章于 2022-11-30 14:22:59 发布
阅读量533 收藏 2
点赞数
文章标签： layui 前端 java javascript bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57209235/article/details/122368736
版权
这篇博客展示了如何实现前端用户信息的新增与修改，包括HTML表单设计、数据回显及用户状态、角色选择等功能。后端使用了Java实现更新接口，处理用户角色关系的修改，并通过Ajax进行数据交互。代码示例详细，适合理解前后端交互逻辑。
摘要由CSDN通过智能技术生成

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>新增修改用户详情 - 后台管理系统</title>
    <link href="${ctxPath}/common/bootstrap-v3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctxPath}/common/layui-v2.6.4/css/layui.css">
    <link href="${ctxPath}/css/base/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form class="form-horizontal" method="post" action="#!" onsubmit="return false">
                        <div class="form-group">
                            <div class="col-sm-1 control-label">用户编号</div>
                            <div class="col-sm-2">
                                <input class="form-control" type="userCode" name="userCode" id="userCode"
                                       placeholder="用户编号"/>
                            </div>
                            <div class="col-sm-1 control-label">用户名</div>
                            <div class="col-sm-2">
                                <input class="form-control" type="userName" name="userName" id="userName"
                                       placeholder="用户名"/>
                            </div>
                            <div class="col-sm-1 control-label">登录账户</div>
                            <div class="col-sm-2">
                                <input class="form-control" type="loginName" name="loginName" id="loginName"
                                       placeholder="登录账户"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1 control-label">状态</div>
                            <div class="col-sm-2">
                                <label class="radio-inline">
                                    <input type="radio" name="state" id="state1" value="1"> 启用
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="state" id="state2" value="0"> 停用
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1 control-label">角色</div>
                            <div class="col-sm-11 " name="roleName" id="roleName">

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1 control-label">岗位id</div>
                            <div class="col-sm-2 ">
                                <select class="form-control" name="postId" id="postId">

                                </select>
                            </div>
                            <div class="col-sm-1 control-label">电话号码</div>
                            <div class="col-sm-2">
                                <input class="form-control" type="phone" name="phone" id="phone" placeholder="电话号码"/>
                            </div>
                            <div class="col-sm-1 control-label">电子邮箱</div>
                            <div class="col-sm-2">
                                <input class="form-control" type="email" name="email" id="email" placeholder="电子邮箱"/>
                            </div>
                            <div class="col-sm-1 control-label">组织机构Id</div>
                            <div class="col-sm-2">
                                <input class="form-control" type="orgId" name="orgId" id="orgId"
                                       placeholder="选择所属组织机构id"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1 control-label">备注</div>
                            <div class="col-sm-3">
                                <input class="form-control" type="remarks" name="remarks" id="remarks"
                                       placeholder="备注"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-5">
                                <button id="post_submit" class="btn btn-primary">保存</button>
                                <button id="reload" class="btn btn-primary btn-warning" style="margin-left: 30px">返回
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${ctxPath}/common/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/common/bootstrap-v3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/base/main.min.js"></script>
<script src="${ctxPath}/common/layui-v2.6.4/layui.js" charset="utf-8"></script>

<script type="text/javascript">
    //编辑页面的数据回显
    var id = "${id}"
    if (id != "" && id != undefined) {
        //回显数据
        getInfo(id);
    }
    //返回
    $('#reload').on('click', function () {
        window.location.href = "${ctxPath}/sys/user";
    });

    //输入完用户相关信息，点击保存
    $('#post_submit').on('click', function () {
        userUpdate();
    });

    function userUpdate() {
        var userCode = $('input[name="userCode"]').val();
        var userName = $('input[name="userName"]').val();
        var postId = $('select[name="postId"]').val();
        var state = $('input[name="state"]:checked').val();
        var phone = $('input[name="phone"]').val();
        var email = $('input[name="email"]').val();
        var checkboxValue = "";
        var roleIdList = new Array();
        $("input:checkbox[name='roleIdList']:checked").each(function () {
            if (checkboxValue == 0) {
                checkboxValue = $(this).val();
                return true;
            }
            checkboxValue += ',' + $(this).val();
        });
        if (checkboxValue.length > 0) {
            for (var i = 0; i < checkboxValue.split(",").length; i++) {
                roleIdList[i] = checkboxValue.split(",")[i]
            }
        } else {
            roleIdList = null;
        }
        console.log(roleIdList);
        if (userCode == "" || userName == "" || state == "" ) {
            return;
        }
        var params = {"userCode": userCode, "userName": userName, "postId": postId, "state": state, "phone": phone, "email": email, "roleIdList": roleIdList, "id": id}
        var url = "${ctxPath}/sys/user/update";
        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify(params),
            contentType: "application/json",
            success: function (data) {
                layer.msg(data.msg);
                // console.log(params.roleIdList),
                //跳转到列表页
                window.location.href = "${ctxPath}/sys/user";
                return
            }
        });

    };

    //详情页function
    function getInfo(id) {
        $.get("${ctxPath}/sys/user/info/" + id, function (r) {
            if (r.code == 200) {
                //回显数据
                $("#userCode").val(r.data.userCode);
                $("#userName").val(r.data.userName);
                $("#loginName").val(r.data.loginName);
                switch (r.data.state) {
                    case 0:$("#state2").prop('checked', 'false'); break
                    case 1:$("#state1").prop('checked', 'true'); break
                };
                $("#phone").val(r.data.phone);
                $("#email").val(r.data.email);
                $("#orgId").val(r.data.orgId);
                $("#remarks").val(r.data.remarks);
                postNameList(r.data.postId);
                roleNameList(r.data.roleIdList);
                // console.log(r.data.roleIdList);
            } else {
                alert(r.msg);
            }
        });
    };

    //查询所有岗位，并根据用户id显示该用户岗位
    function postNameList(id) {
        $.ajax({
            url: "${ctxPath}/sys/post/postNameList",
            dataType: "json",
            type: "post",
            success: function (data) {
                $.each(data, function (index) {
                    var postId = data[index].id;
                    var postName = data[index].postName;
                    $("#postId").append("<option value='" + postId + "'>" + postName + "</option>");

                });
                $("#postId").each(function () {
                    // this代表的是，对option再进行遍历
                    $(this).children("option").each(function () {
                        // 判断需要对那个选项进行回显
                        if (this.value == id) {
                            // 进行回显
                            $("#postId").val(this.value);
                        }
                    });
                });
            }
        });
    };

    //查询所有角色
    function roleNameList(arr) {
            $.ajax({
                url: "${ctxPath}/sys/role/roleNameList",
                dataType: "json",
                type: "post",
                success: function (data) {
                    // console.log(data);
                    // console.log(arr);
                    $.each(data, function (index) {
                        var roleId = data[index].id;
                        // console.log(roleId);
                        var roleName = data[index].roleName;
                        // console.log(roleName);
                        $("#roleName").append("<label class='checkbox-inline'>" +
                            "<input type='checkbox'  name='roleIdList' value='" + roleId + "'/> " + roleName +
                            "</label>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;");
                        //每一行设置5个角色，超过5个自动换下一行
                        if ((index + 1) % 5 == 0) {
                            $("#roleName").append("<br>")
                        }
                    });
                    //遍历从数据库中查到的角色id
                    $.each(arr, function (index) {
                        // console.log(arr[index]);
                        //遍历name='roleIdList'的input标签
                        $("input[name='roleIdList']").each(function () {
                            //将遍历到的input标签的value属性值与遍历数组的元素比较，并回显
                            if ($(this).val() == arr[index]) {
                                // console.log($(this).val());
                                // $(this).attr("checked", true);
                                $(this).prop('checked', true);
                            }
                        });
                    });
                },
            });
    };

</script>
</html>

后端代码：

Controller层

    public JsonResult update(@RequestBody SysUserEntity sysUser) {
        PreDaoUtils.preUpdate(sysUser);
        sysUserService.updateByUser(sysUser);
        return JsonResult.success();
    }

Service层

  public boolean updateByUser(SysUserEntity sysUser) {
        //引入项目框架的方法，在更新之前执行的操作
        PreDaoUtils.preUpdate(sysUser);
        
        saveUserRole(sysUser.getId(), sysUser.getRoleIdList());
        System.out.println(sysUser);
        return super.updateTemplate(sysUser);
    }

    /**
     * 修改用户与角色的关系
     *
     * @param
     */
    private void saveUserRole(String userId, List<String> roleIdList) {
        //首先删除用户与角色的关系
        sysUserRoleDao.deleteByUserId(userId);

        System.out.println(userId);
        System.out.println(roleIdList);

        if (CollectionUtils.isEmpty(roleIdList)) {
            return;
        }
        //保存修改后用户与角色的关系
        for (String roleId : roleIdList) {
            SysUserRoleEntity sysUserRole = new SysUserRoleEntity();
            sysUserRole.setUserId(userId);
            sysUserRole.setRoleId(roleId);
            System.out.println(roleId);
            System.out.println(sysUserRole.getRoleId());
            PreDaoUtils.preInsert(sysUserRole);
            sysUserRoleDao.insert(sysUserRole);
        }
    }

页面功能展示：

 不喜勿喷，只留做个人记录，如果恰好能帮助到你们那是最好的！

冰激凌小孩
关注
SSM框架之酒店管理系统六（角色管理分配菜单）layui.dtree树形菜单插件使用
我要记录学习博客
05-17 900
SSM框架之酒店管理系统六（角色管理分配菜单） 1、树形菜单的使用 复制下载的layu树形图到webapp.statics文件夹下 官网下载地址：layui.dtree帮助手册 (wisdomelon.com) 根据官网的使用导入相关的css和js文件，到roleManager.jsp角色管理页面 <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="layui_ext/d
2021-10-23 Servlet的实现与案例
m0_59708269的博客
10-23 560
Servlet 1.继承HttpServlet类 package com.xxxx.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServle
Java layui 用户角色权限源码
04-19
Java layui 用户角色权限源码。 用户角色权限源码，其中包括数据库资源，数据库设计文档，layui布局等，绝对不亏 java layui 用户角色权限
layui 项目 用户角色设置
qq_33354934的博客
09-15 1707
1.点击角色按钮，弹出角色设置穿梭框 2.穿梭框左边显示系统，所有的角色 3.穿梭框左边显示用户已经拥有的角色 4.为用户增加角色 5.删除指定角色
layui checkbox关联选择
10040241031的博客
08-16 295
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
对layui初始化列表的CheckBox属性详解
10-16
今天小编就为大家分享一篇对layui初始化列表的CheckBox属性详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【JavaFX Properties完全攻略】：掌握JavaFX的属性绑定与数据同步
![Java JavaFX Properties（属性绑定）]...它们使得开发者能够以声明式的方式，将界面元素与数据源连接起来，实现自动更新。简而言之，JavaFX Properties允许开发者以编程的方式，将UI组件与底层数据模型紧密耦合。
3个小时的成果-点击按钮获取到form表单的数据后跳转至其他页面
丑小鸭变黑天鹅的博客
03-13 2140
3个小时的成果-点击按钮获取到form表单的数据后跳转至其他页面问题描述遇到的坑解决办法 问题描述 做项目的时候，有一个页面有这样的需求。 这个页面大概就是下图这样 需求一、动态获取产品名称 需求二、动态获取被选中的复选框的内容 需求三、点击保存按钮时，获取form表单中的数据，成功之后，跳转到其他页面 需求四、只输入产品名称不勾选产品功能时，会提示请勾选功能，同理，只勾选功能，不输入产品名称，会提示输入产品名称，当两者都不输入内容时，会都提示。 需求五、点击重置按钮，勾选的复选框全部变为未选中状态。 需
Flowable表单设计与表单引擎应用
它允许用户设计和定义表单，用于收集用户的输入数据，并在流程的不同阶段进行展示和处理。通过表单引擎，用户可以定义流程中各个任务节点的表单，规定需要收集的数据和展示的内容，以及数据的验证规则。表单
day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
黑泽君
01-15 871
day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
基于SSM+layui实现用户删除功能
m0_56053903的博客
07-07 591
实现原理：通过索引id的值编写delete删除语句。jsp界面效果：layer.confirm弹出提示框，并通过ajax中post请求实现异步提交、页面不刷新，提高效率
layui form表单字段过滤
我家有只小金毛的博客
05-02 1606
layui Form表单字段过滤 在利用layui + thinkphp 做网页设计时，通常会遇到一个Form表单字段过多的情况，但是有些字段是数据库中没有的，或者说是不需要的。举个栗子： 在使用 layui 的图片上传功能时，默认的字段是file。html文件如下： 但是如果你数据库中存放图片的属性是img怎么办： 1. 在图片上传函数中修改字段，在里面的 field 字段中设置 field ...
程序猿日常小结：Layui checked复选框 radio 单选框的绑定选择状态和获取值
黄山鲁居士的博客
03-29 2276
之前在用layui框架做项目是发现checked复选框绑定获取值有问题 首先尝试了： $("#checkedID").attr(“checked”,true); 这个虽然可以修改获取到checked的值，但只能修改一次，取消后要想再获取则不能再选中 后来发现可以这样 var e = document.getElementById(‘checkedID’); e.checked = true; ra...
layui table隐藏某行数据，前端过滤数据
技术分享博客
03-19 2683
这里写自定义目录标题前端代码页面脚本代码 ##前端界面效果图 前端代码 <style type="text/css"> .nav-tabs li { width: 15%; text-align: center; } .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline:
【day22】1105 LayUI表单、表格，过滤器
xiu___的博客
01-02 406
过滤未登录用户的过滤器
ab84878的博客
06-24 421
javaweb，过滤未登录用户
layui实现分页，筛选功能
loveisbunny的博客
11-30 4462
layui实现分页筛选操作
使用layui实现从商品展示跳转到商品详情页，上一页html跳转到另外一页html，前端值在页面之间的传递
Android_la的博客
03-23 5928
一. 问题背景 点击商品展示页，能另外打开新标签跳转到商品详情页，效果如下： 前台：使用到的页面全是html没有jsp，所以这里是在html之间传值，从商品展示页传递商品id到商品详情页 二. 解决方案 2.1 思路 给<a>绑定onclick事件 定义一个处理跳转的函数 2.2 关键代码 最最最最最关键的是window.open('xxxxxxxxxxxxx.htm...
#项目#layui后台管理模板总结
LYR 的博客
08-29 1397
xadmin 的部分模板片段，首页导航栏 <#macro navLeft> <div class="left-nav"> <div id="side-nav"> <ul id="nav"> <li> <a href="javascript:;"> <i class=
复选框回显
最新发布
05-31
复选框回显可以通过以下步骤实现： 1. 在 HTML 中，为每个复选框设置一个唯一的 id。 2. 使用 JavaScript 获取每个复选框的状态（选中或未选中）。 3. 当页面重新加载时，使用 JavaScript 在每个复选框上设置正确的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值