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?
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
See the demo here.
精彩评论