显示带有动态列绑定的 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).目前作为行的ids将使用整数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" 属性> 是boolean，所以应该改为"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参数. url: 'SomeUrl/Getdata'和mtype: 'POST'的设置，在datatype:'jsonstring' 的情况下会被忽略code> 或datatype:'local'.所以你应该只删除 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).
你可以在here看到你的原始演示(我只做了type 更改为 `type:"GET" 因为我没有活动的服务器组件并将 JSON 保存为文本文件).我建议的修改后的相同演示是here.
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屋！
