使用Knockout筛选使用多个字段/列和控件的ViewModel数据 [英] Using Knockout to Filter ViewModel Data Using Multiple Fields/Columns and Controls

问题描述

我是KnockoutJS的新手，但到目前为止我仍然很喜欢.我想做的是使用表单上的多个字段/列和控件过滤我的viewmodel数据，但是我不确定该怎么做.让我(希望)进一步解释.

I'm new to KnockoutJS but am liking it so far. What I'm trying to do is filter my viewmodel's data using multiple fields/columns and controls on the form, but I'm not sure how to do it. Let me (hopefully) explain further.

我有一个viewmodel可观察的数据数组，其中填充了来自后端数据库的JSON数据.此数据收集具有多个列，我希望对其进行过滤，以便显示更改为仅显示所选项目.我已经按照示例使用了ko.utils.arrayFilter和ko.utils.stringStartsWith，如链接

I have a viewmodel observable array of data that is populated with JSON data from a backend database. This collection of data has multiple columns that I'd like to filter on so that the display changes to only display the selected items. I've followed the example using ko.utils.arrayFilter and ko.utils.stringStartsWith as seen on the link http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html. This works great as a search type of filter - but only on one field in my table of data (viewmodel).

第一个问题:是否可以扩展此示例，以便在视图模型的多个列中搜索文本框中键入的值，并返回结果以供显示?

First question: Is there a way to extend this example to have the value typed in the textbox searched for in multiple columns of the viewmodel with the results being returned for display?

但是，更重要的是，我在表单上有多个不同类型的控件(带有值列表的下拉列表，具有不同选项的单选按钮等)，并且我需要根据以下内容过滤完整的数据集:这些控件中选择的选项.并且，控件的有效值与视图模型数据集中的不同列/字段相关.

More importantly, however, is my situation where I have multiple controls of different types (dropdown with a list of values, radio buttons with different options, etc.) on the form and I need to filter the full data set based on the options selected in these controls. And, the valid values of the controls relate to different columns/fields in the viewmodel data set.

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

I hope this is making sense. Basically, we're trying to replace a Windows forms app that has this same functionality. That is, for the Windows forms app, all the filtering options are building a big where clause for a SQL select (e.g., WHERE Name = 'name chosen in dropdown' AND Priority IN (one or more checkbox options that are checked) AND View = selected radio button etc.). The SQL query is then sent to the database with the results placed into a grid.

那么，有什么办法让我在视图模型的多个字段上使用多个过滤器值(当然还有敲除)来在客户端过滤和显示我的数据?还是我必须遵循与Windows应用程序类似的想法，并使用所选选项中的where子句重新查询数据库?

So, is there any way for me to use multiple filter values on multiple fields in the viewmodel (and knockout, of course) to filter and display my data all on the client side? Or do I have to follow a similar idea as the Windows app and requery the database with a where clause from the selected options?

谢谢！

如果您需要更多详细信息，请让我知道(这很难用书面解释).

Please let me know if you need any more details (it's kind of hard to explain in writing).

推荐答案

您只需像这样在arrayFilter中组合术语.

You would just combine the terms in your arrayFilter, like this.

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

这里正在使用小提琴

这篇关于使用Knockout筛选使用多个字段/列和控件的ViewModel数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！