将过滤器行添加到动态创建的kickout.js网格 [英] Add filter row to dynamically created knockout.js grid

问题描述

我有用于绑定到结果表的视图模型.该视图动态呈现结果表，而无需任何先验的列数或列名知识，这很棒.类似于此处所述为了保持通用而不是特定于域，我从此处回答的问题中修改了代码示例.

I have view model which i am using to bind to a table of results. The view dynamically renders the table of results without any prior knowledge of number or name of columns, which is great. Similar to that described here and in the interest of keeping generic and not domain specific i have adapted the code sample from that questions answer here.

但是，我需要添加一个过滤器行以允许用户进行过滤，我已经基于以下代码中的列名添加了一行输入，并试图将它们绑定到视图模型.将它们绑定到视图模型很重要，这样当我刷新网格时，视图模型就会知道所应用的任何过滤器.

However i need to add a filter row to allow the user to filter, i have added a row of inputs based on the column names in the code below and attempted to bind them to the view model. It is important that they are bound to the view model so that when i refresh the grid the view model knows about any filters applied.

我尝试了几件事

• 首先，如下面的代码片段所示，我创建了一个可观察的过滤器对象，并尝试将表中的每个字段绑定到该过滤器对象的属性.但是，这似乎不起作用.
• 我尝试的另一种选择是基于列名创建一个可观察的过滤对象数组，并将过滤器列绑定到似乎也不起作用的

任何想法都将不胜感激

非常感谢，埃德

JS

var VM = function () {
  var self = this;
  self.items = ko.observableArray();
  self.filters = ko.observable({});

  self.columnNames = ko.computed(function () {
    if (self.items().length === 0)
        return [];
    var props = [];
    var obj = self.items()[0];
    for (var name in obj)
        props.push(name);
    return props;


  });

};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push({
  'Name': 'John',
  'Age': 25
});
vm.items.push({
'Name': 'Morgan',
'Age': 26
});

查看:

<table>
  <thead>
    <tr data-bind="foreach: columnNames">
        <th> <span data-bind="text: $data"></span>

        </th>
    </tr>
  </thead>
  <tbody >

   <!-- add filter rows -->
    <tr data-bind="foreach: $root.columnNames">
        <td ><input type='text' data-bind="value: $root.filters[$data]"/></td>
    </tr>
   <!-- add the items -->
   <!-- ko foreach: items -->
   <tr data-bind="foreach: $parent.columnNames">
        <td data-bind="text: $parent[$data]"></td>
    </tr>
   <!-- /ko -->
  </tbody>
</table>

推荐答案

我做了一个小提琴，将filters存储在对象{Col1 : Value1, Col2 : Value2...}中.

I made a fiddle in which filters are stored into an object {Col1 : Value1, Col2 : Value2...}.

现在，计算出的columnNames返回一个对象，该对象同时包含列的标题和其过滤器.

Now the columnNames computed returns an object that contains both the header of the column and its filter.

我还创建了一个filteredItems，它只包含与过滤器匹配的项目.

I also created a filteredItems computed that contains only items which matched the filters.

subscriptions数组旨在跟踪订阅，以便在列数更改时将其删除.

The subscriptions array aims to keep a track of subscriptions in order to delete them when the number of column changes.

 var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.filters = ko.observable({});
    self.filteredItems = ko.computed(function () {
        var filters = self.filters();

        var items = ko.utils.arrayFilter(self.items(), function (item) {
            for (var col in filters) {
                var v = (item[col] || '').toString(); // cell value
                var f = filters[col]; // what you typed in header
                if (v.indexOf(f) < 0) return false; // filter is contains
            }
            return true;
        });
        return items;
    });
    var subscriptions = [];
    self.columnNames = ko.computed(function () {
        // clean old subscriptions
        ko.utils.arrayForEach(subscriptions, function (s) { s.dispose(); });
        subscriptions = [];
        if (self.items().length === 0) return [];
        var props = [];
        var obj = self.items()[0];
        for (var name in obj) {         
            var p = { name: name, filter: ko.observable('') };
            // subscribe : so when you type something, filterOnChanged will be invoked.
            subscriptions.push(p.filter.subscribe(filterOnChanged, p));
            props.push(p);
        }
        return props;
    });

    var filterOnChanged = function (value) {
        console.log([this.name, value]);
        var filters = self.filters();
        filters[this.name] = value;
        self.filters(filters);
    };

};

> 请参见小提琴

这篇关于将过滤器行添加到动态创建的kickout.js网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！