显示带有动态列绑定的jqgrid的问题 [英] Problem showing jqgrid with dynamic column binding
问题描述
我正在尝试通过struts动作传递colModel和列.就像问题一样 jqGrid和动态列绑定
I am trying to pass the colModel and columns from struts action. Just like in the question jqGrid and dynamic column binding
我不确定我缺少什么.请帮忙.花了很多时间试图解决问题.
I am not sure what I am missing. Please Help. Spent quite some time trying to get it right.
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是
The JSON that my action retuns is
{
"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
}
谢谢.
推荐答案
在我的测试中您的代码有效.但是，由于您的问题的主题对于许多jqGrid用户来说都很有趣，因此我决定在您的代码和JSON数据中给您写一些小错误并进行优化.
In my tests your code worked. Nevertheless, because the subject of your question is interesting for many jqGrid users, I deceide to write you some small errors and optimization in your code and JSON data.
第一个也是最重要的问题是项目ID. jsonReader内部的id:"0"设置错误.仅当数据项是数组而不是具有命名属性(repeatitems:false)的对象时才可以使用它.当前，由于行ID将使用整数1,2，....我强烈建议您在JSON数据的rootVar项中包含ID信息.
The first and the most important problem is with the ids of items. The setting id:"0" inside of jsonReader is wrong. It can be used only if the items of data are array and not objects with named properties (repeatitems:false). Currently as ids of rows will be used integers 1,2,... I strictly recommend you include id information in the items of rootVar of JSON data.
下一个问题.属性"title": "03-01-11"错误. colModel的"title" 属性为布尔值，因此应将其更改为"title": true.关闭问题:用作resizeable的属性resizable在英语中可能更正确，但jqGrid将忽略它.
Next problem. The property "title": "03-01-11" is wrong. The "title" property of colModel is boolean, so it should be changed to "title": true. Close problem: the property resizable you use as resizeable which is probably more correct in the English, but it will be ignored by jqGrid.
现在小的优化:
- 您可以从
datatype:'jsonstring', datastr:colD更改为datatype: 'local', data: colD.rootVar - 添加
gridview: true参数. - 在
datatype:'jsonstring'或datatype:'local'的情况下，设置url: 'SomeUrl/Getdata'和mtype: 'POST'将被忽略.因此，您只需要删除jqGrid的参数即可. - 因为
jsonmap不会在您的数据模型中使用，所以建议您将其从JSON数据中删除. - 在我看来，最好使用
colModel的其他label属性.在这种情况下，您将不再需要colNames(数据内的columnNames).
- You can change from
datatype:'jsonstring', datastr:colDtodatatype: 'local', data: colD.rootVar - Add
gridview: trueparameter. - The setting
url: 'SomeUrl/Getdata', andmtype: 'POST', will be ignored in case ofdatatype:'jsonstring'ordatatype:'local'. So you should just remove the parameters of jqGrid. - Because
jsonmapwill not used in your data model I suggest you to removed it from the JSON data. - It seems to me better to use additional
labelproperty of thecolModel. In the case you will no more needcolNames(columnNamesinside your data).
您的演示原始版可以在此处(我仅作了将type更改为`type:"GET"的原因是因为我没有活动的服务器组件，并且将JSON保存为文本文件).我建议修改后的相同演示是在此处.
The original your demo you can see here (I made only the changes of type to `type:"GET" beacuse I have no active server components and saved the JSON as a text file). The same demo after the modifications which I suggested is here.
此方式的主要限制是所有数据都将本地.因此，您可以使用本地排序，过滤和页面调度，但是如果您希望在服务器端进行排序，过滤和页面调度，则不必在jqGrid中包含更多其他代码.
The main restriction of the way is that all data will be local. So you can use local sorting, filtering and paging, but if you do want have server side sorting, filtering and paging than you have to include more additional code in your jqGrid.
我建议您生成的代码是:
The resulting code which I suggest you is:
$(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数据例如可以是
the corresponding JSON data could be for example following
{
"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的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
