jqGrid Sort or Search does not work with columns h

2019-02-20 18:34发布

问题:

I have this jqGrid:

$("#report").jqGrid( {
        url:        '/py/db?coll=report',
        datatype:   'json',
        height:     250,
        colNames:   ['ACN', 'Status', 'Amount'],
        colModel:   [ {name:'acn', sortable:true},
                      {name:'meta.status', sortable:true},
                      {name:'amount'} ],
        caption: 'Show Report',
        rownumbers: true,
        gridview: true,
        rowNum: 10,
        rowList: [10,20,30],
        pager: '#report_pager',
        viewrecords: true,
        sortname: 'acn',
        sortorder: "desc",
        altRows: true,
        loadonce: true,
        mtype: "GET",
        rowTotal: 1000,
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "acn"
            }
     });

Notice that the column 'meta.status' is in JSON dot notation and accordingly the data sent from the server is like this:

{"page": "1", "total": "1", "records": "5", "rows": [ 
        {"acn":1,"meta": {"status":"Confirmed"}, "amount": 50},
        {"acn":2,"meta": {"status":"Started"}, "amount": 51},
        {"acn":3,"meta": {"status":"Stopped"}, "amount": 52},
        {"acn":4,"meta": {"status":"Working"}, "amount": 53},
        {"acn":5,"meta": {"status":"Started"}, "amount": 54} ] }

The problems are of two fold:

  • Sorting does not work on columns with dot notation, here "meta.status". It does not even show the sortable icons on the column header, and nothing happens even if the header is clicked. Sorting does not work, whether loadonce is true or false.
  • If I try Searching (after setting loadonce to true) for the column meta.status (other columns without dot notation is okay), then it throws up a javascript error like this.

回答1:

After changing of the definition of the last column from {name:amount} to {name:'amount'} I could reproduce your problem: the sorting on 'Status' not work, but I could not see any error message (see the demo).

One can fix the problem it one change the definition of the second column from

{name:'meta.status', sortable:true}

to

{name:'status', sortable:true, jsonmap: "meta.status"}

See the fixed demo here.



回答2:

As a rule of thumb to avoid this problem:

  1. Ensure that your name and index values are the same

    name: 'Date', index: 'Date',
    name: 'Clicks', index: 'Clicks',
    ...
    
  2. Ensure you set something like

    $("#jqGrid").setGridParam({datatype: 'local'}); 
    

    And that when you reload the grid - you correct this to "JSON" on reload if you're using it - i.e.

    $("#yourGridID").setGridParam({datatype: 'json'}).trigger("reloadGrid");
    
  3. Lastly, ensure that you use

    name: 'Date', index: 'Date', sortable:true
    

    Where you need it.