采用淘汰赛筛选视图模型数据使用多个字段/列和控制(Using Knockout to Filter

2019-07-31 01:34发布

我是新来KnockoutJS但我到目前为止喜欢它。 我正在试图做的是使用表上多个字段/列和过滤控制视图模型我的数据,但我不知道该怎么做。 让我(希望)进一步解释。

我有数据的视图模型观察到的阵列,其被填充有JSON数据从后端数据库。 数据的集合有,我想筛选上,使显示变为只显示所选择的项目多列。 我已经按照使用ko.utils.arrayFilter和ko.utils.stringStartsWith链路上所看到的例子http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html 。 在我的数据表(视图模型),但只有在一个领域 - 这个伟大的工程作为过滤的搜索类型。

第一个问题:是否有办法来扩展这个例子有搜索中的结果返回用于显示的视图模型的多个列在文本框中键入值?

更重要的是,是我的情况我有多个不同类型的控件(下拉列表与值列表,使用不同的选项,等等单选按钮)的形式,我需要根据所选择的选项来过滤整个数据集在这些控件。 并且,控制装置的有效的数值与在所述视图模型的数据集的不同列/字段。

我希望这是决策意识。 基本上,我们试图取代具有此相同的功能Windows窗体应用程序。 也就是说,Windows窗体应用程序,所有的过滤选项正在建设一个大型其中用于SQL子句选择(例如,在名称=“名称选择在下拉菜单”和优先级在被选中(一个或多个复选框选项),然后查看=选中的单选按钮等)。 然后,将SQL查询发送到与放置到电网的结果数据库。

那么,有没有什么办法,我使用多个字段多个过滤器值在视图模型(和基因敲除,当然)来过滤显示我的所有数据在客户端? 还是我必须遵循类似的想法作为Windows应用程序,并用其中来自所选的选项条款重新查询数据库?

谢谢!

请让我知道如果你需要任何更多的细节(这是一种很难以书面形式解释)。

Answer 1:

你只想合并条款在arrayFilter ,像这样。

self.filteredRecords = ko.computed(function() {
        return ko.utils.arrayFilter(self.records(), function(r) {
            return (self.idSearch().length == 0 ||
                       ko.utils.stringStartsWith(r.id, self.idSearch())) &&
                   (self.nameSearch().length == 0 || 
                       ko.utils.stringStartsWith(r.name.toLowerCase(), self.nameSearch().toLowerCase())) &&
                  (self.townSearch().length == 0 ||
                       r.homeTown == self.townSearch())
        });
    });

这里是工作在一个小提琴



文章来源: Using Knockout to Filter ViewModel Data Using Multiple Fields/Columns and Controls
标签: knockout.js