jqgrid 只显示组列名答案

【问题标题】：jqgrid only displaying the group column namejqgrid 只显示组列名
【发布时间】：2014-12-23 13:39:32
【问题描述】：

如何合并 jqgrid 标头。我只想显示组标题名称。到目前为止我已经这样做了，问题是我只想显示组列名。

jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
    {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
    {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});

【问题讨论】：

不清楚你想要什么。是否要隐藏'Amount', 'Tax', 'Total' 和'Closed', 'Shipped via'？如何对列进行排序或调整大小？
@oleg 我不想排序
@Oleg 我的网格有八列，但我想将标题合并到三列

标签： jqgrid jqgrid-formatter

【解决方案1】：

如果您只想在多列上显示标题，并且合并列中的数据排序对您来说不感兴趣，例如调整列大小，那么您可以在不使用 @ 的情况下解决问题987654323@.

The demo 显示以下结果

它使用cmTemplate: { resizable: false } 选项为所有列设置resizable: false，它在某些列中使用sortable: false，并在创建网格后使用以下代码：

var newWidth = $("#list_amount").width() + $("#list_tax").outerWidth(true) +
        $("#list_total").outerWidth(true);
$grid.jqGrid("setLabel", "amount", "<em>Price</em>", "", {
    style: "width: " + newWidth + "px;",
    colspan: "3"
});
$grid.jqGrid("setLabel", "tax", "", "", {style: "display: none"});
$grid.jqGrid("setLabel", "total", "", "", {style: "display: none"});
newWidth = $("#list_closed").width() + $("#list_ship_via").outerWidth(true);
$grid.jqGrid("setLabel", "closed", "Shiping", "", {
    style: "width: " + newWidth + "px;",
    colspan: "2"
});
$grid.jqGrid("setLabel", "ship_via", "", "", {style: "display: none"});

上面的代码在列到标题对齐小于 1px 时可能会出现最小的问题，但可以通过这种方式解决大部分问题。

【讨论】：

没有 colspan 对我来说是完美的