jqgrid动态组头未对齐

Question

我正在动态设置三个级别的组标题。但它们没有对齐。

demo

groupHeadersArr是一个二维数组，

    // groupHeadersArr[i][0] -> row 1 of header.
    // groupHeadersArr[i][1] -> row 2 of header.

以下是代码：

    var colNames = ["id", "userid", "totalsales", "totalsales", "totalsales"];
    var colModel = [
      {
        "name": "id"
      },
      {
        "name": "userid__"
      },
      {
        "name": "2015-03-02_2015-03-02_totalsales__"
      },
      {
        "name": "2015-03-03_2015-03-03_totalsales__"
      },
      {
        "name": "2015-03-04_2015-03-04_totalsales__"
      }
    ]
    // groupHeadersArr[i][0] -> row 1 of header.
    // groupHeadersArr[i][1] -> row 2 of header.
    var groupHeadersArr = [
      [
        [
          {
            "startColumnName": "2015-03-02_2015-03-02_totalsales__",
            "numberOfColumns": 1,
            "titleText": "2015-03-02"
          }
        ],
        [
          {
            "startColumnName": "2015-03-02_2015-03-02_totalsales__",
            "numberOfColumns": 1,
            "titleText": "2015-03-02"
          }
        ]
      ],
      [
        [
          {
            "startColumnName": "2015-03-03_2015-03-03_totalsales__",
            "numberOfColumns": 1,
            "titleText": "2015-03-03"
          }
        ],
        [
          {
            "startColumnName": "2015-03-03_2015-03-03_totalsales__",
            "numberOfColumns": 1,
            "titleText": "2015-03-03"
          }
        ]
      ],
      [
        [
          {
            "startColumnName": "2015-03-04_2015-03-04_totalsales__",
            "numberOfColumns": 1,
            "titleText": "2015-03-04"
          }
        ],
        [
          {
            "startColumnName": "2015-03-04_2015-03-04_totalsales__",
            "numberOfColumns": 1,
            "titleText": "2015-03-04"
          }
        ]
      ]
    ];
    $(document).ready(function() {
        $('#table')
            .jqGrid({
                colModel: colModel,
                colNames: colNames,
                autowidth: true,
                shrinkToFit: false,
                iconSet: "fontAwesome",
                maxHeight: 320,
                toolbar: [true, "top"],
                beforeSelectRow: function(rowid, e) {
                    return false;
                },
                hoverrows: false
            });
            groupHeadersArr.forEach( function( val ) {
                // console.log( val );
                $("#table").jqGrid('setGroupHeaders', {
                    useColSpanStyle: true, 
                    groupHeaders: val[0]
                });
                $("#table").jqGrid('setGroupHeaders', {
                  useColSpanStyle: true,
                  groupHeaders:val[1]
                });
            });
    });

有人可以告诉我代码有什么问题吗？

P.S。 ：此特定示例的标题的所需外观。

Answer 1

您应该重新组织groupHeadersArr的结构。您可以按列对项目进行分组，而不是按需要setGroupHeaders的行进行分组。

修改过的演示版本为https://jsfiddle.net/OlegKi/0fcqfnm7/3/，显示为

（上述行存在是因为您使用toolbar: [true, "top"]选项）。它使用以下代码

$(document).ready(function() {
    var colNames = ["id", "userid", "totalsales", "totalsales", "totalsales"];
    var colModel = [
      { "name": "id" },
      { "name": "userid__" },
      { "name": "2015-03-02_2015-03-02_totalsales__" },
      { "name": "2015-03-03_2015-03-03_totalsales__" },
      { "name": "2015-03-04_2015-03-04_totalsales__" }
    ]
    var groupHeadersArr = [
        [
            {
                "startColumnName": "2015-03-02_2015-03-02_totalsales__",
                "numberOfColumns": 1,
                "titleText": "2015-03-02"
            },
            {
                "startColumnName": "2015-03-03_2015-03-03_totalsales__",
                "numberOfColumns": 1,
                "titleText": "2015-03-03"
            },
            {
                "startColumnName": "2015-03-04_2015-03-04_totalsales__",
                "numberOfColumns": 1,
                "titleText": "2015-03-04"
            }
        ],
        [
            {
                "startColumnName": "2015-03-02_2015-03-02_totalsales__",
                "numberOfColumns": 1,
                "titleText": "2015-03-02"
            },
            {
                "startColumnName": "2015-03-03_2015-03-03_totalsales__",
                "numberOfColumns": 1,
                "titleText": "2015-03-03"
            },
            {
                "startColumnName": "2015-03-04_2015-03-04_totalsales__",
                "numberOfColumns": 1,
                "titleText": "2015-03-04"
            }
        ]        
    ];
    var $grid = $('#table');
    $grid.jqGrid({
        colModel: colModel,
        colNames: colNames,
        shrinkToFit: false,
        iconSet: "fontAwesome",
        maxHeight: 320,
        toolbar: [true, "top"],
        beforeSelectRow: function() {
            return false;
        },
        hoverrows: false
    });
    groupHeadersArr.forEach( function( val ) {
        $grid.jqGrid('setGroupHeaders', {
            useColSpanStyle: true, 
            groupHeaders: val
        });
    });
});