jquery - 使用动态 colNames 和 colModel 时 colnames <> colmodel 的长度

Question

在我的 mvc jqgrid 代码中，colnames 和 colmodel 返回相同长度的 col。但是当运行应用程序时，我收到此错误。有什么帮助吗？

代码:

public WeekColumns GetWeekColumns(DateTime start, DateTime end)
    {
        WeekColumns week = new WeekColumns();

        string sWeekDate = string.Empty;

        var model = db.GetWeek(start.ToString("MM/dd/yyyy"),
            end.ToString("MM/dd/yyyy")).ToList().Select(s => s.WeekDate.ToString());

        IEnumerable<string> sModel = new List<string>();
        sModel = model;

        string sColumnNames = "['ID', 'Account', 'Lob'";

        foreach (string item in sModel)
            sColumnNames += ", 'C" + item.ToString().Replace("/", "_").Trim() + "'";

        sColumnNames += ", 'Report']";

        string sColumnModels = "[{ name: 'ID', key: true, hidden: true }, ";
        sColumnModels += "{ name: 'Account', width: 150, align: 'center' }, ";
        sColumnModels += "{ name: 'Lob', width: 150, align: 'center' }";

        foreach (string item in sModel)
            sColumnModels += ", { name: 'C" + item.ToString().Replace("/", "_").Trim() + 
                "', width: 150, editable: true}";

        sColumnModels += ", { name: 'Report', width: 150, align: 'center' }]";

        week.ColumnName = sColumnNames;
        week.ColumnModel = sColumnModels;

        return week;
    }

js:

$.ajax({
        url: "Staffing/GetWeekDate",
        type: 'POST',
        dataType: 'json',
        contentType: "application/json",
        cache: false,
        success: function (data) {
            $("#jqTable").jqGrid({
                // Ajax related configurations
                url: "Staffing/LOBStaffing",
                datatype: "json",
                mtype: "POST",
                //ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                jsonReader: {
                    root: 'rows',
                    page: 'page',
                    total: 'total',
                    records: 'records',
                    repeatitems: true,
                    data: 'data'
                },

                // Specify the column names
                colNames: data.ColumnName,

                // Configure the columns
                colModel: data.ColumnModel,

                // Grid total width and height  
                width: 900,
                height: 350,

                sortname: 'Lob',
                // Paging
                rowList: [],        // disable page size dropdown
                pager: $("#jqTablePager"),
                pgbuttons: false,     // disable page control like next, back button
                pgtext: null,         // disable pager text like 'Page 0 of 10'
                viewrecords: true,
                rowNum: 2000,

                grouping: true,
                groupingView: {
                    groupField: ['Account', 'Lob'],
                    groupColumnShow: [true, true],
                    groupText: ['<b>{0}</b>'],
                    groupCollapse: false,
                    groupOrder: ['asc', 'asc'],
                    groupSummary: [true, true]
                },

                // Grid caption
                caption: "List of Forms"
            }).navGrid("#jqTablePager",
                {
                    refresh: true,
                    add: false,
                    edit: false,
                    del: false,
                    search: false,
                    refreshtext: "Refresh",
                    searchtext: "Search"
                },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                {multipleGroup: true }, // settings for search,
                {
                multipleGroup: true,
                sopt: ["cn", "eq"],
                caption: "Search",
                Find: "Search"
            }); // Search options. Some options can be set on column level

        },
        error: function () {
            alert('error');
        }
    });

Answer 1

colNames 和 colModel 的值应该是相同大小的项目的数组。您当前的代码似乎尝试使用 "['ID', 'Account', 'Lob', ...]" 和 等文本分配 strings>“[{名称:'ID'， key :true，隐藏:true}，...]”。 jqGrid 的代码尝试比较 arrays colNames 和 colModel 中的项目数量(请参阅 here )比较 <用作colNames 和colModel 值的strong>字符串。所以显示的消息并不正确，但您输入的数据仍然是错误的。

因此，要解决该问题，您必须修复 data.ColumnName 和 data.ColumnModel 的格式(更改类型)。

例如，您可以将 data.ColumnName 和 data.ColumnModel 中的 ' 替换为 \"。使字符串成为正确的 JSON 字符串，您可以使用 $.parseJSON() (我的意思是 colNames: $.parseJSON(data.ColumnName), colModel: $.parseJSON(data.ColumnModel ))。