如何在jqgrid分组中仅按汇总值对列进行排序 [英] How to sort the column by its summary value alone in jqgrid grouping

问题描述

我在这里有可用的代码: https://jsfiddle.net/zqLp4yrg/41/

I have the code available here: https://jsfiddle.net/zqLp4yrg/41/

数据类型是本地"而不是json.

datatype is "local" not 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
    }
});

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

In here I want to sort the Remaining quantity based on its summary value in header. Please help.

推荐答案

您的演示有很多小问题:

Your demo has many small problems:

• 首先，您写到的有关数据类型用法的信息是"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(或两者)选项.

• First of all you write about the usage of datatype is "local", but you use datatype: "json" in the demo. Moreover, you use no loadonce: true option and no forceClientSorting: true option. It means that the server is responsible for sorting the data. Moreover, if you use grouping, then the data returned from the server have to be sorted (on the server) by both groupingView.groupField (CatId in your case) and then by sortname (RemainingQuantity in your case). The data which you use as the source are not sorted correctly. One sees, for example, that jqGrid displays two CatId: 2 and two CatId: 3 groups.
• You can fix the problem by adding loadonce: true and forceClientSorting: true options, but you use old version of free jqGrid (4.11.1), which is not support forceClientSorting: true. You have to upgrade to the latest version (4.14.0) of free jqGrid to be able to sort and group the data returned from the server on the client before displaying.
• The source data, which contains integer data will be returned from the server as strings. Moreover, some data items contains spaces (" 16" instead of "16" or 16). It changes the order of sorting the data.
• You should use sorttype (for example sorttype: "integer") to sort the data in the column corresponds to the type of the data.
• To sort the date column correctly you should use both sorttype: "date" and the formatter: "date" with the formatoptions (in you case: formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d/m/Y H:i:s" })
• If you want that the options rowNum, rowList and viewrecords work, then the grid have to have at least one pager. Thus you probably skip pager: true or toppager: true (or both) options.

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

The fixed demo is https://jsfiddle.net/OlegKi/zqLp4yrg/43/. I removed groupingView.groupollapse: true and height: 250 only to make easy to examine the results. The settings are not important for your main problem.

这篇关于如何在jqgrid分组中仅按汇总值对列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！