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

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

colModel包含 index属性，这些属性与同一项目的name值不同。这是主要的错误。您没有指定jqGrid的任何sortname选项，因此服务器永远不会看到index属性的值。如果您使用loadonce: true，那么index属性必须与name属性的值相同。 我建议您不要包含index属性。如果index属性将使用name属性
您在 id：jsonReader 中使用了错误的id: "0"属性值。在repeatitems: true的情况下，有时会使用这样的值。如果该行将在JSON输入中表示为 array 。所以0值是正确的，因为in可以用作数组中的索引。在使用repeatitems: false的情况下，表示JSON输入中的数据行的项是具有命名属性的对象。因此，您应该在案例中使用 id: "ID" 。此外，您无需在jsonReader中包含默认值（root:"rows"，page: "page"）等属性。
下一个问题是在reloadGrid内使用无条件loadComplete。您应该了解每次重新加载网格时都会执行{em} （本地重新加载的事件）。因此，永久重新加载网格是错误的。此外，loadComplete内reloadGrid的使用从另一个角度来看是不好的。如果触发loadComplete，事件将立即执行*，但网格不处理先前的加载。因此，以reloadGrid ms之类的小时间间隔触发setTimeout内的重新加载会更为正确。

最后一项建议是使用K&R（Kernighan和Ritchie）的代码编写方式。在另一种计算机语言中使用哪种格式的代码格式并不重要，而且您个人认为哪种格式最好阅读并不重要。 JavaScript拥有自己的权利。其中一个是自动分号插入（例如，请参阅here）。如果您关注K＆amp; R，您将永远不会遇到自动分号插入的任何问题。

如果您需要显示的行数不多，并建议使用可以减少代码大小并简化管理的列模板，我建议您使用50。

如上所述，改变之后的内容将如下所示

height: "auto"

相应的演示是here。本地排序工作，它显示以下结果

更新：从我开发的版本4.12.0 free jqGrid jqGrid的分支开始，支持新的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); } } });选项。它与forceClientSorting: true选项结合使用，允许首先加载来自服务器响应的所有数据，然后对数据进行本地排序，然后才显示数据页面。它通过在loadonce: true内重新加载网格来实现这一诀窍，在setTimeout中开始，在答案中描述，不需要。只需将上述loadComplete代码替换为另一个选项loadComplete即可。选项forceClientSorting: true还有两个好处：

在显示第一个（未排序的）网格后，没有看到任何闪烁;

网格的性能更好，特别是如果它有很多行，因为显示网格的速度要慢很多。此外，旧答案中描述的技巧显示网格，然后删除内容（也是慢慢地），然后再次显示排序后的网格。

Answer 2

您发布的代码显示排序将在服务器上完成，而不是在客户端上完成。您的jqGrid将发布sord和sidx参数，以允许您在将数据返回到jqGrid时执行此操作。

Ex：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();
 ...

Answer 3

扫描了几个答案并尝试了大多数选项，但在本地运行良好的代码仍然无法用于部署。最后我删除了 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 jqgrid没有在客户端排序

3 个答案: