将过滤器行添加到动态创建的kickout.js网格

Question

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

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

我已经尝试了几件事

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

任何想法将不胜感激

非常感谢，埃德

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>

Answer 1

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

现在，columnNames计算出的返回一个对象，该对象既包含列的标题又包含其过滤器。

我还创建了一个filteredItems计算值，其中仅包含与过滤器匹配的项目。

该subscriptions数组旨在跟踪预订，以便在列数更改时将其删除。

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

};

见小提琴