Jquery 多选框从数据库中获取数据并在修改页面根据用户id显示该用户角色

最新推荐文章于 2022-04-02 15:41:48 发布

冰激凌小孩

最新推荐文章于 2022-04-02 15:41:48 发布

阅读量601

点赞数

文章标签： jquery javascript 前端 layui bootstrap

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

版权

<body>
 <div class="form-group">
      <div class="col-sm-1 control-label">角色</div>
      <div class="col-sm-11 " name="roleName" id="roleName">

      </div>
</div>
</body>
<script type="text/javascript" src="${ctxPath}/common/jquery/jquery-3.5.1.min.js"></script>
    //查询所有角色  用jquery动态获取数据库数据
    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);
                            }
                        });
                    });
                },
            });


       //详情页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); //后端根据用户id查询到角色id集合
                // console.log(r.data.roleIdList);
            } else {
                alert(r.msg);
            }
        });
    }; 


</script>

上述代码的前端页面：