GroupBy，在 knockout.js 中过滤

Posted 2023-03-27

【中文标题】GroupBy，在 knockout.js 中过滤

【英文标题】：GroupBy, Filtering in knockout.js

【发布时间】：2021-06-20 03:45:31

【问题描述】：

我如何分组，并使用 knockout.js 在表格中进行过滤。我也尝试展开和折叠行，这是我有点成功的代码）。

这是我的 distinc 函数，请注意，目前它似乎只适用于一个数据元素（我希望它在未来能够在对象的属性上不同。

ko.observableArray.fn.distinct = function (prop) 
    var target = this;
    target.index = ;
    target.index[prop] = ko.observable();

    ko.computed(function () 
        //rebuild index
        var propIndex = ;

        ko.utils.arrayForEach(target(), function (item) 
            var key = ko.utils.unwrapObservable(item[prop]);
            if (key) 
                propIndex[key] = propIndex[key] || [];
                propIndex[key].push(item);
            
        );

        target.index[prop](propIndex);
    );

    return target;
;  

这是我当前的对象函数

course(_id, _courseCode, _courseTitle, _courseCampus) 
    var self = this;
    this.id = ko.observable(_id);
    this.courseCode = ko.observable(_courseCode);
    this.courseTitle = ko.observable(_courseTitle);
    this.coursecampus = ko.observable(_courseCampus);

这是我的视图模型

function ViewModel() 
    var self = this;
    this.courses = ko.observableArray().distinct('courseCode');
    this.gpCourseCode = ko.observableArray();
    this.mutated = ko.observableArray();

    this.switchMutated = function (code) 
        if (self.mutated.indexOf(code) > -1) 
            self.mutated.push(code);
        
        else 
            self.mutated.remove(code);
        
    ;

    this.switchText = function (code) 
        if (self.mutated.indexOf(code) > -1) 
            return "-"
        
        else 
            return "+"
        
    ;

    self.gpCourseCode.push("MATH1030");
    self.gpCourseCode.push("MATH1006");
    self.gpCourseCode.push("MATH1046");
    self.courses.push(new course("1", "MATH1030", "Calculus", "city1"));
    self.courses.push(new course("2", "MATH1030", "Calculus", "city2"));
    self.courses.push(new course("3", "MATH1030", "Calculus", "city3"));
    self.courses.push(new course("4", "MATH1006", "Linear algebra", "city1"));
    self.courses.push(new course("5", "MATH1046", "Discrete Math", "city2"));
    self.courses.push(new course("6", "MATH1006", "Linear algebra", "city2"));
    self.courses.push(new course("7", "MATH1046", "Discrete Math", "city1"));

    this.searchCode = ko.observable("");
    self.filteredRecords = ko.computed(function () 
        return ko.utils.arrayFilter(self.gpCourseCode(), function (rec) 
            return (
                (self.searchCode().length == 0 || rec.toLowerCase().indexOf(self.searchCode().toLowerCase()) >= 0)
            )
        );
    );

这是我的html

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Course Code</th>
            <th>Course Title</th>
            <th>Course Campus</th>
        </tr>
        <tr>
            <th><input data-bind="value: searchCode" placeholder="Course Code" /></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: filteredRecords">
        <tr class="table-dark">
            <td><span data-bind="text: $data"></span></td>
            <td><span></span></td>
            <td></td>
            <td class="text-right">
                <button class="btn btn-secondary" data-bind="click: $root.switchMutated($data), text: $root.switchText($data)"></button>
            </td>
        </tr>
        <!-- ko foreach: $root.courses.index.courseCode()[$data] -->
        <tr data-bind="css:  mutated: $root.mutated.indexOf($data.courseCode()) > -1 ">
            <td><span data-bind="text: $data.id"></span></td>
            <td><span data-bind="text: $data.courseCode"></span></td>
            <td><span data-bind="text: $data.courseTitle"></span></td>
            <td><span data-bind="text: $data.coursecampus"></span></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

这是我的两个问题

当我过滤搜索时，我的可变数组变为空，因此所有元素都被展开。 我很想将我的 gpCourseCode 转换为类似于 course 的类，但我不确定如何对一个类进行区分，而不仅仅是一个元素。

我有一个 jsfiddle here

【参考方案1】：

当我过滤搜索时，我的可变数组变为空，因此所有元素都被扩展。

那是因为您的点击处理程序中有错误。它应该采用函数引用而不是函数调用。所以click: $root.switchMutated($data) 应该变成：click: $root.switchMutated（在 foreach 中，点击处理程序自动将当前项目作为其第一个参数传递）。

但是，您现在必须自己初始化 mutated 数组（或者可能颠倒逻辑，这样您就不必这样做了）。您的单击处理程序是偶然执行此操作的，因为向单击处理程序提供函数调用将导致该函数被执行。