Javascript jQgrid:多列行标题

我试图扩展我的jQGrid，使标题有多行

它看起来像这样

我想知道如何使用jQGrid 3.8.2实现这一点？有什么想法吗

根据，jqGrid支持团队指出：

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

---

这个问题并不像乍看起来那么容易。我试图找到一个简单的解决方案，但我发现最好的结果是：

标题（级别1和级别2）的顺序与人们希望的不同。其他类似或的尝试都有缺陷，因为排序和列大小调整工作并不更加正确

为了便于理解，网格将

移动到表的外部，并将其放置在位于表上方的单独的内部（有关更多信息，请参阅）。它允许在表头和表体之间包含一些附加信息，如搜索工具栏。jqGrid代码中的其他位置，如列大小调整和列排序，如果在主列标题上存在其他标题（一个或多个

带有

元素），则不正确。因此，只有在主列标题下插入额外的列标题（当然看起来不太好）才不会破坏列的排序和大小调整

---

更新：查看在某些限制条件下哪些提供了问题的解决方案。

修改了Oleg的原始想法，并将其变成一个可以生成多个“跨距”标题的函数：

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

---

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

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

我修改了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"});
    }
}

---

这是真的，我知道这一点。我正试图找到一种实现这一目标的方法。即使它通过一些异常的方法。如果你让它工作，你应该考虑向JQGrand团队提交一个补丁，所以修复可以滚动到未来版本。哈哈哈，贾斯廷，兄弟，这就是为什么我张贴！50分不够？；）@Jonathan：下一次我计划更准确地检查jqGrid的排序和大小调整代码，并尝试解决第一行标题的问题。我希望在like行中包含类（“th.ui th column”而不是“th”）可以解决这个问题。@Jonathan：我在jqGrid源代码中找到了一些地方，这些地方造成了问题。看看它还不是最终版本，但是很多东西已经在IE和Firefox中运行（还没有在Chrome中）。谢谢你的热情，很棒的解决方案@乔纳森：看看哪一个在某些限制条件下提供了问题的解决方案。@Oleg，我用你的方式做了一些改进。我在底部添加了一个空白行，实际上我已经停止使用JQGrid，因为它不太适合MVC，而是手工编写代码。我确实发现它对积垢类型的东西非常有用，但仅此而已。感谢您的反馈信息！

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}
]);

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);