Javascript 如何在jqgrid中将一个单元划分为2个？

可以通过jqgrid获得这种设计吗

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

---

在2X2（第二列，第二行）中，我需要显示订单id和位置。位置值应显示在订单id下。是否可以？

对于该列，您可以定义一个自定义格式设置程序，您可以将任何样式应用于该列。在该格式化程序中，您可以访问行中所有对象的值。因此，对于订单/位置格式化程序，您可以将这两种格式组合在一起，如下所示：

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

以下是我的全部样本：

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

像这样

---

如果您必须像您的示例中那样设置标题，我可以看看我能想出什么，但这应该可以让您开始。

谢谢，但我有个问题，如何拆分标题，像拆分正文一样？谢谢。@ChadFerguson在拆分单元格时，有没有一个很好的方法进行文本换行，也就是说，如果拆分单元格中的数据大于列宽，则进行文本换行。为jqgrid启用列文本换行会弄乱行之间的对齐方式。

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

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