Question

我刚刚开始使用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());
});

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

Answer 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">

根据下拉值过滤挖空表

1 个答案: