jqgrid 格式化复杂对象

发布于 2024-11-18 21:35:02 字数 2419 浏览 1 评论 0原文

我的服务器代码上有一个函数,它返回 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 选项中添加标记,标题高度不会相应改变。

感谢您的支持!

I have a function on my server code that returns a list of ElementRow objects:

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; }
}

These classes generates a json like this one:

{"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
    }
}

I have defined the colModel to support this data structure and would like to create a custom formatter function to format object of type YearData in one column. My colModel is as follow:

$("#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
});

and then defined the YearDataFormatter function as follow:

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

Anyway when I try to execute this function the problem is that inside the YearDataFormatter function the value of cellvalue parameter is undefined while, looking at it with the debugger, there is a valid value inside the rowObject parameter.

How can I access correctly the value of that cell?

Also, is there any chance to modify the header for a particular column? I would like to create a two-line header but if I add markup inside the colNames option the header height does not change accordingly.

Thanks for your support!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

韬韬不绝 2024-11-25 21:35:02

您没有发布用于填充网格的 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,则可以使用 DateTime 的“o”或“O”格式化程序。在这种情况下,您可以使用 formatter:'date'formatter:'date', formatoptions:{srcformat:'ISO8601Long'}

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

在此输入图片描述

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

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

You don't posted the JSON or XML data which are used to fill the grid and the definition of jqGrid. The local data or in case of the usage of loadone:true the internal data will be saved and all works in another way. So the custom formatter should be used depend on the settings.

Because I have not enough information I try to guess. I suppose that you should use

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;
};

The best would be to change the format of data which the server use for the date and use ISO 8601 date format. If you use .NET you can use "o" or "O" formatter of the DateTime. In the case you can use formatter:'date' or formatter:'date', formatoptions:{srcformat:'ISO8601Long'}.

UPDATED: I am sure that you use much more default settings in the jqGrid definition. Without additional settings you can't read the JSON data. After small modification the demo read the data and I don't see any problem with the custom formatter which you use: see here:

enter image description here

You can compare the demo with youth to see the differences.

About your second question (multiline data in the grid header) I recommend you to look at here:

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文