javascript - 如何在jqgrid分组中单独按汇总值对列进行排序

Question

我这里有代码:https://jsfiddle.net/zqLp4yrg/41/

数据类型是“本地”而不是 json。

$("#jqGrid").jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    mtype: "POST", // needed for JSFiddle echo service
    datatype: "json",
    colModel: [
        { label: 'CatId', name: 'CatId', key: true, width: 30 },
        { label: 'InventoryDate', name: 'InventoryDate', width: 70 },
        { label: 'ProductName', name: 'ProductName', width: 150 },
        { label: 'RemainingQuantity', name: 'RemainingQuantity', width: 150, summaryType: 'sum', sortable: true }

    ],
    iconSet: "fontAwesome",
    viewrecords: true,
    rowList: [20,30,50],
    width: 780,
    height: 250,
    rowNum: 20,
    sortname: "ProductName",
    grouping: true,
    groupingView: {
        groupField: ["CatId"],
        groupColumnShow: [true],
        groupText: [
            "CatId: <b>{0}</b>"
        ],
        groupOrder: ["asc"],
        groupSummary: [true],
        groupSummaryPos: ["header"],
        groupCollapse: true
    }
});

在这里，我想根据标题中的汇总值对剩余数量进行排序。请帮忙。

Answer 1

您的演示有很多小问题:

• 首先你写的数据类型的用法是“local”，但是你在演示中使用了datatype:“json”。此外，您不使用 loadonce: true 选项和 forceClientSorting: true 选项。这意味着服务器负责对数据进行排序。此外，如果您使用分组，那么从服务器返回的数据必须(在服务器上)按 groupingView.groupField (在您的情况下是 CatId )进行排序，然后按sortname(在您的情况下为RemainingQuantity)。您用作源的数据排序不正确。例如，我们可以看到 jqGrid 显示两个 CatId: 2 和两个 CatId: 3 组。
• 您可以通过添加 loadonce: true 和 forceClientSorting: true 选项来解决该问题，但您使用的是旧版本的免费 jqGrid (4.11.1)，该版本不是支持forceClientSorting:true。您必须升级到免费 jqGrid 的最新版本 (4.14.0)，才能在显示之前对客户端上的服务器返回的数据进行排序和分组。
• 包含整数数据的源数据将从服务器作为字符串返回。此外，某些数据项包含空格("16" 而不是 "16" 或 16)。它改变了数据的排序顺序。
• 您应该使用sorttype(例如sorttype: "integer")根据数据类型对列中的数据进行排序。
• 要正确对日期列进行排序，您应该同时使用 sorttype: "date" 和 formatter: "date" 以及 formatoptions (在您的情况下: formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d/m/Y H:i:s"})
• 如果您希望 rowNum、rowList 和 viewrecords 选项正常工作，则网格必须至少有一个寻呼机。因此，您可能会跳过 pager: true 或 toppager: true (或两者)选项。

修复的演示是 https://jsfiddle.net/OlegKi/zqLp4yrg/43/ 。我删除了 groupingView.groupollapse: true 和 height: 250 只是为了方便检查结果。这些设置对于您的主要问题并不重要。