冰激凌小孩
2022-01-08 13:52
采纳率: 83.3%
浏览 39
已结题

点击添加按钮进入相应页面时下拉框动态加载不出数据,该怎么弄

问题遇到的现象和发生背景

点击添加按钮进入相应页面时下拉框动态加载不出数据,点击修改能显示

问题相关代码,请勿粘贴截图

这是我项目的前端代码,用的bootstrap和layui

<!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" 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-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 loginName = $('input[name="loginName"]').val();
        var phone = $('input[name="phone"]').val();
        var email = $('input[name="email"]').val();
        var remarks = $('input[name="remarks"]').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 == ""? {"userCode": userCode, "userName": userName, "loginName": loginName, "state": state, "phone": phone, "email": email, "remarks": remarks}: {"userCode": userCode, "userName": userName, "loginName": loginName, "postId": postId, "state": state, "phone": phone, "email": email, "roleIdList": roleIdList, "remarks": remarks,"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) {
                //回显数据
                $("#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).prop('checked', true);
                            }
                        });
                    });
                },
            });
    };

</script>
</html>

运行结果及报错内容

这是用户管理界面

img

点击编辑后,出现这个页面,岗位和角色能读取数据库并回显在页面上

img

点击添加用户是这个界面,岗位和角色读取不到数据库

img

我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

  • 冰激凌小孩 2022-01-08 15:45
    最佳回答

    少了页面初始加载数据

    img

    已采纳该答案
    评论
    解决 无用
    打赏 举报
查看更多回答(2条)