Question

我有一个角色基本用户表，一旦ajax调用完成，就可以通过jquery创建角色。该表不仅是数据，它还在一列中添加了一个下拉菜单，因此可以更改用户的角色。

如何等待表创建完成后尝试使用其选项和选项加载下拉菜单然后设置选中？如果我打开开发人员工具并逐步进行操作，那么它可以工作，我假设b / c有足够的时间来绘制表格。

解决此问题所需的帮助，如果有的话可以提出建议一种愚蠢的方式来完成所有操作：）

表

          <div class="col-md-9 ">
                <div class="card border-light rounded p-5">
                    <table id="grdUsers" class="table table-sm" style="width: 80%">
                        <thead>
                            <tr>
                                <th></th>
                                <th class="d-none">UserID</th>
                                <th class="d-none">RoleID</th>
                                <th>Name</th>
                                <th>Role</th>
                                <th>Role</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

ajax调用

function GetUserRoles() {

return $.ajax({
    url: 'https://localhost:44365/api/userroles'
});

构建表< / p>

function LoadApplicationUsers(appID) {
    $('#grdUsers').DataTable().clear();
    $('#grdUsers').DataTable().destroy();
    GetUserRoles().done(function (users) {
        $.each(users, function (index, user) {
            if (user.applicationID == appID) {
                $("#grdUsers tbody").append(`
            <tr>
                <td class="text-center"><button type="button" class="btn btn-sm btn-danger deleteuser"> X </button></td>
                <td class="d-none userID">${ user.userID}</td>
                <td class="d-none userID">${ user.roleID}</td>
                <td>${ user.username}</td>
                <td><select class="roles"></select></td>   
                <td>${ user.roleName}</td>
            </tr>
            `);
            }
        });
        $('#grdUsers').DataTable({
            "paging": false,
        });
    });

}

加载下拉列表

function LoadRolesDropdown(appID) {
    GetRoles().done(function (roles) {
        $.each(roles, function (index, role) {
            if (role.applicationID == appID) {
                $(".roles").append(`
                 <option value="${role.roleID}"> ${role.roleName}</option>
            `);
            }
        });
        $(".roles").trigger("chosen:updated");
    });
}

在页面顶部调用更改应用程序下拉列表

$(document).on('change', '#ddlApplication', function () {
    var appID = $("#ddlApplication option:selected").val();
    LoadApplicationUsers(appID);
    LoadRolesDropdown(appID);
});

Answer 1

您可以在DOM完成渲染后调用LoadRolesDropdown()函数。在jQuery中，您可以这样做，

$(document).ready(function(){
  LoadRolesDropdown(WITH_APP_ID);
})

Answer 2

您正在在LoadApplicationUsers（）之后调用LoadRolesDropdown（），但是在LoadApplicationUsers（）内部有一个异步运行的ajax调用，这会花费时间。

将LoadRolesDropdown移动到LoadApplicationUsers内，并在each（）循环之后调用它。

function LoadApplicationUsers(appID) {
    $('#grdUsers').DataTable().clear();
    $('#grdUsers').DataTable().destroy();
    GetUserRoles().done(function (users) {
        $.each(users, function (index, user) {
            if (user.applicationID == appID) {
                $("#grdUsers tbody").append(`
            <tr>
                <td class="text-center"><button type="button" class="btn btn-sm btn-danger deleteuser"> X </button></td>
                <td class="d-none userID">${ user.userID}</td>
                <td class="d-none userID">${ user.roleID}</td>
                <td>${ user.username}</td>
                <td><select class="roles"></select></td>   
                <td>${ user.roleName}</td>
            </tr>
            `);
            }
        });
        $('#grdUsers').DataTable({
            "paging": false,
        });
        LoadRolesDropdown(appID);
    });    
}

在加载控件之前如何等待创建

2 个答案: