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表头。 很高兴不必为了让工作正常而摆弄。 https://stackoverflow.com/a/3979490/2548115

Answer 2

上面的答案几乎可行，但需要一些调整。 columnInfo.class应该是columnInfo.classes

    //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.classes) {
                var headDiv = jQuery("th:eq(" + iCol + ")", trHead);
                headDiv.addClass(columnInfo.classes);
            }
        }
    };

    //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', classes: 'hidden-xs' },
            { name: 'orderDate', index: 'orderDate', width: 120, 
sorttype: 'date', formatter: 'date' },
            { name: 'shipmentDate', index: 'shipmentDate', width: 120, 
sorttype: 'date', formatter: 'date' },
            { name: 'productDetails', index: 'productDetails', width: 250, 
sorttype: 'string', formatter: 'string', classes: 'hidden-xs'  },
            { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true, 
classes: 'hidden-xs' }
        ]
    });

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

Answer 3

您可以将headercss属性添加到该特定字段或列中，无论您使用什么

例如在字段情况下

fields: [
    { name: "age", type: "number", headercss: "assignment_role" },
    { type: "control" }
],  

所以现在“assignment_role”将出现在age字段的标题中

来源： JSGrid现场文档