如何在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

对于该列,您可以定义一个自定义格式化程序,您可以将任何样式应用于该格式化程序.在该格式化程序中,您可以访问行中对象的alll值.因此,对于您的订单/位置格式化程序,您可以将这两者组合在一起:

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

您可能希望为这些div添加类,以便您可以更好地设置它以满足您的需求.就你的列定义而言,你需要在其中一列上声明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');

喜欢这个小提琴.

如果您必须像示例中那样设置标题,我可以看到我能弄清楚的内容,但这应该让您开始.