jQgrid: mehrere Spalte Zeilenköpfe

Das problem ist wirklich nicht so einfach, wie es aussieht auf den ersten Blick. Ich habe versucht zu finden, eine einfache Lösung, aber das beste Ergebnis, das ich fand, Sie sehen hier:

Die Reihenfolge der überschriften (Ebene 1 und 2) ist nicht, wie man es gerne hätte. Andere versuche wie diese oder diese fehlerhaft sind, weil die Sortierung und der Spalte Größenanpassung funktioniert nicht mehr richtig.

Für das Verständnis: das grid bewegt die <thead> außerhalb der die Tabelle, und Orte, die es in separaten , welche sich oberhalb der Tabelle (siehe hier für weitere Informationen). Es können darunter auch einige zusätzliche Informationen, wie die Suche Symbolleiste zwischen in der Kopfzeile der Tabelle, und die Tabelle Körper. Andere Orte in der jqGrid code wie Spalte ändern und die Spaltensortierung funktioniert nicht korrekt, wenn es noch andere Header (der eine mehr <tr> mit <th> Elemente) über die wichtigsten Spaltenüberschriften. Also nur das einfügen von zusätzlichen Spaltenüberschriften unter die wichtigsten Spalten-Header (das sieht nicht schön natürlich) nicht bricht das Sortieren und die Größe der Spalten.

AKTUALISIERT: Sehen die Antwort, die für die Lösung des Problems unter einigen Einschränkungen.

Verändert die ursprüngliche Idee von Oleg und es ist in einer Funktion, machen einige "übergreifende" Header:

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

Nutzung Beispiel:

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

Es fügt auch eine Klasse für die Kopfzeile und die IDs für die header-Zellen für einige styling oder eine Besondere Funktionalität.

In der Tat, kann dies problemlos integriert in das jqGrid core 🙂

Ich veränderte den code von Oleg in der Lage sein zu zeigen, die Gruppierung in der ersten Reihe, die im Grunde erstellt habe ich eine dummy Dritte Zeile und nur den text gelöscht, der in der ersten Reihe.

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

Beispiel nennen.

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