关于jquery：JQGrid colModel和数据的动态填充

Dynamic Population of JQGrid colModel and data

我正在尝试动态创建网格。我的目标是创建一种动态前端来显示一些数据库表。因此，我需要动态添加/删除列。我需要动态更改列的数据类型。

我使用了提供的脚本作为类似问题的答案。

我将网格构建好，以显示我的列。但是，没有数据加载到网格中。 Firebug显示请求被解雇了。返回正确的json数据。实际上，Grid还会触发gridComplete事件。但没有显示数据：-(

有人遇到这个问题吗？我花了一整天的时间将jsonReader和colModel调整为无济于事

我的示例html文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!doctype html>
<html>
<link href="../styles/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-1.4.2.js">
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-ui.js">
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.form.js">
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.subscribe.js">
<link rel="stylesheet" href="../themes/showcase/jquery-ui.css"
type="text/css" />
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.jqGrid.js">
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/struts2/jquery.struts2.js">
<script type="text/javascript" src="../js/refData.js">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.struts2_jquery.debug = true;
jQuery.struts2_jquery.loadAtOnce = true;
jQuery.scriptPath ="/struts2-jquery-grid-showcase/struts/";
jQuery.struts2_jquery.minSuffix ="";
jQuery.ajaxSettings.traditional = true;

jQuery.ajaxSetup ({
cache: false
});
$.ajax(
{
type:"POST",
url:"/struts2-jquery-grid-showcase/refData-table.action",
data:"",
dataType:"json",
success: function(result)
{
colD = result.gridModel;
colN = result.colNames;
colM = result.colModel;

jQuery("#refData").jqGrid({
jsonReader : {
cell:"",
id:"0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function(data){alert('loaded');},
loadError: function(xhr,status,error){alert('error');}
})
},
error: function(x, e)
{
alert(x.readyState +""+ x.status +""+ e.msg);
}
});
setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);
});

Maintain Reference Data
<table id="refData">
<tr>
<td />
</tr>
</table>

</html>

我的json数据：

{"JSON":"success","colModel":[{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}],"colNames":["UserInfo ID","User ID"],"gridModel":[{"userID":"SMI","userInfoId":5},{"userID":"ABC","userInfoId":7},{"userID":"PQR","userInfoId":8},{"userID":"FUR","userInfoId":10},{"userID":"COO","userInfoId":13}],"page":1,"records":56,"rows":15,"sidx":null,"sord":"asc","total":0}

在我看来，您忘记了将{}包含为gridModel的内容。当前数据看起来像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
"JSON":"success",
"colModel": [
...
],
"colNames": ["UserInfo ID","User ID" ],
"gridModel": [
{"userID":"SMI","userInfoId": 5},
{"userID":"ABC","userInfoId": 7},
{"userID":"PQR","userInfoId": 8},
{"userID":"FUR","userInfoId": 10},
{"userID":"COO","userInfoId": 13}
],
"page": 1,
"records": 56,
"rows": 15,
"sidx": null,
"sord":"asc",
"total": 0
}

而不是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
"JSON":"success",
"colModel": [
...
],
"colNames": ["UserInfo ID","User ID" ],
"gridModel": { [
{"userID":"SMI","userInfoId": 5},
{"userID":"ABC","userInfoId": 7},
{"userID":"PQR","userInfoId": 8},
{"userID":"FUR","userInfoId": 10},
{"userID":"COO","userInfoId": 13}
],
"page": 1,
"records": 56,
"rows": 15,
"total": 0
}
}

"jsonmap"的用法似乎也并不是我真正需要的。

相关讨论

非常感谢Oleg。

按照您的建议修改json的结构，然后进行一些调试以修复某些属性(例如root)后，我能够使其工作。这是最终的json和html：

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

$.ajax(
{
type:"POST",
url:"refData-table.json",
data:"",
dataType:"json",
success: function(result)
{
colD = result.gridModel;
colN = result.colNames;
colM = result.colModel;

jQuery("#refData").jqGrid({
jsonReader : {
repeatitems: false,
root:"dataset",
cell:"",
id:"0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager2'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function(data){alert('loaded');},
loadError: function(xhr,status,error){alert('error');}
})
},
error: function(x, e)
{
alert(x.readyState +""+ x.status +""+ e.msg);
}
});
setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);

JSON：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
"JSON":"success",
"colModel":[
{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},
{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}
],
"colNames":["UserInfo ID","User ID"],
"gridModel":{
"dataset":[
{"userID":"SMI","userInfoId":5},
{"userID":"ABC","userInfoId":7},
{"userID":"PQR","userInfoId":8},
{"userID":"FUR","userInfoId":10},
{"userID":"COO","userInfoId":13}
],
"page":1,
"records":56,
"rows":15,
"sidx":null,
"sord":"asc",
"total":0
}
}