jqgrid - ヘッダーjqgridをカスタマイズする方法

Question

このように jqGrid を作成したい
ボディ jqGrid を分割できます このコードを書きます

var data = [[1, 45, "E123", "1/1/11", "Done", 100], [2, 46, "E124", "1/12/11", "Done", 100]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ["SNO", "OrderID", "Location", "Date", "Status", "Amount"],
    colModel: [{
        name: 'SNO',
        index: 'SNO',
        width: 60},
    {
        name: 'OrderID',
        index: 'OrderID',
        width: 90,
        formatter:orderFmatter},
    {
        name: 'Location',
        index: 'Location',
        hidden: true},
    {
        name: 'Date',
        index: 'Date',
        width: 80,
        formatter:dateStatusFmatter},
    {
        name: 'Status',
        index: 'Status',
        width: 80,
        hidden: true},
    {
        name: 'Amount',
        index: 'Amount',
        width: 80}
    ],
    caption: "Stack Overflow Example",
});

var names = ["SNO", "OrderID", "Location", "Date", "Status", "Amount"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

function orderFmatter( cellvalue, options, rowObject )
{
    return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Location + "</div>";
}

function dateStatusFmatter( cellvalue, options, rowObject )
{
    return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Status+ "</div>";
}

このコードはこのグリッドを作成します

このグリッドでは、ボディ グリッドのような分割ヘッダーが必要です

Answer 1

jqGridはヘッダーのグループ化をサポートします。列ヘッダーに複数行のテキストを配置するだけでよい場合は、これをより簡単な方法で実装できます。

の値はcolNamesHTMLフラグメントにすることができます。したがって、必要なコードをの対応する項目に配置し、デフォルトでjqGridによって使用される固定の高さの代わりに列ヘッダーの高さcolNamesを使用するように強制するCSSを追加する必要があります。auto

デモでは、最後の列の列ヘッダーにHTMLフラグメントを配置します

<div style="height: auto; padding: 4px 0;">
    <span>Shipped</span><hr /><span>via</span>
</div>

さらにCSSを使用します

.ui-jqgrid .ui-jqgrid-labels .ui-th-column>div {height: auto}

その結果、下の図のようにグリッドを取得します