C# GroupBy,在knockout.js中过滤
如何使用knockout.js在表中进行分组和筛选。我还尝试展开和折叠行,这是我有点成功的代码) 这是我的distinc函数,请注意,目前它似乎只在一个数据元素上工作(我希望将来它在对象的属性上是不同的)C# GroupBy,在knockout.js中过滤,c#,knockout.js,knockout-2.0,C#,Knockout.js,Knockout 2.0,如何使用knockout.js在表中进行分组和筛选。我还尝试展开和折叠行,这是我有点成功的代码) 这是我的distinc函数,请注意,目前它似乎只在一个数据元素上工作(我希望将来它在对象的属性上是不同的) ko.observableArray.fn.distinct = function (prop) { var target = this; target.index = {}; target.index[prop] = ko.observable({}); k
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);
}
这是我的viewmodel
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>
身份证件
课程代码
课程名称
课程校园
以下是我的两个问题
click:$root。switchMutated($data)
应该变成:click:$root。switchMutated
(在foreach中,单击处理程序自动将当前项作为其第一个参数传递)
但是,您现在必须自己初始化变异的数组(或者可以反转逻辑,这样您就不必这样做了)。您的单击处理程序这样做是偶然的,因为向单击处理程序提供函数调用将导致执行该函数