过滤和应用背景颜色到tr在jqGrid [英] filter and apply background color to tr in jqGrid

问题描述

我有这个代码，给我下面的输出在firebug，所以根据这个输出，我可以过滤 td 并分配一个不同的背景颜色，右？ p>

我的代码

  loadComplete：function（）{
 var i，names = this.p。 groupingView.sortnames [0]，l = names.length; 
 for（i = 0; i  if（names [i] ==='envVariable'）{
 $（this）.jqGrid（'groupingToggle'， this.id +ghead _+ i）; 
} else {
 //隐藏分组行
 $（'＃'+ this.id +ghead _+ i）.hide（）; 
} 
} 
 var getColumnIndexByName = function（grid，columnName）{
 var cm = grid.jqGrid（'getGridParam'，'colModel'），i = 0，l = cm。 
 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'）
 
这打印进控制台
 console.info（row.cells [iCol]）; 
 
 //这里我尝试应用过滤器
 $（row.cells [iCol]）
 .filter（false）
 .css ，＃c8ebcc，
background-color，#DCFFFF，
background-image，none）; 
 
} 
} 
 
} 
  

< h1> **已更新**

@Oleg：我需要隐藏所有包含 isEqual 的行 true 并且只显示所有更改背景颜色的 isEqual 为 false 的行。所以我修改了你的代码，如下所示，但它不隐藏行，它只是显示整个事情，没有任何变化，我会错了？

  var i，l，data = this.p.data，rows = this.rows，item; 
 
 l = data.length; 
 for（i = 0; 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 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.

这篇关于过滤和应用背景颜色到tr在jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！