【问题标题】:jqPivot is grouping column headers that do not belong to the groupjqPivot 正在对不属于该组的列标题进行分组
【发布时间】:2015-07-21 22:21:16
【问题描述】:

我正在尝试利用 jqgrid 的 jqpivot 的列标题组功能来拥有两个列标题(一个标题代表星期几,另一个标题代表实际日期)。

    var crewAttendance = { "total": 1, "page": 0, "records": 7,
            "rows": [
                { "ID": "1", "UserID": "10", "AttendanceTypeID": "6", "AttendanceDate": "04/05/15", "AttendanceDay": "SUN" },
                { "ID": "21", "UserID": "10", "AttendanceTypeID": "12", "AttendanceDate": "04/06/15", "AttendanceDay": "MON" },
                { "ID": "41", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/07/15", "AttendanceDay": "TUE" },
                { "ID": "61", "UserID": "10", "AttendanceTypeID": "17", "AttendanceDate": "04/08/15", "AttendanceDay": "WED" },
                { "ID": "81", "UserID": "10", "AttendanceTypeID": "17", "AttendanceDate": "04/09/15", "AttendanceDay": "THU" },
                { "ID": "101", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/10/15", "AttendanceDay": "FRI" },
                { "ID": "121", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/11/15", "AttendanceDay": "SAT" }
            ], "userID": ["10"], "firstName": ["Christopher"]
        }
        // create jqPivot Grid
    var grid = $("#pvtCrewAttendance");
    grid.jqGrid("jqPivot",
        crewAttendance.rows,
        {
            xDimension: [
                {
                    isGroupField: false,
                    width: 70,
                    dataName: 'UserID',
                    label: 'UserID'
                }
            ],
            yDimension: [
                {
                    dataName: 'AttendanceDay'
                },
                {
                    dataName: 'AttendanceDate'
                }
            ],
            aggregates: [
                {
                    aggregator: 'max',
                    width: 80,
                    member: 'AttendanceTypeID',
                    summarytype: 'count',
                    sortable: true,
                    resizable: false
                }
            ],
            groupSummary: false,
            colTotals: true
        },
    // grid options
        {
        height: 'auto',
        pager: '#nav',
        caption: 'Crew Attendance'
    });

    var cm = grid.getGridParam('colModel');
    for (var iCol = 0; iCol < cm.length; iCol++) {
        var cmi = cm[iCol];
        if (cmi.label.length == 3 || cmi.label.length == 0 || cmi.label == '\&nbsp\;') {
            grid.jqGrid('hideCol', cmi.name);
        }
    }
    grid.trigger('reloadGrid');

到目前为止,它适用于 SUN 和 MON,但由于某种原因,jqPivot 的列标题分组在其余时间无法正常工作(TUE 和 WED 结合,然后 THU、FRI 和 SAT 也结合,但它们不应该因为它们在不同的日期)。见 jsFiddle here

我怎样才能让它在剩下的日子里工作?

注意:我无法将两个标题组合在一起,因为我要将日期旋转 90 度。我已经完成了这部分,但为了减少混乱而将其删除。

【问题讨论】:

    标签: jquery jqgrid free-jqgrid jqpivot


    【解决方案1】:

    感谢您的错误报告!

    经过长时间的调试,我发现并修复了这个错误。您的演示直接使用来自 GitHub 的最新资源。所以the last changes 也适用于演示。您可以验证它现在是否显示正确的结果。

    更新:我在 in the committhis one 中为 jsPivot 模块实施了更多修复。应该修复来自 jqGrid 4.7 的旧错误。现在您的 JSFiddle 演示 https://jsfiddle.net/OlegKi/4en1b68c/7/ 会产生正确的结果(我在演示中做了一些外观上的更改)。我希望代码也适用于更复杂的输入数据。此外,您可以通过隐藏具有cmi.label.length == 3 || cmi.label.length == 0 || cmi.label == '\&amp;nbsp\;' 的列来删除最后一个块。我将列的存在解释为又一个错误,因此我修改了代码,使列不再存在于网格中。

    【讨论】:

    • 感谢@Oleg 的回复,但我认为该错误尚未修复。我更改了对您的存储库的 javascript 引用,但输出中没有任何更改(不应合并的列标题仍然合并)。见 JSFiddle here
    • @Gelo32k:我做了更多更改(请参阅 UPDATED 部分),应该可以解决问题。请在更复杂的情况下再试一次,就像您发布的演示一样。
    • 嗨@Oleg,非常感谢您帮助我,jqPivot 现在完美运行!这是最终产品:jsfiddle.net/ngrL712u/1 列总数可能看起来不一致,但这是故意的 :)
    • @Gelo32k:不客气!请向我报告您将来可能发现的所有问题。我仍然不确定 jqPivot 是否完美,但至少我已经修复了我发现的所有错误。顺便说一句,我也使用活动的旋转标题。查看修改后的演示 jsfiddle.net/OlegKi/ngrL712u/2,我在其中展示了如何计算旋转柱的高度。我想将属性rotate: true 添加到colModel,但我仍然没有找到时间。我想专注于发布免费的 jqGrid 4.9,只是将现有的更改进行到逻辑结束并修复当前的错误。
    • @Gelo32k:我完全重写了jqPivotThe wiki article 描述了这些变化。我试图保持兼容性,但现在列的名称发生了变化。因此,您必须更改在自定义格式化程序和onInitGrid 中使用的UserID,以将userdata.UserID 修补为.x0。见jsfiddle.net/OlegKi/ngrL712u/3。我建议您检查新版本的jqPivot 生成的colModel 的名称。
    猜你喜欢
    • 2013-04-19
    • 2021-03-08
    • 1970-01-01
    • 2019-10-11
    • 1970-01-01
    • 2017-03-09
    • 2013-09-12
    • 2021-06-15
    • 2013-06-18
    相关资源
    最近更新 更多