4

jqgridを介してこの種のデザインを取得することは可能です 

   ------------------------------- ----------
   | S.N0 | order ID   |   Date  |   Amount |
            ---------    -------
   |      | Location   |   Status|          |
    ------------------------------ ---------
   |   1  |  45        |  1/1/11 |  100     |
            ---------    -------- 
   |      |  E123      |   Done  |          |
    ------------------------------ ----------

ここで 2X2 (2 列目、2 行目) では、注文 ID と場所を表示する必要があります。場所の値はオーダー ID の下に表示されます。可能です？

4

1 に答える 1

5

列には、任意のスタイルを適用できるカスタム フォーマッタを定義できます。そのフォーマッタでは、行内のすべてのオブジェクトの値にアクセスできます。したがって、Order/Location フォーマッタの場合、次のように 2 つを組み合わせることができます。

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

おそらく、これらの div にクラスを追加して、ニーズに合わせてより適切にスタイルを設定できるようにする必要があります。列の定義に関しては、列の 1 つで customFormatter を宣言する必要があります (注: 宣言されている列は、上記の関数の変数 cellvalue になります)。他の列はそのまま非表示にする必要があります。 rowObject の一部として必要です。元。

{
    name: 'OrderID',
    index: 'OrderID',
    width: 90,
    formatter:orderFmatter},
{
    name: 'Location',
    index: 'Location',
    hidden: true},

これが私のサンプル全体です。

$("#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",
});

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

フィドルもここで入手できます。

それはあなたのヘッダーを残すだけで、これは少し難しく、醜くなる可能性があります. ヘッダーで分割レベルを実行せず、次のようなことを行うことをお勧めしOrder Id/Locationます。これを行うことで設定できます：

jQuery("#grid").jqGrid('setLabel', 'OrderID', 'Order Id/Location');

このフィドルのように。

あなたの例のようにヘッダーを絶対に設定する必要がある場合、私が理解できることはわかりますが、これで始められるはずです。

于 2012-07-26T12:39:29.217 に答える