隐藏igGrid行

Question

在我扯掉剩下的头发之前，我在这里问我错过了什么‘简单’的东西。我有一个完整的igGrid，在这里我有按钮让用户隐藏(过滤)一些行。在不碎片整理论坛上，我发现了以下建议代码：

function hide() {
$("#igGrid").igGrid("allRows").each(function(index) {

    var id = $(this).attr("colName");

    // Any row with ID < 4 will be hidden
    if (id < 4) {
        $(this).css("display", 'none');
    }

});

看上去很简单，但不管用。我也没有再做10次尝试获得行的“idCol”。

真正让我烦恼的是，在Chrome中，“此”显示为“tr”(在IE中是一个HTMLTableRowElement)!！它有一个‘cell’属性，这正是我想要的HTMLCollection ==>！然而，我在下面尝试过的任何东西实际上都没有得到单元格/列的值。

        var aa = $(this).attr("colName");                    // undefined
        var bb = $(this);                                    // shows in debugger as e.fn.e.init[1]     ????
        var cc = bb.cells[3];                                // Uncaught TypeError: Cannot read property '3' of undefined
        var dd = bb.getRowIndex();                           // Uncaught TypeError: Undefined is not a function

        var a = $(this).cells;                               // undefined
        var b = $(this).cells[3];                            // Uncaught TypeError: Cannot read property '3' of undefined
        var c = $(this).getRowIndex();                       // Uncaught TypeError: Undefined is not a function  
        var d = $(this).attributes.getNamedItem("colName");  // Uncaught TypeError: Cannot read property 'getNamedItem' of undefined
        var e = $(this).attributes.colName;                  // Uncaught TypeError: Cannot read property 'colName' of undefined
        var f = $(this).getNamedItem("colName");             // Uncaught TypeError: Undefined is not a function
        var g = $(this).getAttribute("colName");             // Uncaught TypeError: Undefined is not a function 

那我错过了什么？

在这件事解决后，我看到了另一个问题。显然，上面隐藏行的条件不会是硬编码的'4‘。在外部onclick函数中，我设置了一个保存条件值的变量。然而，在这个igGrid函数中，我看到我的变量超出了作用域。我如何将我的变量传递给这个‘隐藏()’函数？

Answer 1

过滤和隐藏是有区别的。过滤将从tbody中移除行，隐藏只会使行不可见。最简单的解决方案是将过滤器应用到表中。这可以很容易地绑定到按钮单击处理程序，请参阅下面的JSFiddle链接。

隐藏

您可以通过将它的css显示属性设置为“none”来隐藏一行；您可以使用以下方法选择所有行。

//select all rows, excluding the header and footer rows.
var gridRowSelector = 'table.ui-iggrid-table.ui-widget-content>tbody>tr';
//hide a row when clicking on it
$(gridRowSelector).click(function () {
    $(this).hide();
});
//unhide all hidden rows
$(gridRowSelector).show();

滤波

您可以通过两种方式过滤网格。

1. 在网格上启用筛选，然后使用列标题中的下拉设置筛选器。 $("#grid").igGrid({功能：{ name：“筛选”，类型：“本地”，模式：“高级”，filterDialogContainment：“窗口”} })；
2. 手动将筛选器应用于网格。参见IGGrid筛选：http://help.infragistics.com/jQuery/2015.1/ui.igGridFiltering $(‘#grid’).igGridFiltering(“过滤器”，{fieldName：“年龄”，expr："30"，cond："greaterThan"，逻辑：“OR”})；

若要删除所有筛选器，只需将空筛选器应用于网格：

//remove all filters
$('#grid').igGridFiltering("filter", "");

我已经创建了一个工作的JSFiddle，它可以隐藏/取消隐藏，也可以过滤/取消过滤。

JSFiddle：http://jsfiddle.net/seadonk/76g5shak/