Question

作为一个辅助项目，我正在编写一个定制的资源管理Web应用程序，它允许公司内的项目经理输入资源时间分配作为每月细分。目前它的工作方式就像一个仅显示一年快照的魅力，但是当我们走到年底时，我们需要能够预见到明年即将到来的几个月。专栏选择器可以隐藏已经过去的月份，但是由于我们将在今年8月或9月进行，我们希望能够管理新的或现有的资源。下一年。

以下是当前显示的内容：因此，我坚持如何使用jqGrid Free以最有效的方式正确设计它。

最初，我可以一次性发送2年或更长时间的json数据，并使网格更宽，以显示整个2年的快照。如果我能够预设列选择器不显示明年的整个月度细分数据，并且用户将能够在时间到来时切换明年的新月份，那么这可能会有效。不过，我需要做一些权衡，只在每年年底才显示整整2年。

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

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

因此，许多拥有固定资源的项目都会贡献给一个或多个项目。我的第一个目标是一个部门平均每年12个项目的70个资源。

其他部门可能或多或少，但现在只关注一个部门。

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

当前实现的方式是通过在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或其他字段可以更准确地指定每个资源。对于{代码，名称，年份，月份}组合，将会有更多作为一个项目的方式。 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和free jqGrid的所有功能。

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

1 个答案: