寻呼机未按预期在 jqGrid 中使用 JSON 工作
我有一个关于 jqGrid 和 Json 的问题。
这是我的 jsp 文件的代码，其中包含 Jquery 的代码：
<body >
<script type="text/javascript">
jq(function() {
jq("#grid").jqGrid({
url:'/test-security-client/crud',
datatype: 'json',
mtype: 'GET',
colNames:['Id', 'Log Message'],
colModel:[
{name:'id',index:'id', width:55,editoptions:{readonly:true,size:10},hidden:true},
{name:'logMsg',index:'logMsg', width:300,editable:true, editrules:{required:true}, editoptions:{size:10}}
],
rowNum:20,
rowList:[20,40,60],
height: 450,
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Error Logs",
emptyrecords: "Empty records",
loadonce: false,
loadComplete: function() {
},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
}
});
jq("#grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:false},
{ },
{ },
{ },
{
sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true }
);
jq("#grid").navButtonAdd('#pager',
{ caption:"Delete",
buttonicon:"ui-icon-trash",
onClickButton: deleteRow,
position: "last",
title:"",
cursor: "pointer"
}
);
jq("#btnFilter").click(function(){
jq("#grid").jqGrid('searchGrid',
{multipleSearch: false,
sopt:['eq']}
);
});
});
</script>
...
这是我发送的 JSON：
{"total":"2","page":"1","records":"28","rows":[{"id":1,"logMsg":"ID of log:1-Requesting authentication. (SMA/SmaAdmin/password)"},{"id":2,"logMsg":"ID of log:2-Authentication received."},{"id":3,"logMsg":"ID of log:3-Test"},{"id":4,"logMsg":"ID of log:4-Test 2"},{"id":5,"logMsg":"ID of log:5-Test 3"},{"id":6,"logMsg":"ID of log:6-Test 4"},{"id":7,"logMsg":"ID of log:7-Test 5"},{"id":8,"logMsg":"ID of log:8-Test 6"},{"id":9,"logMsg":"ID of log:9-Test 7"},{"id":10,"logMsg":"ID of log:10-Test 8"},{"id":11,"logMsg":"ID of log:11-Test 9"},{"id":12,"logMsg":"ID of log:12-Test 10"},{"id":13,"logMsg":"ID of log:13-Test 11"},{"id":14,"logMsg":"ID of log:14-Test 12"},{"id":15,"logMsg":"ID of log:15-Test 13"},{"id":16,"logMsg":"ID of log:16-Test 14"},{"id":17,"logMsg":"ID of log:17-Test 15"},{"id":18,"logMsg":"ID of log:18-Test 16"},{"id":19,"logMsg":"ID of log:19-Test 17"},{"id":20,"logMsg":"ID of log:20-Test 18"},{"id":21,"logMsg":"ID of log:21-Test 19"},{"id":22,"logMsg":"ID of log:22-Test 20"},{"id":23,"logMsg":"ID of log:23-Test 21"},{"id":24,"logMsg":"ID of log:24-Test 22"},{"id":25,"logMsg":"ID of log:25-Test 23"},{"id":26,"logMsg":"ID of log:26-Test 24"},{"id":27,"logMsg":"ID of log:27-Test 25"},{"id":28,"logMsg":"ID of log:28-Test 26"}]}
这是我的问题： 这段代码正在工作，jqgrid 很好地显示，所有信息都很好地传递。但寻呼机工作得不好。因为，我无法在页面之间移动。 （我有 2 个页面，我在第 1 页启动 jqGrid，但我无法转到第 2 页）。
如果我将属性 loadonce 更改为 true.. 那么就可以工作。但我不想使用这个属性，并且所有记录都位于错误的位置。
据我了解 JSON 是正确的，并且代码是正确的，我不知道我做错了什么。 （我是 jqGrid 和 JQuery 的新手）。我想我的寻呼机有一种问题。
知道我做错了什么吗？我必须发送包含每个页面信息的 Json 吗？
I have a question about jqGrid and Json.
This is the code of my jsp file with the code of Jquery:
<body >
<script type="text/javascript">
jq(function() {
jq("#grid").jqGrid({
url:'/test-security-client/crud',
datatype: 'json',
mtype: 'GET',
colNames:['Id', 'Log Message'],
colModel:[
{name:'id',index:'id', width:55,editoptions:{readonly:true,size:10},hidden:true},
{name:'logMsg',index:'logMsg', width:300,editable:true, editrules:{required:true}, editoptions:{size:10}}
],
rowNum:20,
rowList:[20,40,60],
height: 450,
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Error Logs",
emptyrecords: "Empty records",
loadonce: false,
loadComplete: function() {
},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
}
});
jq("#grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:false},
{ },
{ },
{ },
{
sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true }
);
jq("#grid").navButtonAdd('#pager',
{ caption:"Delete",
buttonicon:"ui-icon-trash",
onClickButton: deleteRow,
position: "last",
title:"",
cursor: "pointer"
}
);
jq("#btnFilter").click(function(){
jq("#grid").jqGrid('searchGrid',
{multipleSearch: false,
sopt:['eq']}
);
});
});
</script>
...
And this is the JSON that I am sending:
{"total":"2","page":"1","records":"28","rows":[{"id":1,"logMsg":"ID of log:1-Requesting authentication. (SMA/SmaAdmin/password)"},{"id":2,"logMsg":"ID of log:2-Authentication received."},{"id":3,"logMsg":"ID of log:3-Test"},{"id":4,"logMsg":"ID of log:4-Test 2"},{"id":5,"logMsg":"ID of log:5-Test 3"},{"id":6,"logMsg":"ID of log:6-Test 4"},{"id":7,"logMsg":"ID of log:7-Test 5"},{"id":8,"logMsg":"ID of log:8-Test 6"},{"id":9,"logMsg":"ID of log:9-Test 7"},{"id":10,"logMsg":"ID of log:10-Test 8"},{"id":11,"logMsg":"ID of log:11-Test 9"},{"id":12,"logMsg":"ID of log:12-Test 10"},{"id":13,"logMsg":"ID of log:13-Test 11"},{"id":14,"logMsg":"ID of log:14-Test 12"},{"id":15,"logMsg":"ID of log:15-Test 13"},{"id":16,"logMsg":"ID of log:16-Test 14"},{"id":17,"logMsg":"ID of log:17-Test 15"},{"id":18,"logMsg":"ID of log:18-Test 16"},{"id":19,"logMsg":"ID of log:19-Test 17"},{"id":20,"logMsg":"ID of log:20-Test 18"},{"id":21,"logMsg":"ID of log:21-Test 19"},{"id":22,"logMsg":"ID of log:22-Test 20"},{"id":23,"logMsg":"ID of log:23-Test 21"},{"id":24,"logMsg":"ID of log:24-Test 22"},{"id":25,"logMsg":"ID of log:25-Test 23"},{"id":26,"logMsg":"ID of log:26-Test 24"},{"id":27,"logMsg":"ID of log:27-Test 25"},{"id":28,"logMsg":"ID of log:28-Test 26"}]}
HERE IS MY QUESTION: This code is working, the jqgrid is well displayed, all the information is comming well. BUT the pager is not working well. Because, I can't move between pages. (I have 2 pages, and I start the jqGrid in the page number 1.. but I cant go to the number 2).
If I change the property loadonce to true.. then Is working. But I dont want to use this property, and all the records are comming in wrong positions.
As I understand the JSON is right, and the code is right, I dont know what I am doing wrong. (I am new to jqGrid and JQuery). I guess that I have one kind of problem with the pager.
Any idea of what I am doing wrong? Do I have to send a Json with the information of each page?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的 JSON 与 JSON 一样正确，但它与 jqGrid 请求的数据不对应。让我们解释一下这一点。
您有
rowNum: 20、sortname: 'id'、sortorder: "asc"。在开始时（第一次填充网格时）jqGrid 向 URL'/test-security-client/crud'处的服务器发送具有page=1&rows=20& 的请求URL 末尾的 ;sidx=id&sord=asc：/test-security-client/crud?page=1&rows=20&sidx=id&sord=asc。这意味着在服务器的响应中，您应该仅包含按id排序的结果集中的前 20 项。因此，您必须按id对结果集进行排序（请参阅sidx=id和sord=asc-ORDER BY id)，然后获取第一页 (page=1)，其中页面大小为 20 (rows=20-SELECT (TOP 20)代码>）。来自服务器的当前响应包括全部 28 个结果集。对于第一页来说，这并不重要，但我认为第二页的请求响应包含相同的 28 个项目，而不是仅最后 8 个项目（排序对于获得正确的 8 个项目非常重要）。
如果您解决服务器代码中的问题，网格将在页面更改时显示正确的数据。
You JSON is correct as JSON, but it's not corresponds to the data requested by jqGrid. Let us I explain this.
You have
rowNum: 20,sortname: 'id',sortorder: "asc". At the beginning (at the first filling of the grid) jqGrid send to your server at the URL'/test-security-client/crud'the request havingpage=1&rows=20&sidx=id&sord=ascat the end of the URL:/test-security-client/crud?page=1&rows=20&sidx=id&sord=asc. It means that in the response from the server you should include only first 20 items from the result set sorted byid. So you have to sort the result set byid(seesidx=idandsord=asc-ORDER BY id) and then get the first page (page=1) where the size of the page is 20 (rows=20-SELECT (TOP 20)).You current response from the server includes all 28 of the result set. For the first page it's not critical, but I suppose that the response on request of the second page contains the same 28 items instead of only the last 8 items (the sorting is very important to get correct 8 items).
If you would fix the problem in your server code the grid will display correct data on changing of the page.