开发者

filter and apply background color to tr in jqGrid

I have this code which gives me the below output in firebug, so according to this output I can filter the td and assign a different background color, Right?

filter and apply background color to tr in jqGrid

My code

loadComplete: function() {
            var i, names=this.p.groupingView.sortnames[0], l = names.length;
            for (i=0;i<l;i++) {
                if (names[i]==='envVariable') {
                    $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
                } else {
                    // hide the grouping row
                    $('#'+this.id+"ghead_"+i).hide();
                }
            }
            var getColumnIndexByName = function(grid, columnName) {
                var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
                for (; i<l; i++) {
                    if (cm[i].name===columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

            var iCol = getColumnIndexByName($(this),'isEqual'),
            cRows = this.rows.length, iRow, row, className;
            for (iRow=0; iRow<cRows; iRow++) {
                row = this.rows[iRow];
                className = row.className;
                if ($.inArray('jqgrow', className.split(' ')) > 0) { // $(row).hasClass('jqgrow')

//this prints into console
                    console.info(row.cells[iCol]);

//here i am trying to apply filter                      
$(row.cells[iCol])
                    .filter("false")
                    .css("background", "#c8ebcc",
                            "background-color", "#DCFFFF",
                            "background-image", "none");

                }
            }

        }

**Updated**

@Oleg: I need to hide all the rows that has isEqual as true and show only rows having isEqual as false 开发者_运维技巧with all changed background color. So i modified your code something like below, but it does not hide the rows, it just displays the whole thing, without any change, where am i going wrong?

var i, l, data = this.p.data, rows = this.rows, item;

            l = data.length;
            for (i=0;i<l;i++) {
                item = data[i];
                if (!item.isEqual) {

                    $(rows.namedItem(item._id_))
                    .css({
                        "background-color": "#DCFFFF",
                        "background-image": "none"
                    });
                }
                else
                {
                    $(rows.namedItem(item._id_)).hide();
                }

            }


I suppose, that your current question continues your previous question. In the case you use local data and you can very easy get the contain of all grid data. You can first define the additional the hidden grid column:

{ name: 'isEqual', index: 'isEqual', width: 100, hidden:true }

and then append loadComplete with the following code:

var i, l, data = this.p.data, rows = this.rows, item;

l = data.length;
for (i=0;i<l;i++) {
    item = data[i];
    if (!item.isEqual) {
        $(rows.namedItem(item._id_))
            .css({
                "background-color": "#DCFFFF",
                "background-image": "none"
            });
    }
}

The results will be

filter and apply background color to tr in jqGrid

See the demo here.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜