如何在jqgrid中將一個單元劃分爲2個？

Question

可能通過的jqGrid

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

在這裏，2X2（第二列，第二行），我需要顯示訂單ID和位置，以獲得這些樣的設計。位置值應顯示在訂單ID下。有可能嗎？

Answer 1

對於列，您可以定義一個自定義格式器，您將能夠應用您喜歡的任何樣式。在該格式化程序中，您可以訪問行中所有對象的值。因此您的訂單/位置格式，你可以將二者結合起來是這樣的：

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

您將probally要類添加到那些div的，這樣你可以風格它更好地滿足您的需求。就列定義而言，您需要在其中一列上聲明customFormatter（注意：它聲明的那個將是以上函數中的變量單元格值），另一列需要隱藏，然後作爲它需要作爲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>"; 
} 

小提琴也可以here。

這只是留下您的標題，這有點困難，可能會變得醜陋。我建議不要在標題上進行拆分，並執行類似Order Id/Location的操作。 這可以通過這樣設置：在此fiddle

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

像。

如果你確實需要在你的例子中設置標題，我可以看到我能弄清楚什麼，但是這應該讓你開始。