0

下面是显示团队成员网格的方法。

 function CreateRecruiterGrid() {
    var searchKeyWord = $("#txtAdKeyWords").val();
    var foreName = $("#txtForeName").val();
    var surName = $("#txtSurname").val();
    var email = $("#txtEmail").val();
    var orgId = $("#ddlRoles").val();
    var vUrl = '@Url.Action("List","Team")';
    var vColumnHeaderNames = ["RecruiterId", "EmailVerified", "FORE NAME", "SUR NAME", "EMAIL", "ROLES", "ACTIONS"];
    jQuery(function ($) {
        var gridSelector = "#grid-table";
        var pagerSelector = "#grid-pager";
        jQuery(gridSelector).jqGrid({
            url: vUrl,
            datatype: 'json',
            type: 'GET',
            height: "auto",
            colNames: vColumnHeaderNames,
            colModel: [
                { name: 'RecruiterId', index: 'RecruiterId', key: true, hidden: true },
                { name: 'EmailVerified', index: 'EmailVerified', hidden: true },
                { name: 'Forename', index: 'Forename', width: 180, align: "left" },
                { name: 'Surname', index: 'Surname', width: 200, align: "left" },
                { name: 'Email', index: 'Email', width: 200, align: "left" },
                { name: 'Role', index: 'Role', width: 200, align: "center" },
                { name: 'Action', index: 'Action', width: 140, align: 'center', editable: false, sortable: false, search: false }
            ],
            viewrecords: true,
            viewpages: true,
            gridComplete: function () {
                var ids = $('#grid-table').jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var recId = ids[i];
                    var rowData = $('#grid-table').jqGrid('getRowData', recId);
                    var rowHtml = "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'>";
                    rowHtml += "<a onclick='deleteTeamMember(" + recId + ")' style='cursor:pointer;'>Delete</a>";
                    $('#grid-table').jqGrid('setRowData', ids[i], { Action: rowHtml });
                };
            },
            jsonReader: {
                root: 'RecruiterData',
                id: 'RecruiterId',
                records: 'Records',
                rows: 'PageSize',
                page: 'PageIndex',
                total: 'TotalPages',
                repeatitems: false
            },
            rowNum: 100,
            rowList: [2, 10, 50, 100],
            pager: pagerSelector,
            altRows: true,
            multiselect: true,
            multiboxonly: true,
            loadonce: false,
            beforeRequest: function () {
                var p = this.p, pd = p.postData;
                p.url = '@Url.Action("List", "XpressJobsTeam")'
                    + '?pageNumber=' + pd.page
                    + '&recordsPerPage=' + pd.rows
                    + '&keyWord=' + searchKeyWord
                    + '&sortVal='
                    + '&forename=' + foreName
                    + '&surname=' + surName
                    + '&email=' + email
                    + '&orgId=' + orgId;
                p.postData = {};
                $("#load_grid-table").text("Retrieving Team Members...");
            },
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    styleCheckbox(table);
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
                $("#recruiterGridContainer div").each(function () {
                    if (!$(this).hasClass("ui-pg-div") && !$(this).hasClass("loading")) {
                        if ($(this).hasClass("ui-jqgrid-hbox")) {
                            $(this).attr('style', 'width:100%;padding-right:0;');
                        }
                        else {
                            $(this).attr('style', 'width:100%;');
                        }
                    }
                });
                $("#recruiterGridContainer table").each(function () {
                    if (!$(this).hasClass("navtable")) {
                        if ($(this).hasClass("ui-pg-table")) {
                            $("#grid-pager_left").attr('style', 'width:35%');
                            $(this).attr('style', 'width:100%;margin-top:5px;');
                        } else {
                            $(this).attr('style', 'width:100%');
                        }
                    }
                });
            },
            caption: "team Members",
            autowidth: true
        });

当前，网格显示为角色列的 wmpty 值。

每个人的角色详细信息在我实现的方法中接收到控制器。但它没有显示在网格中。角色作为数组接收。（因为一个成员可以有一个或多个角色）。

据我了解，问题在于数据绑定。我想知道如何在上面的 Jquery 方法中绑定角色数组。我尝试了几种方法，但没有成功。

我是 Jquery 的新手，任何帮助表示赞赏。

我裁判http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter并更改了下面的行

{ name: 'Role', index: 'Role', width: 200, align: "center", formatter:currencyFmatter },

我被困在实现这个功能。我尝试过如下。但它没有显示角色

 function roleFormatter(cellvalue, options, rowObject) {
        let selectedRoles = "";
        for (var role in cellvalue)
        {
            selectedRoles += role.RecruiterRole;
        }
        return selectedRoles;
    }

我想用逗号分隔在角色列下显示一个人的角色我是 Jquery 的新手，感谢您的帮助。

4

1 回答 1

0

如果您的 cellvalue 是数组，那么您的格式化程序可能看起来像这样

function roleFormatter(cellvalue, options, rowObject) {
     return cellvalue.join(", ");
}
于 2022-02-03T10:11:53.797 回答