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