jquery - jqgrid 格式化复杂对象

Question

我的服务器代码上有一个函数，它返回 ElementRow 对象列表:

public class ElementRow {
    public string AreaName { get; set; }
    public YearData CurrentYear { get; set; }
    public YearData PreviousYear { get; set; }
}

public class YearData {
    public int Value1 { get; set; }
    public int Value2 { get; set; }
}

这些类生成一个像这样的 json:

{"d":
    {
        "Total":2,
    "Page":1,
    "Records":30,
    "Rows":[
        {"AreaID":0,"CurrentYear":{"Value1":1,"Value2":2},"PreviousYear":{"Value1":1,"Value2":2}},
        {"AreaID":1,"CurrentYear":{"Value1":5,"Value2":4},"PreviousYear":{"Value1":1,"Value2":2}},
        {"AreaID":2,"CurrentYear":{"Value1":2,"Value2":1},"PreviousYear":{"Value1":1,"Value2":2}},
        {"AreaID":3,"CurrentYear":{"Value1":1,"Value2":3},"PreviousYear":{"Value1":1,"Value2":2}}
    ],
    "UserData":null
    }
}

我已经定义了 colModel 来支持此数据结构，并希望创建一个自定义格式化程序函数来格式化一列中 YearData 类型的对象。我的colModel如下:

$("#dashboard").jqGrid({
    url: wsBaseUrl + 'MyWebService.asmx/MyMethod',
    colNames: ['Area Name','Current Year', 'Previous Year'],
    colModel: [
        { name: 'AreaName', index: 'AreaName', width: 120, template: colTextTemplate },
        { name: 'CurrentYear', index: 'CurrentYear', width: 100, align: 'center', sortable: false, formatter: YearDataFormatter },
        { name: 'PreviousYear', index: 'PreviousYear', width: 100, align: 'center', sortable: false, formatter: YearDataFormatter }
    ],
    jsonReader: {
        id: "AreaID"
    },
    pager: $('#dashboard_pager'),
    sortname: 'AreaName',
    sortorder: "asc",
    height: '250',
    rownumbers: false,
    gridview: false,
    subGrid: true,

    //subgrid definition omitted
});

然后定义YearDataFormatter函数如下:

function YearDataFormatter(cellvalue, options, rowObject) {
    var table = "<table><tr>";
    table += "<td>" + cellvalue.Value1 + "</td>";
    table += "<td>" + cellvalue.Value2 + "</td>";
    table += "</tr></table>";
    return table;
}; 

无论如何，当我尝试执行此函数时，问题是在 YearDataFormatter 函数内部，cellvalue 参数的值未定义，而用调试器查看它，有是 rowObject 参数内的有效值。

如何正确访问该单元格的值？

此外，是否有机会修改特定列的标题？我想创建一个两行标题，但如果我在 colNames 选项中添加标记，标题高度不会相应改变。

感谢您的支持!

Answer 1

您没有发布用于填充网格的 JSON 或 XML 数据以及 jqGrid 的定义。本地数据或在使用 loadone:true 的情况下，内部数据将被保存，并且所有工作都以另一种方式进行。因此应根据设置使用自定义格式化程序。

因为我没有足够的信息，所以我尝试猜测。我想你应该使用

function YearDataFormatter(cellvalue, options, rowObject) {
    var table = "<table><tr>",
        cellData = rowObject.CurrentYear; // or like rowObject[2]
    table += "<td>" + cellData.Value1 + "</td>";
    table += "<td>" + cellData.Value2 + "</td>";
    table += "</tr></table>";
    return table;
};

最好的方法是更改​​服务器用于日期的数据格式并使用 ISO 8601 日期格式。如果您使用.NET，则可以使用 "o" or "O" formatter DateTime 的。在这种情况下，您可以使用 formatter:'date' 或 formatter:'date', formatoptions:{srcformat:'ISO8601Long'}。

更新:我确信您在 jqGrid 定义中使用了更多默认设置。如果没有其他设置，您将无法读取 JSON 数据。经过小修改后，演示读取数据，我没有发现您使用的自定义格式化程序有任何问题:请参阅 here :

您可以将演示版与年轻人进行比较，看看差异。

关于你的第二个问题(网格标题中的多行数据)我建议你看看 here :