Javascript 隐藏网格行

在我把剩下的头发撕下来之前，我想问一下我遗漏了什么“简单”的东西。我有一个Infragistics 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');
    }

});

那么我错过了什么呢

---

在这个问题解决之后，我看到另一个问题来了。显然，隐藏上面行的条件不是硬编码的“4”。在外部onclick函数中，我设置了一个保存条件值的变量。然而，在这个igGrid函数中，我看到我的变量超出了范围。如何将变量传递到此“hide（）”函数？

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

隐藏

您可以通过将一行的css显示属性设置为“无”来隐藏该行； 可以使用以下命令选择所有行

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

过滤

可以通过两种方式过滤栅格

在网格上启用筛选，然后使用列标题中的下拉列表设置筛选

$("#grid").igGrid({  
    features: [
            {
                name: "Filtering",
                type: "local",
                mode: "advanced",
                filterDialogContainment: "window"
            }
        ]
});

手动将过滤器应用于网格。请参见IGGrid过滤：

要删除所有过滤器，只需将空过滤器应用于网格：

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

我已经创建了一个具有隐藏/取消隐藏和过滤/取消过滤功能的JSFIDLE

JSFiddle：

   $('#grid').igGridFiltering("filter", ([
            {fieldName: "Age", 
                  expr: "30", 
                  cond: "greaterThan", 
                 logic: "OR"}]));

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