我正在尝试从 struts 操作传递 colModel 和列。就像在问题中一样
jqGrid and dynamic column binding
我不确定我错过了什么。请帮忙。花了很多时间试图让它正确。
jsp:
<script type="text/javascript">
$(document).ready(function(){
$.ajax(
{
type: "POST",
url: "interFinalTbaAction.action",
data: "",
dataType: "json",
success: function(result){
colD = result.couponStripList;
colN = result.columnNames;
colM = result.colModelList;
jQuery("#dataGrid").jqGrid({
jsonReader : {
repeatitems: false,
root:"rootVar",
cell: "",
id: "0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
loadComplete: function(data){alert('loaded');},
loadError: function(xhr,status,error){
alert('error');
}
})
},
error: function(x, e){
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
});
</script>
<h2>Inter Final Prices</h2>
<table id="dataGrid">
</table>
</html>
我的操作返回的 JSON 是
{
"colModelList": [
{
"index": "prceCM",
"jsonmap": null,
"key": false,
"name": "prceCM",
"resizeable": true,
"search": true,
"sortable": false,
"title": "03-01-11",
"width": 300
},
{
"index": "prceCMPlusOne",
"jsonmap": null,
"key": false,
"name": "prceCMPlusOne",
"resizeable": true,
"search": true,
"sortable": false,
"title": "04-01-11",
"width": 300
},
{
"index": "prceCMPlusTwo",
"jsonmap": null,
"key": false,
"name": "prceCMPlusTwo",
"resizeable": true,
"search": true,
"sortable": false,
"title": "05-01-11",
"width": 300
},
{
"index": "prceCMPlusThree",
"jsonmap": null,
"key": false,
"name": "prceCMPlusThree",
"resizeable": true,
"search": true,
"sortable": false,
"title": "06-01-11",
"width": 300
},
{
"index": "coupon",
"jsonmap": null,
"key": false,
"name": "coupon",
"resizeable": true,
"search": true,
"sortable": false,
"title": null,
"width": 300
}
],
"columnNames": [
"prceCM",
"prceCMPlusOne",
"prceCMPlusTwo",
"prceCMPlusThree",
"coupon"
],
"couponStripList": {
"rootVar": [
{
"coupon": 5.0,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"coupon": 5.5,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"coupon": 6.0,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"coupon": 6.5,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"coupon": 7.0,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
}
]
},
"deliveredDataTimestamp": null,
"requestedTimestamp": null
}
谢谢。
最佳答案
在我的测试中 your code工作。尽管如此，由于您的问题对许多 jqGrid 用户来说都很有趣，所以我决定在您的代码和 JSON 数据中写一些小错误和优化。
第一个也是最重要的问题是项目的 ID。设置id:"0" jsonReader 内部是错的。只有当数据项是数组而不是具有命名属性(repeatitems:false)的对象时，才能使用它。目前作为行的 id 将使用整数 1,2,... 我强烈建议您在 rootVar 的项目中包含 id 信息JSON 数据。
下一个问题。楼盘"title": "03-01-11"是错的。 "title" colModel 的属性(property)是 bool 值，所以应该改为"title": true .关闭问题:属性resizable您用作 resizeable这在英语中可能更正确，但它会被 jqGrid 忽略。
现在小优化:
datatype:'jsonstring', datastr:colD 更改至datatype: 'local', data: colD.rootVar gridview: true范围。 url: 'SomeUrl/Getdata' , 和 mtype: 'POST' , 在 datatype:'jsonstring' 的情况下将被忽略或 datatype:'local' .所以你应该只删除jqGrid的参数。 jsonmap不会在您的数据模型中使用我建议您将其从 JSON 数据中删除。 label 更好。 colModel 的属性(property).如果您不再需要 colNames (columnNames 在您的数据中)。 您可以看到的原始演示 here (我只将
type 更改为 `type:"GET"因为我没有事件的服务器组件并将 JSON 保存为文本文件)。我建议的修改后的相同演示是here .该方式的主要限制是所有数据都是本地 .因此，您可以使用本地排序、过滤和分页，但如果您确实想要服务器端排序、过滤和分页，则必须在 jqGrid 中包含更多附加代码。
我建议你的结果代码是:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "DynamicColumnBinding1.txt",
dataType: "json",
success: function(result){
var colD = result.couponStripList,
colM = result.colModelList;
$("#dataGrid").jqGrid({
datatype: 'local',
data: colD.rootVar,
gridview: true,
colModel :colM,
height: "auto",
loadComplete: function(data){
alert('loaded');
},
loadError: function(xhr,status,error){
alert('error');
}
});
},
error: function(x, e){
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
});
例如，相应的 JSON 数据可能如下
{
"colModelList": [
{
"index": "prceCM",
"label": "CM",
"name": "prceCM",
"width": 100
},
{
"index": "prceCMPlusOne",
"label": "CM + 1",
"name": "prceCMPlusOne",
"width": 100
},
{
"index": "prceCMPlusTwo",
"label": "CM + 2",
"name": "prceCMPlusTwo",
"width": 100
},
{
"index": "prceCMPlusThree",
"label": "CM + 3",
"name": "prceCMPlusThree",
"width": 100
},
{
"index": "coupon",
"label": "Coupon",
"name": "coupon",
"align": "right",
"sorttype": "number",
"formatter": "number",
"formatoptions": {
"thousandsSeparator": ","
},
"width": 100
}
],
"columnNames": [
"prceCM",
"prceCMPlusOne",
"prceCMPlusTwo",
"prceCMPlusThree",
"coupon"
],
"couponStripList": {
"rootVar": [
{
"id": 71,
"coupon": 5.0,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"id": 72,
"coupon": 5.5,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"id": 73,
"coupon": 6.0,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"id": 74,
"coupon": 6.5,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
},
{
"id": 75,
"coupon": 7.0,
"prceCM": "Not Available",
"prceCMPlusOne": "Not Available",
"prceCMPlusThree": "Not Available",
"prceCMPlusTwo": "Not Available"
}
]
},
"deliveredDataTimestamp": null,
"requestedTimestamp": null
}
关于jqgrid - 显示带有动态列绑定(bind)的 jqgrid 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5111653/