排序不能和jqGrid一起工作
我一直有问题让jqGrid排序。我希望在客户端进行这种排序,但我也愿意对数据库进行新的调用以获得排序结果。排序不能和jqGrid一起工作
我可以点击列标题,排序箭头改变方向,但是数据根本不会改变。
我看过this question,但调用reloadGrid似乎没有帮助。
我的整个网格如下:
var x = $("#grid").jqGrid({
jsonReader: { root: "rows", repeatitems: false },
datatype: "json",
height: 'auto',
autowidth: true,
forceFit: true,
colNames:['ID','Name'],
colModel:[
{name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"},
{name:'name', index:'name', width:90, jsonmap: "name"}
],
caption: "Results",
loadonce: true,
sortable: true,
loadComplete: function() {
jQuery("#grid").trigger("reloadGrid"); // Call to fix client-side sorting
}
});
//This data comes from a web service call, hard coding in to test
var jsonData = [
{id: 1, name: 'Apple'},
{id: 2, name: 'Banana'},
{id: 3, name: 'Pear'},
{id: 4, name: 'Orange'}
];
x[0].addJSONData({ rows: jsonData });
如果从服务器加载未排序的数据,并希望只是有些地方数据一旦您不应jQuery("#grid").trigger("reloadGrid");
的loadComplete
内。回调loadComplete
将在上调用,每也对本地数据进行排序或分页。此外,最好在setTimeout
内拨打jQuery("#grid").trigger("reloadGrid");
。在重新加载之前完成首次加载的网格将会完成。
我没有测试过,但我想的loadComplete
正确的代码可能是有关以下
loadComplete: function() {
var $this = $(this);
if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
if ($this.jqGrid('getGridParam', 'sortname') !== '') {
// we need reload grid only if we use sortname parameter,
// but the server return unsorted data
setTimeout(function() {
$this.triggerHandler('reloadGrid');
}, 50);
}
}
}
在这种情况下的reloadGrid
将在网格来自服务器的第一负载只有一次叫。在下一个电话中,datatype
选项的值将已经为'local'
。
更新:Free jqGrid是jqGrid的分支,我从2014年底开始开发。它有许多新功能。可以使用选项forceClientSorting: true
强制排序和过滤客户端之前的数据当前页面的数据将显示在jqGrid中。因此,人们可以添加forceClientSorting: true
选项并删除旧的答案中描述的技巧。
谢谢!这是有道理的。我最终只是在服务器上进行分类并绑定新的数据,这是微不足道的,对我的目的很有效。 – 2012-04-23 20:35:30
@MikeChristensen:不客气!服务器上的几乎任何类型的实现都将很快在JavaScript中进行排序。所以在服务器上排序是最好的方法。 – Oleg 2012-04-23 20:41:45
我同意,特别是因为我不得不做的一些排序涉及多个键;所以我不得不弄清楚如何为jqGrid编写自定义比较函数 - 我相信这是可能的,但我现在决定走更简单的路线。 – 2012-04-23 21:31:46
找到一个解决方案,但不能完全肯定为什么这个工程。也许有人可以提供更好的答案。
var x = $("#grid").jqGrid({
jsonReader: { root: "rows", repeatitems: false },
datatype: "json",
height: 'auto',
autowidth: true,
forceFit: true,
colNames:['ID','Name'],
colModel:[
{name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"},
{name:'name', index:'name', width:90, jsonmap: "name"}
],
caption: "Results",
//Required for client side sorting
loadonce: true,
gridComplete: function(){
$("#grid").setGridParam({datatype: 'local'});
}
loadonce
只适用于预定义的加载程序。如果使用数据类型作为函数,则应在首次使用自定义函数加载网格后手动设置datatype:local
。
尝试这样:
datatype : function(){
$.ajax({
…
complete :function (…){
…
$("#mygrid").setGridParam({datatype:'local'});
}
})
},
你应该改进它,因为它可能是有用的,但迄今为止还没有。 – aimbire 2013-05-20 18:14:01
http://www.trirand.com/blog/?page_id=393/help/loading-json-data-techniques-and-sorting-issue/ – 2012-04-23 19:45:09