Question

您好我有下表来生成json数据集

它有以下数据我有脚本表

USE [GridSamples]
GO
/****** Object:  Table [dbo].[SalesStats]    Script Date: 12/13/2016 07:34:51 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[SalesStats](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [makes] [nchar](10) NOT NULL,
    [models] [nchar](10) NOT NULL,
    [fuelusagecity] [nchar](10) NOT NULL,
    [fuelusagehwy] [nchar](10) NOT NULL,
    [salesaboveavg] [bit] NOT NULL,
    [totalnumofsales] [money] NOT NULL,
    [highsalestext] [varchar](50) NULL,
    [saledate] [date] NOT NULL,
 CONSTRAINT [PK_SalesStats] PRIMARY KEY CLUSTERED 
(
    [id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[SalesStats] ON 

GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (1, N'toyota    ', N'corolla   ', N'17        ', N'12        ', 0, 120000.0000, NULL, CAST(0x9A330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (2, N'toyota    ', N'corolla   ', N'10        ', N'14        ', 0, 100000.0000, N'HIGH', CAST(0xA8330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (3, N'toyota    ', N'belta     ', N'15        ', N'10        ', 1, 200000.0000, NULL, CAST(0xC2330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (4, N'toyota    ', N'camry     ', N'13        ', N'10        ', 0, 300000.0000, N'HIGH', CAST(0x29340B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (5, N'nissan    ', N'skyline   ', N'14        ', N'9         ', 1, 500000.0000, N'HIGH', CAST(0x48330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (6, N'nissan    ', N'zx300     ', N'10        ', N'8         ', 0, 400000.0000, NULL, CAST(0x2B350B00 AS Date))
GO
SET IDENTITY_INSERT [dbo].[SalesStats] OFF
GO

在我的中间层ASP MVC中，控制器将其转换为以下json （UPADATED TO THE STRING SalesDate）

var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000.0000,"highsalestext":null,"salesdate":"2010-12-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"10","fuelusagehwy":"14","salesaboveavg":false,"totalnumberofsales":100000.0000,"highsalestext":"HIGH","salesdate":"2010-12-15"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000.0000,"highsalestext":null,"salesdate":"2011-01-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000.0000,"highsalestext":"HIGH","salesdate":"2011-04-23"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000.0000,"highsalestext":"HIGH","salesdate":"2010-09-10"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000.0000,"highsalestext":null,"salesdate":"2012-01-06"}];

我使用以下代码使用JqGrid自由网格生成网格。为了方便起见，我已将上述json数组添加到data数组

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/south-street/jquery-ui.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/css/ui.jqgrid.min.css" />
</head>
<body>

<table id="list483"></table>
<div id=""></div>

<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/js/i18n/grid.locale-de.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<script>

var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000.0000,"highsalestext":null,"salesdate":"2010-12-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"10","fuelusagehwy":"14","salesaboveavg":false,"totalnumberofsales":100000.0000,"highsalestext":"HIGH","salesdate":"2010-12-15"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000.0000,"highsalestext":null,"salesdate":"2011-01-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000.0000,"highsalestext":"HIGH","salesdate":"2011-04-23"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000.0000,"highsalestext":"HIGH","salesdate":"2010-09-10"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000.0000,"highsalestext":null,"salesdate":"2012-01-06"}];


    $("#list483").jqGrid("jqPivot",
            data,
            {
                frozenStaticCols: true,
                xDimension: [
                    {/*x0*/ dataName: "make", width: 200, label: "Make" },
                    {/*x1*/ dataName: "model", skipGrouping: true },
                    {/*x2*/ dataName: "fuelusagecity", hidden: true, skipGrouping: true },
                    {/*x3*/ dataName: "fuelusagehwy", width: 80, align: "center",
                        label: "fuel consumption", skipGrouping: true,
                        formatter: function (cellvalue, options, rowObject) {
                            return rowObject.x2 === null || rowObject.x3 === null ?
                                    "-" :
                            String(rowObject.x2) + "-" + String(cellvalue);
                        }
                    },
                    {/*x4*/ dataName: "salesaboveavg", hidden: true, width: 50, align: "center", skipGrouping: true },
                    {/*x5*/ dataName: "highsalestext", hidden: true, skipGrouping: true }
                ],
                yDimension: [
                    {/*y0*/    dataName: "salesdate",
                    sorttype: "date",
                        formatter: function (cellvalue, options, rowObject) {
                        //var x = rawObject.y0;
                        console.log(rowObject);
//                            return rowObject;
                    }
                }],
                aggregates: [{
                    member: "totalnumberofsales",
                    aggregator: "max"
                }]
            },
// grid options
            {
                iconSet: "fontAwesome",
                cmTemplate: { autoResizable: true, width: 90 },
                shrinkToFit: false,
                useUnformattedDataForCellAttr: false,
                autoResizing: { compact: true },
                groupingView: {
                    groupField: ["x0"],
                    groupColumnShow: [false],
                    groupText: ['<b>{0}</b>']
                },
                width: 450,
                pager: true,
                rowNum: 20,
                rowList: [5, 10, 20, 100, "10000:All"],
                caption: "<b>Car sales statistics</b>"
            }
    );
</script>

</body>
</html>

生成的网格显示在图像链接

下面

我有很多关于这个网格的问题。但随着答案的进展，我将逐一发布。但是现在开始以下问题：

当我开启分组时，应该出现在群组名称后面的崩溃图标图像？ 已解决：我找到了这个问题的答案，缺少字体 - 真棒库引起了这个问题



如何在日期列中转换json日期并在实际日期显示它们？已解决：一旦我在中间层进行转换以返回saledate字符串值，此问题就解决了

Grid在Toyota Corolla上有两个条目，但这应该是一个条目，在该条目中，totalnumofsales值应放在两个匹配日期。在单120000单元格中2010-12-01和100000中的2010-12-15单行输入AKA 燃料消耗值也必须是第一行值，即10-14

对于没有值的单元格显示0.00而不是显示0.00我需要它们显示空单元格

如何在生成网格时关闭网格的自动排序，组名称按字母顺序排序，但我不会网格排序，而是保留原始顺序来自后端

我如何实现上述目标？

Answer 1

我认为你的问题的根源是一些常见的误解，什么是数据透视表以及如何使用它。我尝试在下面详细解释输入数据的示例。

您使用以下输入数据：

[{ "id": 1, "make": "toyota", "model": "corolla", "fuelusagecity": "17", "fuelusagehwy": "12", "salesaboveavg": false, "totalnumberofsales": 120000.0000, "highsalestext": null, "salesdate": "2010-12-01" }, { "id": 2, "make": "toyota", "model": "corolla", "fuelusagecity": "10", "fuelusagehwy": "14", "salesaboveavg": false, "totalnumberofsales": 100000.0000, "highsalestext": "HIGH", "salesdate": "2010-12-15" }, { "id": 3, "make": "toyota", "model": "belta", "fuelusagecity": "15", "fuelusagehwy": "10", "salesaboveavg": true, "totalnumberofsales": 200000.0000, "highsalestext": null, "salesdate": "2011-01-10" }, { "id": 4, "make": "toyota", "model": "camry", "fuelusagecity": "13", "fuelusagehwy": "10", "salesaboveavg": false, "totalnumberofsales": 300000.0000, "highsalestext": "HIGH", "salesdate": "2011-04-23" }, { "id": 5, "make": "nissan", "model": "skyline", "fuelusagecity": "14", "fuelusagehwy": "9", "salesaboveavg": true, "totalnumberofsales": 500000.0000, "highsalestext": "HIGH", "salesdate": "2010-09-10" }, { "id": 6, "make": "nissan", "model": "zx300", "fuelusagecity": "10", "fuelusagehwy": "8", "salesaboveavg": false, "totalnumberofsales": 400000.0000, "highsalestext": null, "salesdate": "2012-01-06" }]

每个数据项都有很多属性。某些属性包含不同（或甚至唯一）的值（如id）。其他属性应组合在一起，并在组内的每个项上的其他属性上计算一些聚合函数。我在一个例子中解释了上述陈述。

输入数据包含某些车型的销售信息。例如，按日期或按年等显示每个汽车模型的销售数量可能会很有趣。

数据透视表包含三个主要参数xDimension，yDimension和aggregates。例如，请看下面的下图左侧部分（橙色标记）代表xDimension（make和model）。它主要构建网格的行。右侧部分（标记为蓝色）代表输入项的yDimension（year和month。正确大小的信息的最低级别包含在某些输入属性上计算聚合函数（max和count）的结果（在示例中为totalnumberofsales）。

如果只在aggregates参数中定义了一个聚合函数，则不会显示聚合函数的名称：

现在我必须显示jqPivot创建jqGrid的内容。首先，它按所有X和Y参数扫描所有输入数据。如果您定义了以下枢轴模型

xDimension: [ { dataName: "make", width: 100, label: "Make" }, { dataName: "model", width: 100, label: "Model", align: "center" } ], yDimension: [ { dataName: "salesdate", sortorder: "desc" } ], aggregates: [ { member: "totalnumberofsales", aggregator: "max" } ]

然后，将首先扫描所有数据，以查找["make", "model"]中xDimension和["salesdate"]中yDimension的{{1}}值相同的项目。输入数据有6个元素，索引从0到5.生成的xIndexes和yIndexes包含x和y的唯一值以及源数据的索引（从0到5）到具有数据的项目。可以在调用jqPivot之后添加以下行以查看索引：

var p = $("#list483").jqGrid("getGridParam"); console.log(JSON.stringify(p.pivotOptions.xIndex)); console.log(JSON.stringify(p.pivotOptions.yIndex));

结果会看到演示https://jsfiddle.net/oadzsnov/。我在下面包含了生成的xIndex和yIndex。 xIndex是

{ "items": [ ["toyota", "corolla"], ["toyota", "belta"], ["toyota", "camry"], ["nissan", "skyline"], ["nissan", "zx300"] ], "indexesOfSourceData": [ [0, 1], [2], [3], [4], [5] ], "trimByCollect": true, "caseSensitive": false, "skipSort": true, "fieldLength": 2, "fieldNames": ["make", "model"], "fieldSortDirection": [1, 1], "fieldCompare": [null, null] }

yIndex是

{ "items": [ ["2012-01-06"], ["2011-04-23"], ["2011-01-10"], ["2010-12-15"], ["2010-12-01"], ["2010-09-10"] ], "indexesOfSourceData": [ [5], [3], [2], [1], [0], [4] ], "trimByCollect": true, "caseSensitive": false, "skipSort": false, "fieldLength": 1, "fieldNames": ["salesdate"], "fieldSortDirection": [-1], "fieldCompare": [null] }

xIndex.items构建生成的数据透视表的行，yIndex构建列。您可以看到行将是

["toyota", "corolla"], ["toyota", "belta"], ["toyota", "camry"], ["nissan", "skyline"], ["nissan", "zx300"]

和列：

["2012-01-06"], ["2011-04-23"], ["2011-01-10"], ["2010-12-15"], ["2010-12-01"], ["2010-09-10"]

另外可以看到源数据的2个元素（参见xIndex.indexesOfSourceData，[0, 1]）xIndex.items对应相同的x向量["toyota", "corolla"]。数据透视表的内容（参见第一张图片上的黄色标记数据）将是执行指定聚合函数的结果。我们用过

aggregates: [ { member: "totalnumberofsales", aggregator: "max" } ]

并且索引为0和1的源元素是

[{ ... "make": "toyota", "model": "corolla", ... "totalnumberofsales": 120000.0000, ... "salesdate": "2010-12-01" }, { ... "make": "toyota", "model": "corolla", ... "totalnumberofsales": 100000.0000, ... "salesdate": "2010-12-15" }

项目具有不同的y向量（第一项为"salesdate": "2010-12-01"，第二项为"salesdate": "2010-12-15"）。因此，聚合的计算将非常简单：120000列中的"2010-12-01"，100000列中的"2010-12-15"和所有其他日期的0，因为那里当天没有["toyota", "corolla"]销售：

如果您要根据salesYear分配单独的 salesMonth和salesdate属性，那么您可以使用

xDimension: [ { dataName: "make", width: 100, label: "Make" }, { dataName: "model", width: 100, label: "Model", align: "center" } ], yDimension: [ { dataName: "salesYear", sorttype: "integer" }, { dataName: "salesMonth", sorttype: "integer" } ], aggregates: [{ member: "totalnumberofsales", aggregator: "max" }]

创建数据透视表。两个第一个源项都具有相同的salesdate（"2010-12-15"和"2010-12-15"）。 max聚合器在这两个项目上的计算得到120000，这将在结果网格中看到

请参阅https://jsfiddle.net/fa40onkz/

如果你可以跟我到那个地方，那么你可以理解任何效果，你可以在结果数据透视表中看到。

例如，使用
是错误的
{/*x2*/ dataName: "fuelusagecity", hidden: true, skipGrouping: true }, {/*x3*/ dataName: "fuelusagehwy", width: 80, align: "center", label: "fuel consumption", skipGrouping: true, formatter: function (cellvalue, options, rowObject) { return rowObject.x2 === null || rowObject.x3 === null ? "-" : String(rowObject.x2) + "-" + String(cellvalue); } }, {/*x4*/ dataName: "salesaboveavg", hidden: true, width: 50, align: "center", skipGrouping: true }, {/*x5*/ dataName: "highsalestext", hidden: true, skipGrouping: true }

在jqPivot的选项中，因为两个["toyota", "corolla"]源项目具有不同的 fuelusagecity，fuelusagehwy和highsalestext值。 salesaboveavg值是相同的，但我认为salesaboveavg的使用是相同的错误。 您应该从xDimension。
中删除这些项目
要在0值的单元格中显示空单元格，您可以定义列模板

var myIntTemplate = { formatter: "currency", align: "right", sorttype: "number", searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }, formatoptions: { defaultValue: ""}};

并在aggregates中使用它：

aggregates: [{ member: "cellvalue", template: myIntTemplate, aggregator: "max" }]

你会得到像这样的结果

就像演示https://jsfiddle.net/tnr2dgkv/
一样
你的最后一个问题是关于排序。对源项目进行排序对于创建正确的数据透视表非常重要。您可以使用jqPivot的skipSortByX: true或/和skipSortByY: true选项来禁止对初始数据进行排序，但如果使用分组（groupField: ["x0"]），结果数据将再次排序。我认为保持结果项的顺序的最简单方法（但在实现中仍然不是那么简单）将是为xDimension项定义自定义排序函数。我建议您阅读the wiki article以获取更多信息。

如何在自由网格jqgrid中对行进行分类？

1 个答案: