Wijmo Grid 插件(wijgrid) 是一款数据表格插件允许用户选择、排序、分组和过滤等。这个表格插件提供高度的扩展功能,可以使该控件更加的友好。

在这篇文章中我们将讨论如何使用Enter 键来调用过滤功能。

实现方式为,我们通过FilterRow keyPress 事件来触发过滤。这些文本框的类型为wijmo-wijgrid-filter-input类。jQuery的代码如下:

$(".wijmo-wijgrid-filter-input").keypress(function (s, args) {

     if (s.keyCode == 13) {

          ApplyFilter($(this));

    }

});

ApplyFilter() 方法的基本思想是获取FilterRow 的输入值用作 FilterValue 选项。 根据当前列的数据类型,我们选择正确的FilterOperator,例如,我们使用 ‘contains‘ 来过滤字符串列, ‘equals‘方法来过滤数值列。

function ApplyFilter($elem) {

    var colindex = $(".wijmo-wijgrid-filter-input").index($elem);

    var id = $(".wijmo-wijgrid-filter-input").eq(colindex).val();

    var grid = $("#demo").data("wijgrid");

    if (id != "") {

        //Apply filter

        grid.columns()[colindex].option("filterValue", id);

        //Define the FilterOperator

        if (grid.columns()[colindex].options.dataType == "string")

            grid.columns()[colindex].option('filterOperator', 'contains');

        else

            grid.columns()[colindex].option('filterOperator', 'equals');

    }

    else {

        grid.columns()[colindex].option("filterOperator", "nofilter");

    }

}

Download Sample