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

Question

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

我想要达到的目的是通过一个简单的类名隐藏较小视口的特定列(用于Twitter Bootstrap).

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);

请注意,此方法将class属性应用于TH中包含的div.如果你需要申请整个TH,请使用"th:eq("+ iCol +")"而不是"th:eq("+ iCol +")div".

感谢Oleg提供了一个很棒的先前答案,其中包含一个很好的方法来解析jqGrid表头.很高兴不必为了让工作正常而摆弄./sf/answers/278564331/