jqGrid Free：帮助设计处理多个年度日历和月度细分数据

Question

作为一个业余项目，我正在编写一个定制的资源管理 Web 应用程序，它允许公司内的项目经理输入资源时间分配作为每月细目分类。目前它就像一个魅力，只显示一年的快照，但随着我们接近年底，我们需要能够预见明年即将到来的几个月。列选择器可以方便地隐藏已经过去的月份，但由于我们将在今年 8 月或 9 月开始，我们希望能够管理新的或现有的资源开始于下一年。

这是当前显示的内容：因此，我一直在研究如何使用 jqGrid Free 以最有效的方式正确设计它。

最初，我可以一次发回 json 2 年或更长时间的数据，并使网格变宽以显示整个 2 年的快照。如果我能够预设列选择器不显示明年的整个月度细分数据，那么这可能会起作用，并且用户将能够在时机成熟时切换明年的新月份。尽管如此，我还是需要做一些权衡，以仅在每年年底显示整整 2 年。

除此之外，我可以只坚持一年并添加一些前一年/下一年的按钮，以便用户可以来回切换。但是那样做，服务器需要向客户端来回发送数据并减慢整个过程。

金额数据缩减为12个月的全年细目项目数量及其分配资源。

因此，有多少项目以其固定的资源量贡献给一个或几个项目。我的第一个目标是平均每年为一个部门的 12 个项目提供 70 个资源。

其他部门可能会有或多或少，但目前只针对一个部门。

正如我在使用子网格实现年度的另一个线程中所讨论的那样，这样我可以在不同的年份重复当前网格的相同视图作为子网格。我仍然不确定这样做是否是个好方法。

目前的实现方式是 JSON 数据通过在 MySQL 数据库中执行 CRUD 操作的休息服务被推送到服务器和从服务器拉出。因此，查询具有某些分组的完整网格确实需要一些时间才能呈现回客户端。因此，我需要考虑性能问题。

pivot table 是我需要的东西吗？有这方面的例子吗？ Oleg 在我的 rotateColumnHeaders 的其他线程中提到过，但我不知道如何执行此操作？但如果这能解决我的问题，我一定会去做。

有什么建议可以解决这个问题吗？

非常感谢任何帮助！

谢谢！

更多更新： 这是我让它工作的多个页脚行：

Answer 1

主要问题是 content/format 您的输入数据。例如，如果输入数据已经准备好在 jqGrid 中显示，例如

var data = [
        {code:"A", name:"Project A",
            jan2017:1, feb2017:0, mar2017:0, apr2017:0,
            may2017:0, jun2017:0, jul2017:0, aug2017:0,
            sep2017:0, oct2017:0, nov2017:0, dec2017:1},
        {code:"A", name:"Project A",
            jan2017:1, feb2017:1, mar2017:0, apr2017:0,
            may2017:1, jun2017:0, jul2017:0, aug2017:0,
            sep2017:0, oct2017:1, nov2017:0, dec2017:0}
    ];

然后你可以直接创建colModel。可能类似于

colModel: [
    { name: "code", label: "Code", width: 50, align: "center" },
    { name: "name", label: "Name", width: 70 },
    { name: "jan2017", label: "Jan", template: intTemplate },
    { name: "feb2017", label: "Feb", template: intTemplate },
    { name: "mar2017", label: "Mar", template: intTemplate },
    { name: "apr2017", label: "Apr", template: intTemplate },
    { name: "may2017", label: "May", template: intTemplate },
    { name: "jun2017", label: "Jun", template: intTemplate },
    { name: "jul2017", label: "Jul", template: intTemplate },
    { name: "aug2017", label: "Aug", template: intTemplate },
    { name: "sep2017", label: "Sep", template: intTemplate },
    { name: "oct2017", label: "Oct", template: intTemplate },
    { name: "nov2017", label: "Nov", template: intTemplate },
    { name: "dec2017", label: "Dec", template: intTemplate },
    { name: "jan2018", label: "Jan", template: intTemplate },
    { name: "feb2018", label: "Feb", template: intTemplate },
    { name: "mar2018", label: "Mar", template: intTemplate },
    { name: "apr2018", label: "Apr", template: intTemplate },
    { name: "may2018", label: "May", template: intTemplate },
    { name: "jun2018", label: "Jun", template: intTemplate },
    { name: "jul2018", label: "Jul", template: intTemplate },
    { name: "aug2018", label: "Aug", template: intTemplate },
    { name: "sep2018", label: "Sep", template: intTemplate },
    { name: "oct2018", label: "Oct", template: intTemplate },
    { name: "nov2018", label: "Nov", template: intTemplate },
    { name: "dec2018", label: "Dec", template: intTemplate }
]

其中的列模板，例如下面的

var intTemplate = {
        width: 20, template: "integer",
        align: "center", editable: true
    };

演示 https://jsfiddle.net/d8auuc5r/31/ 演示了该方法。

另一种常见的情况：你有输入数据，它对应一个item，它描述了一个项目在一个月内的资源。像

{code:"A", name:"Project A", year: 2017, month: 2, value: 3}

或喜欢

{code:"A", name:"Project A", year: 2017, month: 2, week: 1, value: 1},
{code:"A", name:"Project A", year: 2017, month: 2, week: 2, value: 2}

week 或其他字段可以更准确地指定每个资源。在这种情况下，一个 {code, name, year, month} 组合会有多个作为一个项目。 jqPivot 将首先按您指定的属性 sort 输入数据，然后在那里分组，最后是一些属性的值（上例中的 value 属性 ) 将根据某些聚合函数进行聚合，例如 sum 函数。

jqPivot 允许生成新数据和相应的 colModel。然后它调用 setGroupHeaders 来创建分组 headers 并且可选地（如果使用 frozenStaticCols: true）它调用 setFrozenColumns 来冻结第一列。演示 https://jsfiddle.net/d8auuc5r/76/ 展示了这两种方法。它使用以下代码：

$("#grid2").jqGrid("jqPivot", input, {
    xDimension: [
        { dataName: "name", width: 70, label: "Name" },
        { dataName: "code", width: 50, align: "center",
            skipGrouping: true, label: "Code" }
    ],
    yDimension: [
        { dataName: "year" },
        { dataName: "month", sorttype: "integer",
            label: function (options) { return monthNames[options.yData - 1]; }
        }
    ],
    aggregates: [
        {
            member: "value",
            aggregator: "sum",
            template: "integer",
            align: "center",
            width: 20,
            editable: true
        }
    ],
    frozenStaticCols: true,
    useColSpanStyle: true
},
{
    cmTemplate: { autoResizable: true },
    autoResizing: { compact: true },
    pager: true,
    width: 360,
    iconSet: "fontAwesome",
    caption: "Pivot test",
    shrinkToFit: false,
    viewrecords: false,
    inlineEditing: { keys: true },
    navOptions: { add: false, edit: false, del: false, search: false },
    inlineNavOptions: { add: true, edit: true },
    onInitGrid: function () {
        var $self = $(this),
            p = $self.jqGrid("getGridParam"),
            toRotate = [], i;
        for (i = 2; i < p.colModel.length; i++) {
            toRotate.push(p.colModel[i].name);
        }

        $self.jqGrid("rotateColumnHeaders", toRotate);
    }
}).jqGrid("navGrid")
.jqGrid("inlineNav");

哪里

var input = [
        {code:"A", name:"Project A", year: 2017, month: 1, value: 1},
        {code:"A", name:"Project A", year: 2017, month: 2, value: 2},
        {code:"A", name:"Project A", year: 2017, month: 2, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 3, value: 1},
        {code:"A", name:"Project A", year: 2017, month: 4, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 5, value: 1},
        {code:"A", name:"Project A", year: 2017, month: 6, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 7, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 8, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 9, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 10, value: 1},
        {code:"A", name:"Project A", year: 2017, month: 11, value: 0},
        {code:"A", name:"Project A", year: 2017, month: 12, value: 1},
        {code:"A", name:"Project A", year: 2018, month: 1, value: 1},
        {code:"A", name:"Project A", year: 2018, month: 2, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 3, value: 1},
        {code:"A", name:"Project A", year: 2018, month: 4, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 5, value: 1},
        {code:"A", name:"Project A", year: 2018, month: 6, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 7, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 8, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 9, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 10, value: 1},
        {code:"A", name:"Project A", year: 2018, month: 11, value: 0},
        {code:"A", name:"Project A", year: 2018, month: 12, value: 1},
    ],
    monthNames = [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

编辑这样的网格会有一些问题，因为列是动态生成的。我只想解释 jqPivot 的主要思想，而不是在这里解释 jqPivot 的所有功能和一般的免费 jqGrid。

jqGrid Free：帮助设计处理多个年度日历和月度细分数据

jqGrid Free : Help on design of handling multiple yearly calendars with monthly breakdown data

javascript

jquery

jqgrid

free-jqgrid