根据下拉值过滤淘汰表答案

【问题标题】：Filter knockout table based on dropdown-value根据下拉值过滤淘汰表
【发布时间】：2015-09-15 21:48:16
【问题描述】：

我刚刚开始使用 Knockout。到目前为止，我已经设法在表格中使用 JSON 显示一些日志数据。我将整个数据集下载到浏览器，现在我想根据下拉表中的选定值过滤表，但我无法找到如何执行此操作。

这是我的看法

    <select data-bind="options: $root.LogLevels, value: 'LogLevel', optionsText: 'LogLevel'"></select>


        <table class="table table-striped" id="myTable">
            <thead>
                <tr>
                    <th>System</th>
                    <th>Level</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: logList">
                <tr>
                    <td data-bind="text: Logger"></td>
                    <td data-bind="text: Level"></td>
                    <td data-bind="text: Date"></td>
                </tr>
            </tbody>
        </table>

这是脚本

function LogViewModel() {
    var self = this;
    self.logList = ko.observableArray();
    self.LogLevels = [{ "LogLevel": "Info" }, { "LogLevel": "Debug"}, { "LogLevel": "Error"}];

    self.getLogs = function () {
        $.ajax({
            type: 'GET',
            url: '/Home/GetAllLogData',
            contentType: "application/javascript",
            dataType: "json",
            success: function (data) {
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
                self.logList(array);
            },
            error: function (jq, st, error) {
                alert(error);
            }
        });

    };
}



$(document).ready(function () {
    ko.applyBindings(new window.LogViewModel());
});

非常感谢您对此提供的任何帮助！

【问题讨论】：

标签： knockout.js

【解决方案1】：

您需要使用计算函数来支持您的表格。计算函数将检查下拉列表中的当前值，并构建列表的辅助版本来填充表格。

self.LogLevel = ko.observable();
self.filteredLogList = ko.computed(function(){
    var filteredList = [];
    if( self.LogLevel() ) {
        for( var i = 0, len = self.logList().length; i < len; i++ ) {
            if( self.logList()[i].Level == self.LogLevel().LogLevel ) {
                filteredList.push(self.logList()[i];
            }
        }
    }
    else {
        filteredList = self.logList();
    }
    return filteredList;
});

然后将您的表格指向使用过滤后的列表：

<tbody data-bind="foreach: filteredLogList">

【讨论】：