jqgrid: How to set cell specific css class at generation time

问题:

I am building a jqgrid that needs different background (or in general, a different css class) value for specific cells. I know which cells need the class applied at generation time of the data being sent down to jqgrid. What I would like is to be able to indicate a class within the jqgrid rows structure for each specific cell:

1.0015.009.00         …     1.002.001.15         …            … 

I know I can do this formatting after the data is sent down, but I would like to see the grid drawn with the formatting in place rather than after the fact.

I've achieved something like what I want by setting using a tag within the cell:

3.00

But it does not set the class for the entire cell, just data within, with only the text highlighted and not the entire cell.

回答1:

I ind your question interesting so I made the demo for you.

If you want to set some custom attributes on the grid cells ( elements) like class, title, colspan, style the cellattr is the best way to do this (see here for details). cellattr are close to custom formatter feature, but allows to define attributes of the cell and not the cell contain.

In the demo I used the following XML input:

1121.0015.009.001.002.001.15

and the cellattr like the following

cellattr: function () {     var c = $('cell:eq(1)', arguments[2]).attr('class');     return c ? " class='" + c + "'": ""; } 

In the case the 'class' attribute of the second (':eq(1)') cell will be used for the formatting.

From the design point of view I would recommend you don't use the class names directly as the attributes. An alternate attribute like format="error" which will be converted as class='ui-state-error' have some advantages. It could make separation of information like formatting tips from direct HTML instruction.

回答2:

Using Oleg's answer I put together and tested the following for my situation using a dynamically created colModel (colM):

for each (var colModelItem in colM) {    colModelItem.cellattr = function (rowId, val, rawObject, cm, rdata){       var pos = findColModelInList(cm, colM);       var srchText = 'cell:eq(' + pos + ')';       var c = jQuery(srchText, arguments[2]).attr('class');       return c ? " class='" + c + "'": "";    }; } 

where

function findColModelInList(colModel, modelList) {     var index = 0;     var retval = -1;     for each (var modelItem in modelList)     {         if (modelItem.name == colModel.name)         {             retval = index;         }         index++;     }     return retval; } 

文章来源: jqgrid: How to set cell specific css class at generation time