WijGrid:实现过滤功能相应回车键

Wijmo Grid 插件(wijgrid) 是一款数据表格插件允许用户选择、排序、分组和过滤等。这个表格插件提供高度的扩展功能,可以使该控件更加的友好。在这篇文章中我们将讨论如何使用Enter 键来调用过滤功能。

发布于 2012/12/06 00:00

ComponentOne Enterprise

 

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

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台,并完美集成于 Visual Studio 的第三方控件集,包含 300 多种 .NET开发控件,提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能,被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务,并由技术支持工程师为您1对1解答。>> 发帖提问

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态