Question

我有一个嵌套数据结构映射到knockout JS中的数组：

class Departments{
     string DepartmentName;
     List<Group> groups
}
class Group{
     string groupName;
     List<Person> persons;
}
class Person{
     String Firsname;
     string LastName;
}

我从服务器获取数据并在UI中成功显示它们。但我希望将数组转换为knockoutJS中的计算数组并按FirstName和LastName进行过滤。值得一提的是，我已将self.search_FirstName and self.search_LastName绑定到两个不同的输入。绑定数据的HTML代码如下：

<div class="form-group">
    <input type="text" class="text-right text-success input-lg" placeholder="Name" data-bind="value:search_FirstName, valueUpdate: 'afterkeydown'" />    
</div>


<div class="panel-group" id="accordion" data-bind="foreach: Profiles" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title" data-bind="text: DepartmentName"></h4>
        </div>

        <div class="panel-collapse collapse in">
            <div class="panel-body">
                <table data-bind="foreach: { data: GroupVMs }" class="table table-responsive col-lg-12 col-sm-12 col-md-12">
                    <tbody>
                        <tr><td class="groups" data-bind="text: GroupName"></td></tr>
                        <tr>
                            <td>
                                <table data-bind="foreach: { data: PersonPhonesVMs }" class="table table-striped table-responsive col-lg-12 col-sm-12 col-md-12">
                                    <tr>
                                        <td class="col-lg-1 col-sm-1 col-md-1" data-bind="text: Prefix"></td>
                                        <td class="col-lg-2 col-sm-2 col-md-2" data-bind="text: FirstName"></td>
                                        <td class="col-lg-3 col-sm-3 col-md-3" data-bind="text: LastName"></td>                                        
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

现在我想在文本框search_FirstName中输入数据时自动过滤数据。现在我可以使用以下代码基于DepartmentName过滤记录：

self.Profiles = ko.computed(function () {
        return ko.utils.arrayFilter(self.BackupProfiles(), function (rec) {
            return (
                (self.search_FirstName().length == 0 || rec.DepartmentName.indexOf(self.search_FirstName()) > -1)
            );
        });
    });

有没有人知道根据firstname和lastname字段过滤记录？

Answer 1

我为你创建了a fiddle。它的核心computed构建了一个类似于Profiles结构的结构，但只包括匹配的记录。

vm.filteredProfiles = ko.computed(function () {
    var first = vm.search_FirstName().toLocaleLowerCase();
    if (first === '') return vm.Profiles();
    var result = [];
    ko.utils.arrayForEach(vm.Profiles(), function (dept) {
        var groupsMatched = [];
        ko.utils.arrayForEach(dept.GroupVMs(), function (group) {
            var personsMatched = [];
            ko.utils.arrayForEach(group.PersonPhonesVMs(), function (person) {
                if (person.FirstName().toLocaleLowerCase().indexOf(first) > -1) {
                    personsMatched.push(person);
                }
            });
            if (personsMatched.length > 0) {
                groupsMatched.push({
                    GroupName: group.GroupName,
                    PersonPhonesVMs: personsMatched
                });
            }
        });
        if (groupsMatched.length > 0) {
            result.push({
                DepartmentName: dept.DepartmentName,
                GroupVMs: groupsMatched
            });
        }
    });

    return result;
});

在嵌套数组中过滤

1 个答案: