javascript - jqGrid 如何将额外的类应用于标题列

Question

我想在中的特定列上应用一个额外的类，我知道这可以通过在 colModel 中指定来实现。但是这些类仅应用于“结果行”中的列，而不应用于标题。

我想要实现的是通过一个简单的类名(用于 Twitter Bootstrap)隐藏较小视口(viewport)的特定列。

Answer 1

似乎将类属性应用于整个列(包括标题行)的唯一方法是自己将 colModel 类条目应用于标题。正如您所提到的，将值放在 colModel 中会已经将其应用于数据行，但会保持标题不变。

幸运的是，您可以对其进行设置，以便您应用到 colModel 规范的任何类都将使用单个函数调用自动应用到适当的标题列。

这是一个看起来像的例子:

    //Takes css classes assigned to each column in the jqGrid colModel 
    //and applies them to the associated header.
    var applyClassesToHeaders = function (grid) {
        // Use the passed in grid as context, 
        // in case we have more than one table on the page.
        var trHead = jQuery("thead:first tr", grid.hdiv);
        var colModel = grid.getGridParam("colModel");

        for (var iCol = 0; iCol < colModel.length; iCol++) {
            var columnInfo = colModel[iCol];
            if (columnInfo.class) {
                var headDiv = jQuery("th:eq(" + iCol + ") div", trHead);
                headDiv.addClass(columnInfo.class);
            }
        }
    };

    //Example grid configuration just to illustrate
    var grid = jQuery('#list');
    grid.jqGrid({
        data: myData,
        datatype: 'local',
        caption: 'Order Details',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        pager: '#pager',
        rownumbers: true,
        colNames: ['Order ID', 'Order', 'Shipment', 'Details', 'Status'],
        colModel: [
            { name: 'orderID', index: 'orderID', key:true, width: 50, 
sorttype: 'int', class: 'alwaysShow' },
            { name: 'orderDate', index: 'orderDate', width: 120, 
sorttype: 'date', formatter: 'date', class: 'alwaysShow' },
            { name: 'shipmentDate', index: 'shipmentDate', width: 120, 
sorttype: 'date', formatter: 'date', class: 'alwaysShow' },
            { name: 'productDetails', index: 'productDetails', width: 250, 
sorttype: 'string', formatter: 'string', class: 'sometimesShow'  },
            { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true, 
class: 'neverShow' }
        ]
    });

    //Applies the classes to the headers once the grid configuration is complete.
    applyClassesToHeaders(grid);

请注意，此方法会将类属性应用于 TH 中包含的 div。如果您需要应用到整个 TH，请使用“th:eq(” + iCol + “)”而不是“th:eq(” + iCol + “) div”。

感谢 Oleg 之前的精彩回答，其中包含一个很好的方法来解析 jqGrid 表头。很高兴不必四处摆弄以使其正常工作。 https://stackoverflow.com/a/3979490/2548115