Hinzufügen von mehr als zwei columng Gruppenköpfe in jqgrid

Den Grund der Beschränkung des eine level group Header in jqGrid existieren, weil jqGrid bieten mehr als nur die Anzeige der Kopfzeilen. Sehen Sie am Beispiel der die demo erstellt für die Antwort, dass die Spaltenüberschriften nach der Gruppierung sind anklickbar (Sortieren nach der Spalte) und veränderbare (per drag&drop auf die Trennlinie zwischen zwei Spaltenüberschriften). Wenn Sie titleText Möglichkeit setGroupHeaders Sie können HTML-Fragmente, inclusive <table> element in die Spalte header. Es gibt Ihnen die Möglichkeit milti-level-Header. Man kann zählen resizable: false zu verweigern, ändern oder kann man schreiben, die benutzerdefinierte resizeStop Prozedur, die die Größe von Spalten in der Tabelle Hinzugefügt von titleText Möglichkeit setGroupHeaders.

Alles, was ich oben beschrieben habe, Klang theoretisch. Also schrieb ich die kleine demo und demonstriert die Vorgehensweise. Es zeigt das folgende raster

Die demo ist geschrieben, nicht für den häufigen Fall, aber es ist klar, dass man es als Grundlage für die weitere gemeinsame Lösung zu finden. In irgendeiner Weise hoffe ich, dass Sie es ändern können, um alle Ihre multi-level-grid.

Die wichtigsten Teile der demo finden Sie unter:

var grid = $("#list"),
    setHeaderWidth = function () {
        var $self = $(this),
            colModel = $self.jqGrid("getGridParam", "colModel"),
            cmByName = {},
            ths = this.grid.headers, //array with column headers
            cm,
            i,
            l = colModel.length;

        //save width of every column header in cmByName map
        //to make easy access there by name
        for (i = 0; i < l; i++) {
            cm = colModel[i];
            cmByName[cm.name] = $(ths[i].el).outerWidth();
        }
        //resize headers of additional columns based on the size of
        //the columns below the header
        $("#h1").width(cmByName.amount + cmByName.tax + cmByName.total - 1);
        $("#h2").width(cmByName.closed + cmByName.ship_via - 1);
    };

grid.jqGrid({
    ...
    colModel: [
        {name: "id", width: 65, align: "center", sorttype: "int", hidden: true},
        {name: "invdate", width: 80, align: "center", sorttype: "date",
            formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y"},
        {name: "name", width: 70},
        {name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right"},
        {name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right"},
        {name: "total", width: 65, formatter: "number", sorttype: "number", align: "right"},
        {name: "closed", width: 75, align: "center", formatter: "checkbox",
            edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}},
        {name: "ship_via", width: 100, align: "center", formatter: "select",
            edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN"}},
        {name: "note", width: 70, sortable: false}
    ],
    resizeStop: function () {
        //see https://stackoverflow.com/a/9599685/315935
        var $self = $(this),
            shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit");

        $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
        setHeaderWidth.call(this);
    }
});
grid.jqGrid ("navGrid", "#pager",
             {edit: false, add: false, del: false, refresh: true, view: false},
             {}, {}, {}, {multipleSearch: true, overlay: false});
grid.jqGrid("setGroupHeaders", {
    useColSpanStyle: true,
    groupHeaders: [{
        startColumnName: "amount",
        numberOfColumns: 5,
        titleText:
            '<table style="width:100%;border-spacing:0px;">' +
            '<tr><td id="h0" colspan="2"><em>Details</em></td></tr>' +
            '<tr>' +
                '<td id="h1">Price</td>' +
                '<td id="h2">Shiping</td>' +
            '</tr>' +
            '</table>'
    }]
});
$("th[title=DetailsPriceShiping]").removeAttr("title");
$("#h0").css({
    borderBottomWidth: "1px",
    borderBottomColor: "#c5dbec", //the color from jQuery UI which you use
    borderBottomStyle: "solid",
    padding: "4px 0 6px 0"
});
$("#h1").css({
    borderRightWidth: "1px",
    borderRightColor: "#c5dbec", //the color from jQuery UI which you use
    borderRightStyle: "solid",
    padding: "4px 0 4px 0"
});
$("#h2").css({
    padding: "4px 0 4px 0"
});
setHeaderWidth.call(grid[0]);

AKTUALISIERT: später Mehr code von setGroupHeaders ermöglicht es, mehrere Anrufe von setGroupHeaders auf dem gleichen raster. In der Weise kann man tun, erstellen multi-level-Header. jqPivot verwendet die Funktion (siehe die wiki).