Geek asks and answers

Sort does not work with jqGrid

I'm having trouble sorting jqGrid. I would prefer to do this sorting on the client, but I also want to make a new call to the database to get the sorted results.

I can click on the column headings and the sorting arrows sort, but the data does not change at all.

I looked through this question , however the reloadGrid call did not seem to help.

My whole grid looks like this:

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 } );
+3
source share
3 answers

, jQuery("#grid").trigger("reloadGrid"); loadComplete. loadComplete . , jQuery("#grid").trigger("reloadGrid"); setTimeout. , .

, , 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'.

: jqGrid - fork jqGrid, 2014 . . forceClientSorting: true, jqGrid. , forceClientSorting: true , .

+7

, , . , - .

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'}); 
    }
0

loadonce . , datatype:local .

- :

datatype : function (){
    $.ajax({
    …
    complete :function (…){
                …
                $("#mygrid").setGridParam({datatype:'local'});
        }
    })
},
-1

More articles:


All Articles