jqgrid 格式化复杂对象
我的服务器代码上有一个函数,它返回 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您没有发布用于填充网格的 JSON 或 XML 数据以及 jqGrid 的定义。本地数据或在使用
loadone:true
的情况下,内部数据将被保存,并且所有工作都以另一种方式进行。因此,应根据设置使用自定义格式化程序。因为我没有足够的信息,所以我尝试猜测。我认为您应该使用
最好的方法是更改服务器用于日期的数据格式并使用 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
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 theDateTime
. In the case you can useformatter:'date'
orformatter:'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:
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: