javascript - jqGrid 免费 : Help on design of handling multiple yearly calendars with monthly breakdown data

Question

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

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

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

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

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

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

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

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

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

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

我应该如何解决这个问题有什么建议吗？

非常感谢任何帮助!

谢谢!

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

Answer 1

主要问题是您拥有的输入数据的内容/格式。例如，如果输入数据已经准备好在 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/演示了该方法。

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

{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 将首先按您指定的属性对输入数据进行排序，然后在那里分组，最后一些属性的值(上例中的 value 属性)将被聚合关于一些聚合函数，例如 sum 函数。

jqPivot 允许生成新数据和相应的 colModel。然后它调用 setGroupHeaders 来创建分组标题，并且可选地(如果使用 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。