Question

我正在尝试扩展我的jQGrid以使标题有多行。

它看起来像这样

               -----------------------
Level 1 - >    | Application         |
               -----------------------  
Level 2 - >    |Code    | Name       |  
               -----------------------
               | 0002827| Mobile Phone1
               | 0202827| Mobile Phone2
               | 0042827| Mobile Phon3e
               | 0005827| Mobile Phone4
               | 0002627| Mobile Phon5e
               | 0002877| Mobile Phone6
               | 0002828| Mobile Phone7

我想知道如何用jQGrid 3.8.2做到这一点？有任何想法吗？

Answer 1

问题实际上并不像乍看之下那么容易。我试图找到一个简单的解决方案，但我找到的最佳结果是here： enter image description here

标题的顺序（第1级和第2级）并不像人们想要的那样。其他尝试（例如this或this）是错误的，因为排序和列调整大小的工作不正确。

为了理解：网格将<thead> 移到表格之外，并将其置于单独的中，这些位于表格上方（请参阅{{ 3}}了解更多信息）。它允许包含一些其他信息，例如在表头和表体之间搜索工具栏。如果在主列标题上存在其他标题（另外一个<tr>带有<th>元素），则jqGrid代码中的其他位置（如列大小调整和列排序）将无法正常工作。因此，只有在主列标题下插入 （当然看起来不太好）不会破坏列的排序和大小调整。

更新：在某些限制条件下，请参阅here确实提供问题的解决方案。

Answer 2

我知道这是一个迟到的答案，但为了将来参考header grouping现在包含在jqGrid版本4.2.0中

Answer 3

修改了Oleg的原创想法并将其变成了一个可以制作几个“跨越”标题的函数：

function head_groups(mygrid, settings){

    var colModel, header, config, ths;

    if (typeof mygrid == 'string') mygrid = $(mygrid);

    colModel = mygrid[0].p.colModel;
    ths = mygrid[0].grid.headers;
    header = mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead");

    if (!header.children("tr.head_group").length) {
        header.find("th").attr('rowspan', 2);
        header.append('<tr class="head_group"></tr>');
    }

    for (c in settings) {

        config = settings[c]; // caption, col, span

        for(var i=0; i<colModel.length; i++) {

            if (colModel[i].name == config.col) {
                for(var s=0; s<config.span; s++) {
                    $(ths[i+s].el).removeAttr('rowspan');
                }
                i +=s; // skip unnecessary cycles
                header.children("tr.head_group").append('<th class="ui-state-default ui-th-ltr" id="span_'+config.col+'" colspan="'+config.span+'" role="columnheader">'+config.caption+'</th>');
            }
        }
    }
}

使用示例：

head_groups("table#results", [
    {caption: 'Test 1', col: 'num', span: 2},
    {caption: 'Result', col: 'sta', span: 3},
    {caption: 'Bla bla bla', col: 'bl2', span: 2}
]);

它还为标题行添加了一个类，为某些样式或特殊功能添加了标题单元格的ID。

实际上这可以很容易地集成到jqGrid核心中：）

Answer 4

根据Help needed in Multiple column grouping (jQGrid 3.8.2)，jqGrid支持团队表示：

目前不支持此功能。单个列（子列）中的多个列标题当前不是jqGrid的一个功能。

Answer 5

我修改了Oleg的代码，以便能够在第一行显示分组，基本上我创建了一个虚拟的第三行，只是删除了第一行中的文本。

var x = 0;
insertColumnGroupHeader = function (mygrid, mergeSettingList) {
    var i, cmi, skip = 0, $tr, colHeader, iCol, $th,
        colModel = mygrid[0].p.colModel,
        ths = mygrid[0].grid.headers,
        gview = mygrid.closest("div.ui-jqgrid-view"),
    thead = gview.find("table.ui-jqgrid-htable>thead");
    $tr = $("<tr>");

    var currCaption = '';
    var currColumnName = '';
    var currSpan = 0;
    var currSkip = 0;
    tr = "<tr>";
    for (i = 0; i < colModel.length; i++) {
        $th = $(ths[i].el);
        cmi = colModel[i];

        if (currSkip === 0) {
            currColumnName = '';
            for (j = 0; j < mergeSettingList.length; j++) {
                if (mergeSettingList[j].col == cmi.name) {
                    currCaption = mergeSettingList[j].caption;
                    currColumnName = mergeSettingList[j].col;
                    currSpan = mergeSettingList[j].span;
                    currWidth = mergeSettingList[j].width;
                    break;
                }
            }
        }

        if (cmi.name !== currColumnName) {
            if (currSkip === 0) {
                $th.attr("rowspan", "2");
            } else {
                // Skip part of group
                denySelectionOnDoubleClick($th);
                currSkip--;
            }
        } else {
            denySelectionOnDoubleClick($th);

            tr += '<th class="ui-state-default ui-th-ltr" colspan="' + currSpan + '" role="columnheader">' + currCaption + '</th>';
            currSkip = currSpan - 1;
        }
    }
    tr += "</tr>";
    mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr);

    $th = $(ths[0].el);
    tr = "<tr>";
    var html = $th.parent().html();
    tr += html;
    tr += "</tr>";

    mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr);
    for (i = 0; i < colModel.length; i++) {
        $th = $(ths[i].el);
        cmi = colModel[i];
        $th.empty();
        $th.css({"padding-top": "0px", height: "0px", border: "0px"});
    }
}

示例电话。

var mergeParam = [
        {caption: ' ', col: 'ActionKey', span: 3},
        {caption: 'Planned', col: 'PlannedStartColKey', span: 5},
        {caption: 'Actual', col: 'ActualStartColKey', span: 12}
    ];
insertColumnGroupHeader2($(GridNames.Grid), mergeParam);

jQgrid：多列行标题

5 个答案: