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

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

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

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

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