jqGrid如何应用额外的类到标题列 [英] jqGrid how to apply extra classes to header columns

问题描述

我想对特定的列应用一个额外的类，我知道这是可能的行通过在colModel中指定。但是类只应用于结果行中的列而不是头。

我想要达到的是隐藏

解决方案

看来，应用类属性的唯一方法是使用一个简单的类名到整个列（包括标题行）是自己应用colModel类条目到标题。正如你所提到的，将值放在colModel中已经将它应用到数据行，但是会保留头文件不变。

幸运的是，你可以设置它，无论您应用于colModel规范的类是什么，都将使用单个函数调用自动应用到相应的标题列。

下面是一个示例： / p>

  //使css类分配给jqGrid colModel 
 //中的每一列，并将它们应用到相关的标题。 
 var applyClassesToHeaders = function（grid）{
 //使用在网格中传递的上下文，
 //如果我们在页面上有多个表。 
 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）; 
} 
} 
}; 
 
 //网格配置示例
 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： 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'} 
] 
} 
 
 //网格配置完成后，将类应用到头。 
 applyClassesToHeaders（grid）; 
  

请注意，此方法将类属性应用于TH中包含的div。如果需要应用到整个TH，请使用th：eq（+ iCol +）而不是th：eq（+ iCol +）div。

感谢Oleg的一个真棒的以前的答案，包含一个很好的方法通过jqGrid表头解析。这是很好的，不必为了得到正确的工作。 http://stackoverflow.com/a/3979490/2548115

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

解决方案

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 complete.
    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. http://stackoverflow.com/a/3979490/2548115

这篇关于jqGrid如何应用额外的类到标题列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！