jquery - 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":" "
       }
      ]
    }

score 16 · Accepted Answer

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

colModel包含与同一项目index的值不同的属性name。这是主要的错误。您没有指定sortnamejqGrid 的任何选项，因此index服务器永远不会看到属性的值。如果使用loadonce: truethenindex属性必须与name属性的值相同。我建议您根本不要包含index属性。在这种情况下，index属性将使用name属性的值进行初始化
您在:中使用了错误的id属性值。有时在的情况下使用这样的值。在这种情况下，该行将在 JSON 输入中表示为array。所以值将是正确的，因为 in 可以用作数组中的索引。在使用情况下，JSON 输入中表示数据行的项目是具有命名属性的对象。所以你应该在你的情况下使用。此外，您不需要在属性中包含默认值 ( , ) 等。jsonReaderid: "0"repeatitems: true0repeatitems: falseid: "ID"jsonReaderroot:"rows"page: "page"
下一个问题是无条件reloadGridinside of的使用loadComplete。您应该了解，每次重新加载网格时loadComplete都会执行此操作（本地重新加载事件）。所以永久重新加载网格是错误的。此外，从另一个角度来看， inside of 的使用是不好的。如果触发事件，将立即执行*，但网格不在处理先前的加载。因此，在ms之类的小时间间隔内触发重新加载会更正确。reloadGridloadCompletereloadGridsetTimeout50
最后一个建议是使用K&R（Kernighan 和 Ritchie's）的代码编写风格。您在另一种计算机语言中使用哪种格式的代码格式并不重要，您个人认为哪种格式最好读也不重要。JavaScript 有它自己的权利。其中之一是自动分号插入（例如，请参见此处）。如果您遵循 K&R，您将永远不会遇到自动分号插入的任何问题。
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);
        }
    }
});

对应的演示在这里。本地排序有效，它显示以下结果

在此处输入图像描述

更新：从我开发的 jqGrid 的 4.12.0 版免费 jqGrid分支开始，支持新forceClientSorting: true选项。它与loadonce: true选项结合使用，允许首先从服务器响应中加载所有数据，然后在本地对数据进行排序，然后才显示数据页面。它使重新加载网格内部的技巧setTimeout，开始于loadComplete，在答案中描述，不需要。只需将上面的loadComplete代码替换为一个附加选项forceClientSorting: true。该选项forceClientSorting: true还有另外两个好处：

在显示第一个（未排序的）网格后，看不到任何闪烁；
网格的性能更好，特别是如果它有很多行，因为显示网格比排序慢得多。此外，旧答案中描述的技巧显示网格，然后删除内容（这也很慢），然后再次显示排序的网格。

score 0 · Accepted Answer

您发布的代码显示排序将在服务器上而不是在客户端上完成。作为将数据返回到 jqGrid 的一部分，您的 jqGrid 将发布sord和sidx参数以允许您这样做。

例如：C# MVC 控制器代码，其中也执行分页

public ActionResult GetGridData(string sidx, string sord, int page, int rows, bool _search, string filters)
{
 ...
 var pagedQuery = wholeDataSet.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows).ToList();
 ...

score 0 · Accepted Answer

扫描了几个答案并尝试了大多数选项，但在本地完美运行的代码仍然无法部署。最后，我删除了 dotnetcdn 和 googleapis 的 jquery 链接，并开始了解基础知识 -

在https://jqueryui.com/sortable/上打开源代码并复制 src 链接

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

我今年 68 岁，三天的挣扎实在太多了。所以在stackoverflow上分享答案这是我给所有人的回报，帮助我学习编码

jquery - JQuery jqgrid不在客户端排序

3 回答 3

Related

Reference