javascript - 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”将出现在年龄字段的标题中

来源：JSGrid 字段文档