【问题标题】:filter and apply background color to tr in jqGrid过滤并将背景颜色应用于jqGrid中的tr
【发布时间】:2011-07-13 12:23:23
【问题描述】:

我有这段代码,它在 firebug 中给了我以下输出,所以根据这个输出我可以过滤 td 并分配不同的背景颜色,对吧?

我的代码

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");

                }
            }

        }

**更新**

@Oleg:我需要隐藏所有 isEqualtrue 的行,只显示 isEqualfalse 的行 背景颜色全部改变。所以我修改了您的代码,如下所示,但它并没有隐藏行,它只是显示整个内容,没有任何更改,我哪里出错了?

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();
                }

            }

【问题讨论】:

  • 请澄清您的问题,因为不清楚,对吧? :)
  • @aliecas: :) 我在 jquery doc 中读到我可以将过滤器应用于任何元素并将 css 应用于它,所以在我的代码中我使用了 jqGrid 插件来创建网格,我希望将tr 的背景颜色从平时更改,当它从json 字符串中获取false 值时,在我的代码底部,当我得到falseisEqual 值时,我已经确定了(从json字符串),我只需要更改相应的tr的bkg颜色,在这种情况下td的bkg颜色
  • 您希望所有标题为 false 的 td 获得相同的背景吗?

标签: jquery css jqgrid


【解决方案1】:

我想,您当前的问题仍在继续your previous question。在您使用本地数据的情况下,您可以很容易地获得所有网格数据的包含。您可以先定义附加的隐藏网格列:

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

然后在loadComplete 后面加上以下代码:

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"
            });
    }
}

结果会是

查看演示 here

【讨论】:

  • 我还需要一件事,我需要隐藏所有 isEqual 为 true 的行,并仅显示 isEqual 为 false 的行,所有更改的背景颜色,请参阅我更新的问题我对代码进行了修改。
  • @Abhishek Simon:以here 为例。
  • 太好了,你可以解决任何问题 :) 但我哪里出错了?我还写了$(rows.namedItem(item._id_)).hide();
  • 还有p从哪里来的data = this.p.data, rows = this.rows, item;
  • @Abhishek Simon:看看$(rows.namedItem(this.id+"ghead_"+ i)).find("span.ui-icon").click 的部分。大多数 jqGrid 事件处理程序 this 的内部是 &lt;table&gt; 元素的 DOM,该元素具有独立于 jqGrid 的 rows 属性。 this.p 是 jqGrid 扩展。它包含所有jqGrid options。您可以使用$('#list').jQuery('getGridParam','data') 获取$('#list')[0].pthis.p.data
猜你喜欢
  • 2019-08-30
  • 2018-07-17
  • 1970-01-01
  • 2015-09-19
  • 2014-06-06
  • 2011-10-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多