2

Before I rip out whats left of my hair, I ask here what 'simple' thing I am missing. I have an Infragistics igGrid where I have buttons for the user to hide (filter) some of the rows. On Infragistics forum I found this suggested code :

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

});

Looks easy, but it doesn't work. Neither does 10 more of my attempts to get the 'idCol' of the row.

What really bugs me is that in Chrome Debug, 'this' shows up as a 'tr' (in IE its a HTMLTableRowElement)!! And it has a 'cells' attribute that is an HTMLCollection ==> EXACTLY what I want! However, nothing I've tried below actually GET the value of a cell/column.

        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

So what am I missing??

After this gets figured out, I see another problem coming. Obviously the condition for hiding rows above will not be a hardcoded '4'. In an outer onclick function I set a variable that holds the condition value. However while in this igGrid function I see that my variable is out of scope. How can I pass my variable to this 'hide()' function?

4

1 回答 1

1

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

隐藏

您可以通过将其 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();

过滤

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

  1. 在网格上启用过滤，然后使用列标题中的下拉菜单来设置过滤器。

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

  2. 手动将过滤器应用于网格。请参阅 IGGrid 过滤：http ://help.infragistics.com/jQuery/2015.1/ui.igGridFiltering

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

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

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

我创建了一个具有隐藏/取消隐藏和过滤/取消过滤功能的工作 JSFiddle。

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

于 2015-05-01T04:41:35.203 回答