JQuery jqgrid没有在客户端排序

Question

数据很好地加载到网格中,但不会排序.

当我在表格标题中单击时,会出现排序箭头,但数据未被排序.

谢谢.

    $("#CompTable").jqGrid({ 
            url:'BomExplosionInJsonObj.asp'
        ,   datatype: 'json'
        ,   mtype: 'GET'
        ,   height: 400
        ,   colNames:['Part','Description','Src','Std Usage','Usage Inc Scrap','Rate Scrap','UOM','Item','Unit Cost','Stock']
        ,   colModel:[  {name:'COMP1_PART',index:'Part', width:120}
                                ,   {name:'WSCOMPDESC',index:'Desc', width:300}
                                ,   {name:'WSCOMPSRC',index:'Src', width:10}
                                ,   {name:'COMPUSAGE',index:'Usage', width:80, align:"right",sorttype:"float"}
                                ,   {name:'WSGROSSQTY',index:'TotUsage', width:80, align:"right",sorttype:"float"}
                                ,   {name:'COMPRATE_SCRAP',index:'Rate Scrap', width:80, align:"right",sorttype:"float"}
                                ,   {name:'COMPBASIC_UNIT',index:'UOM', width:20}
                                ,   {name:'COMP1_ITEM',index:'Item', width:20}
                                ,   {name:'WSCOMPUNITCOST',index:'UnitCost', width:80, align:"right",sorttype:"float"}
                                ,   {name:'WSCOMPQTYSTOCK',index:'Stock', width:80, align:"right",sorttype:"float"}
                            ]
        ,   jsonReader: {
                root:"rows"
            ,   page: "page"
            ,   total: "total"
            ,   records: "records"
            ,   repeatitems: false
            ,   id: "0"
            }
        ,   multiselect: false
        ,   caption: "Bom Detail"
        ,   rowNum: 10000
        ,   autoencode: true
        ,   loadonce: true
        ,   sortable: true
        ,   loadComplete: function() {jQuery("#CompTable").trigger("reloadGrid");}// Call to fix client-side sorting
    });
});

返回JSON数据(从firebug读取).

    {
     "total":"1"
    ,"page":"1"
    ,"records":"2"
    , "rows":
      [
       {"ID":1,"WSCOMPDESC":"ZYTEL E101L BLK MOUL ","WSCOMPUNITCOST":7.08,"WSCOMPSRC":"P ","WSCOMPQTYSTOCK":75,"COMPBASIC_UNIT":"KG ","COMPUSAGE":0.0034,"COMPRATE_SCRAP":0,"WSGROSSQTY":0.0034,"COMP1_PART":"1180019 ","COMP1_ITEM":" "
       },
       {"ID":2,"WSCOMPDESC":"INSERT ","WSCOMPUNITCOST":1.89,"WSCOMPSRC":"P ","WSCOMPQTYSTOCK":400,"COMPBASIC_UNIT":"EA ","COMPUSAGE":2,"COMPRATE_SCRAP":0,"WSGROSSQTY":2,"COMP1_PART":"4OWE195689\/ISS 2 ","COMP1_ITEM":" "
       }
      ]
    }

Answer 1

您的代码有许多重要错误:

1. colModel包含与同一项index的值不同的属性name.这是主要的错误.您没有指定sortnamejqGrid的任何选项,因此index服务器永远不会看到属性的值.如果使用,loadonce: true则index属性必须与name属性值相同.我建议你根本不要包含index属性.在这种情况下,index将使用name属性值初始化属性
2. 你使用错误的id财产价值jsonReader:id: "0".一个人在某些时候使用这样的价值repeatitems: true.在这种情况下,该行将在JSON输入中表示为数组.所以0值是正确的,因为in可以用作数组中的索引.在使用repeatitems: false的情况下,表示JSON输入中的数据行的项是具有命名属性的对象.所以你应该id: "ID"在你的情况下使用.此外,您不需要在jsonReader属性中包含哪些值是默认值(root:"rows",page: "page")等等.
3. 接下来的问题是使用无条件reloadGrid内部loadComplete.您应该了解loadComplete将在每次重新加载网格时执行(本地重新加载的事件).因此,永久重新加载网格是错误的.而且从另一个角度来看,reloadGrid内部的使用loadComplete是坏的.如果触发reloadGrid事件将立即执行**,但网格不处理以前的加载.因此,在ms 内部setTimeout以较小的时间间隔触发重载是更为正确的50.
4. 最后的建议是使用K&R(Kernighan和Ritchie)的代码编写方式.在另一种计算机语言中使用的代码格式不是那么重要,而且您个人觉得哪一种最好阅读并不重要.JavaScript拥有自己的权利.其中一个是自动分号插入(例如,请参见此处).如果您关注K&R,您将永远不会遇到自动分号插入的任何问题.
5. height: "auto"如果您需要显示的行数不多,并且使用列模板可以减少代码的大小并简化管理,我建议您使用.

经过上述描述后,改变可能会如下所示

var myFloatTemplate = { width: 80, align: "right", sorttype: "float" };

$("#CompTable").jqGrid({
    url: "BomExplosionInJsonObj.asp",
    datatype: "json",
    height: "auto",
    colNames: ["Part", "Description", "Src", "Std Usage", "Usage Inc Scrap", "Rate Scrap", "UOM", "Item", "Unit Cost", "Stock"],
    colModel: [
        {name: "COMP1_PART", width: 120},
        {name: "WSCOMPDESC", width: 300},
        {name: "WSCOMPSRC", width: 40},
        {name: "COMPUSAGE", template: myFloatTemplate},
        {name: "WSGROSSQTY", width: 120, template: myFloatTemplate},
        {name: "COMPRATE_SCRAP", width: 90, template: myFloatTemplate},
        {name: "COMPBASIC_UNIT", width: 60},
        {name: "COMP1_ITEM", width: 60},
        {name: "WSCOMPUNITCOST", template: myFloatTemplate},
        {name: "WSCOMPQTYSTOCK", template: myFloatTemplate}
    ],
    jsonReader: {
        repeatitems: false,
        id: "ID"
    },
    caption: "Bom Detail",
    rowNum: 10000,
    autoencode: true,
    loadonce: true,
    sortable: true,
    sortname: "COMP1_PART",
    //sortorder: "desc",
    loadComplete: function () {
        var $self = $(this);
        if ($self.jqGrid("getGridParam", "datatype") === "json") {
            setTimeout(function () {
                $self.trigger("reloadGrid"); // Call to fix client-side sorting
            }, 50);
        }
    }
});

相应的演示在这里.本地排序工作,它显示以下结果

更新:从我开发的版本4.12.0免费jqGrid分叉jqGrid开始,支持新forceClientSorting: true选项.它与loadonce: true选项结合使用,允许首先加载来自服务器响应的所有数据,然后在本地对数据进行排序,然后才显示数据页面.它与内网的重装的伎俩setTimeout,开始loadComplete,在回答说明,没有必要的.只需将上面的loadComplete代码替换为另外一个选项即可forceClientSorting: true.该选项forceClientSorting: true还有两个好处:

1. 在显示第一个(未排序的)网格后,没有看到任何闪烁;
2. 网格的性能更好,特别是如果它有很多行,因为显示网格的排序要慢得多.此外,旧答案中描述的技巧显示网格,然后删除内容(也是慢慢地),然后再次显示排序的网格.