Question

我是KnockoutJS的新手，但到目前为止我还是喜欢它。我想要做的是使用窗体上的多个字段/列和控件来过滤我的viewmodel数据，但我不知道该怎么做。让我（希望）进一步解释。

我有一个viewmodel可观察数据数组，该数据数组使用来自后端数据库的JSON数据填充。此数据集包含多个我想要过滤的列，以便显示更改为仅显示所选项。我已经使用ko.utils.arrayFilter和ko.utils.stringStartsWith跟踪了示例，如链接http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html所示。这非常适合作为搜索类型的过滤器 - 但仅限于我的数据表（viewmodel）中的一个字段。

第一个问题：有没有办法扩展此示例，以便在viewmodel的多个列中搜索文本框中键入的值，并返回显示结果？

然而，更重要的是，我的情况是我在窗体上有多个不同类型的控件（带有值列表的下拉列表，带有不同选项的单选按钮等），我需要根据基础上过滤完整数据集在这些控件中选择的选项。并且，控件的有效值与viewmodel数据集中的不同列/字段相关。

我希望这是有道理的。基本上，我们正在尝试替换具有相同功能的Windows窗体应用程序。也就是说，对于Windows窗体应用程序，所有过滤选项都为SQL选择构建一个大的where子句（例如，WHERE Name ='在下拉列表中选择的名称'和优先级IN（一个或多个选中的复选框选项）和视图=选择单选按钮等）。然后将SQL查询发送到数据库，并将结果放入网格中。

那么，有什么办法让我在viewmodel（当然还有knockout）的多个字段上使用多个过滤器值来过滤和显示我在客户端的所有数据？或者我是否必须遵循与Windows应用程序类似的想法，并使用所选选项中的where子句重新查询数据库？

谢谢！

如果您需要更多详细信息，请告诉我（这有点难以书面解释）。

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

这是在fiddle

中工作

使用Knockout使用多个字段/列和控件过滤ViewModel数据

1 个答案: