我有一个与淘汰JS绑定的表格，并希望添加2个过滤器。一个下拉过滤面板，选择它时，已经有一个面板下拉附加1FormPage到Additional5FormPage应该只显示具有此选定面板的行。过滤器存档的其他下拉列表：
self.archiveOptions = ko.observableArray(['Archive', 'Not Archived', 'All']);
如果＆＃39;存档＆＃39;如果选中，它应仅过滤存档日期具有值的行
如果＆＃39; Not Archive＆＃39;如果选中，它应仅过滤存档日期为空或空的行
如果＆＃39;全部＆＃39;如果选中，它应显示存档日期有值的所有行。
过滤器应该协同工作，以便根据下拉列表过滤表格。
JS：
var AdditionalQuestionsViewModel = function(data) {
var self = this;
var getURL = UrlAddress + 'admin.ajax/AdditionalQuestions/';
self.edit = ko.observable(false);
self.additionalQuestions = ko.observableArray([]);
self.loading = ko.observable(false);
self.archiveOptions = ko.observableArray(['Archive', 'Not Archived', 'All']);
self.selectedArchive = ko.observable();
self.panels = ko.observableArray();
self.selectedPanel = ko.observable();
self.getPanels = function () {
$.ajax({
type: "GET",
url: getURL + "GetPanels",
success: function (result) {
self.panels(result);
},
error: function (error) {
$().notify('Error', 'failure');
}
});
}
self.activateEdit = function () {
self.edit(true);
}
self.activateView = function () {
self.edit(false);
}
self.load = function () {
$.ajax({
type: "GET",
url: getURL + 'GetAll',
}).done(function (data) {
$(data).each(function (index, element) {
var mappedItems =
{
QuestionName: ko.observable(element.QuestionName),
Question: ko.observable(element.Question),
Panel: ko.observable(element.Panel),
StartDate: ko.observable(element.StartDate && moment(element.StartDate).format('DD/MM/YYYY')),
ArchiveDate: ko.observable(element.ArchiveDate && moment(element.ArchiveDate).format('DD/MM/YYYY')),
WordCount: ko.observable(element.WordCount),
QuestionOrder: ko.observable(element.QuestionOrder)
};
self.additionalQuestions.push(mappedItems);
});
}).error(function (ex) {
alert("Error");
});
}
self.filteredQuestions = ko.computed(function () {
return self.additionalQuestions().filter(function (question) {
return (question.Panel == self.selectedPanel() &&
self.selectedArchive() == "Archive" ? question.ArchiveDate != null :
self.selectedArchive() == "Not Archived" ? question.ArchiveDate == null :
self.selectedArchive() == "All");
});
});
self.save = function (currentData) {
var submitData = {
QuestionName: currentData.QuestionName(),
Question: currentData.Question(),
Panel: currentData.Panel(),
StartDate: currentData.StartDate(),
ArchiveDate: currentData.ArchiveDate(),
WordCount: currentData.WordCount(),
QuestionOrder: currentData.QuestionOrder()
};
var csrfToken = $("input[name='__RequestVerificationToken']").val();
$.ajax({
headers: { __RequestVerificationToken: csrfToken },
type: "POST",
contentType: "application/json",
url: getURL + 'Edit',
data: JSON.stringify(submitData)
}).done(function (questionName) {
currentData.QuestionName(questionName);
$().notify(currentData.QuestionName() + ' updated successfully', 'success', false, 1000);
}).error(function (ex) {
$().notify('Update failed', 'failure');
})
}
self.getPanels();
}
HTML：
<div class="ColouredBlock ColouredBlock_Purple">
<h1 class="header">
Additional Questions Tool
</h1>
<div id="additionalQuestions">
<a href="New.aspx" class="OrangeLink TopRightHeaderLevelLink" style="margin-right: 60px">New question</a>
<a class="OrangeLink TopRightHeaderLevelLink" data-bind="visible: !edit(), click: activateEdit">Edit</a>
<a class="OrangeLink TopRightHeaderLevelLink" data-bind="visible: edit(), click: activateView">Cancel</a>
<div class="warning" style="font-weight: bold">
<p>Please Note:</p>
<ul>
<li>Start date should be the date of the first position opened in the recruitment round</li>
<li>Archive date should be the date of the last position opened in the recruitment round</li>
<li>Typos and firm name changes are the only allowed changes to the question text</li>
</ul>
</div>
<select data-bind="
options: panels,
optionsText: 'PanelName',
optionsValue: 'PanelName',
value: selectedPanel,
optionsCaption: 'Filter by panel...'">
</select>
<select data-bind="
options: archiveOptions,
value: selectedArchive,
optionsCaption: 'Filter by archive...'">
</select>
<h2>Additional Questions</h2>
<table class="ListingTable">
<thead>
<tr>
<th>Question</th>
<th>Panel</th>
<th>Start Date</th>
<th>Archive Date</th>
<th>Word Count</th>
<th>Order</th>
<th data-bind="visible: edit()">Edit</th>
</tr>
</thead>
<tbody data-bind="foreach: filteredQuestions">
<!--EDITING -->
<tr class="Row" data-bind="visible: $parent.edit()">
<td>
@*<span data-bind="text: QuestionName.substring(12)" style="font-weight: bold; margin-bottom: 5px"></span>*@
<span data-bind="text: QuestionName" style="font-weight: bold; margin-bottom: 5px"></span>
<textarea data-bind="value: Question" rows="3" cols="50"></textarea>
</td>
<td>
<select data-bind="
options: $parent.panels,
value: Panel,
optionsText: 'PanelName',
optionsValue: 'PanelName'">
</select>
</td>
<td><input type="text" data-bind="datepicker: { dateFormat: 'dd/mm/yy' }, value: StartDate" style="width: 100px" /></td>
<td><input type="text" data-bind="datepicker: { dateFormat: 'dd/mm/yy' }, value: ArchiveDate" style="width: 100px" /></td>
<td><input type="text" data-bind="value: WordCount" size="2"></td>
<td><input type="text" data-bind="value: QuestionOrder" size="1"></td>
<td><img src="~/images/yes.gif" data-bind="click: $parent.save" /></td>
</tr>
<!--VIEWING-->
<tr class="Row" data-bind="visible: !$parent.edit()">
<td>
@*<span data-bind="text: QuestionName.substring(12)" style="font-weight: bold"></span>
<span data-bind="text: (Question.length <= 70 ? Question : Question.substring(0, Question.substring(0, 70).lastIndexOf(' ')) + '...')"></span>*@
<span data-bind="text: QuestionName" style="font-weight: bold"></span>
<span data-bind="text: Question"></span>
</td>
<td data-bind="text: Panel"></td>
<td data-bind="text: StartDate"></td>
<td data-bind="text: ArchiveDate"></td>
<td data-bind="text: WordCount"></td>
<td data-bind="text: QuestionOrder"></td>
</tr>
</tbody>
</table>
<div>
<div data-bind="visible: loading" style="margin-bottom: 15px">Loading ...</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var viewModel = new AdditionalQuestionsViewModel();
ko.applyBindings(viewModel, document.getElementById("additionalQuestions"));
viewModel.load();
});
</script>
非常感谢任何帮助，谢谢
答案 0 :(得分：1)
使用计算的KO计算两个下拉选择值的交集以过滤问题。这是对代码和逻辑的粗略模拟。
self.archiveOptions = ko.observableArray(["Archive", "Not Archived", "All"]);
self.selectedArchive = ko.observable(); // Bound to the drop down
self.panelOptions = ko.observableArray(["Panel1", "Panel2"]);
self.selectedPanel = ko.observable(); // Bound to the drop down
self.questions = ko.observableArray([]); // Populated with XHR call
self.filteredQuestions = ko.pureComputed(function() {
return self.questions().filter(function(question) {
return question.panel === self.selectedPanel() &&
self.selectedArchive() === "Archive" ? question.archiveDate !== null :
self.selectedArchive() === "Not Archived" ? question.archiveDate === null :
self.selectedArchive() === "All";
});
});
然后将您的表tbody绑定到filteredQuestions而不是questions：
<tbody data-bind="foreach: filteredQuestions">