且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-11-24 15:55:40

看来,应用类属性的唯一方法是使用一个简单的类名到整个列(包括标题行)是自己应用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://***.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://***.com/a/3979490/2548115