页面选择多条多选框数据，只回显一条数据，解决方案

最新推荐文章于 2023-06-29 09:47:27 发布

冰激凌小孩

最新推荐文章于 2023-06-29 09:47:27 发布

阅读量1.5k

点赞数 7

文章标签： layui 前端 java jquery bootstrap

本文链接：https://blog.csdn.net/weixin_57209235/article/details/122418164

版权

我这里角色用的是多选框，多选框中的内容是动态从数据库中获取的

这是前端代码

<!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">
                                <label class="radio-inline">
                                    <input type="radio" name="state" id="state1" value="1" checked> 启用
                                </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-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);
    }else {
        initialize();
    };
    //返回
    $('#reload').on('click', function () {
        window.location.href = "${ctxPath}/sys/user";
    });

    //页面初始化数据
    function initialize() {
        roleNameList();
    }

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

    function userUpdate() {
 
        var state = $('input[name="state"]:checked').val();
        var loginName = $('input[name="loginName"]').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;
        }
        if (userCode == "" || userName == "" || state == "" ) {
            return;
        }
        console.log(roleIdList);
        var params = id == ""? { "state": state, "roleIdList": roleIdList}: { "state": state, "roleIdList": roleIdList, "id": id}
        var url = id == ""? "${ctxPath}/sys/user/save" : "${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) {
                //回显数据
                switch (r.data.state) {
                    case 0:$("#state2").prop('checked', 'false'); break
                    case 1:$("#state1").prop('checked', 'true'); break
                };
                roleNameList(r.data.roleIdList);
                // console.log(r.data.roleIdList);
            } else {
                alert(r.msg);
            }
        });
    };


    //查询所有角色
    function roleNameList(arr) {
            $.ajax({
                url: "${ctxPath}/sys/role/roleNameList",
                dataType: "json",
                type: "get",
                success: function (data) {
                    // console.log(data);
                    $.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).prop('checked', true);
                            }
                        });
                    });
                },
            });
    };

</script>
</html>

这是页面展示

后端 service层代码

   /**
     * 系统用户新增
     * @param sysUserEntity
     */
    public void saveAll(SysUserEntity sysUser) {
        //在更新之前执行的操作
        PreDaoUtils.preInsert(sysUser);
        saveUserRole(sysUser.getId(), sysUser.getRoleIdList());
        String salt = UUID.randomUUID().toString().replaceAll("-","").substring(0,20);
        sysUser.setSalt(salt);
        sysUser.setPassword(ShiroUtils.encodeSalt(Constants.DEF_PASSWORD,salt));
        super.save(sysUser);
    }
    /**
     * 修改用户与角色的关系
     * @param
     */
    private void saveUserRole(String userId, List<String> roleIdList) {
        //首先删除用户与角色的关系
        sysUserRoleDao.deleteByUserId(userId);
        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);
        }
    }

冰激凌小孩

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面选择多条多选框数据，只回显一条数据，解决方案

我这里角色用的是多选框，多选框中的内容是动态从数据库中获取的这是前端代码<!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"/> <t
复制链接

扫一扫