javascript - jqGrid how to apply extra classes to header columns - Stack Overflow

admin管理员组

文章数量:1344690

I would like to apply an extra class on specific columns in, i know this is possible for the rows by specifying this in the colModel. But the classes are only applied to the columns in the "result rows" and not to the header.

What i'm trying to reach is to hide specific columns for a smaller viewport by a simple classname (for use with Twitter Bootstrap).

I would like to apply an extra class on specific columns in, i know this is possible for the rows by specifying this in the colModel. But the classes are only applied to the columns in the "result rows" and not to the header.

What i'm trying to reach is to hide specific columns for a smaller viewport by a simple classname (for use with Twitter Bootstrap).

• javascript
• class
• jqgrid
• header

Share Improve this question Follow edited Apr 20, 2015 at 12:27 Joel 7,57944 gold badges5454 silver badges5959 bronze badges asked Nov 14, 2013 at 10:23 Jeroen v GJeroen v G 5111 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

It appears that the only way to apply a class attribute to an entire column (including the header row) is to apply the colModel class entries to the headers yourself. As you mentioned, putting the value in the colModel will already apply it to the data rows, but will leave the headers unchanged.

Luckily, you can set this up so that whatever classes you're applying to the colModel specification will automatically get applied to the appropriate header columns using a single function call.

Here's an example of what that looks like:

    //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 plete.
    applyClassesToHeaders(grid);

Please note that this method will apply the class attribute to the div contained inside the TH. If you need to apply to the entire TH, use "th:eq(" + iCol + ")" instead of "th:eq(" + iCol + ") div".

Thanks to Oleg for an awesome previous answer that contained a nice method for parsing through the jqGrid table headers. It was nice not to have to fiddle around to get that working just right. https://stackoverflow./a/3979490/2548115

The answer above almost works but needs some tweaking. columnInfo.class should be 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 plete.
    applyClassesToHeaders(grid);

You can add attribute of headercss to that specific field or column whatever you are using

For example in fields case

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

So now "assignment_role" will be appear in header of age field

Source: JSGrid field documentation

本文标签： javascriptjqGrid how to apply extra classes to header columnsStack Overflow