如何绑定向上和向下箭头键以启用表格行导航？ [英] How to bind up and down arrow key to enable navigating through table rows?

问题描述

我正在用表格显示搜索结果。每个结果都有一个按钮供用户点击以显示它的完整细节。这很好用。

I'm displaying search results with a table. Each result has a button for user to click on to show the full detail of it. That's working well.

我还想要的是使用键盘的向上和向下箭头导航搜索结果。

What I also want is to make it possible to navigat the search results by using keyboard's up and down arrow.

现在，用户必须点击选择按钮或选项卡到按钮，然后按空格键。

Now, user have to click on the Select button or tab to the button and press space bar.

我想我可以捕获keyup和down事件，然后找到我需要选择的上一个或下一个，然后设置它，但听起来像很多工作。我想知道是否有更好的方法吗？

I suppose I can trap the keyup and down event and then find the previous or next one I need to select and then set it, but it sounds like a lot of work. I wonder if there's a better way to do it?

javascript

var myModel = new function() {
    var self = this;

    self.selectedResult = ko.observable(new MyObj());
    self.searchResults = ko.observableArray();
    self.navUpDown = function (item, evt) {
        if (evt.keyCode == 38) { // up
            var id = item.ID();
            // find previous one and set selectedResult
        }

        if (evt.keyCode == 40) { // down
            var id = item.ID();
            // find next one and set selectedResult
        }
    };
};

html

<table class="table">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>table header 1</th>
            <th>table header 2</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: searchResults">
        <tr data-bind="css: { 'btn-info': $parent.selectedResult() == $data }, event: { keyup: $parent.navUpDown } ">
            <td>
                <button class="btn btn-small" data-bind="click: $parent.selectResult">Select</button>
            </td>
            <td data-bind="text: data1"></td>
            <td data-bind="text: data2"></td>
        </tr>
    </tbody>
</table>

推荐答案

我认为这就是你要找的。

I think this is what you are looking for.

var myModel = new function () {
        var self = this;
        self.selectResult = function (item) {
            self.selectedResult(item);
        };
        self.selectedResult = ko.observable();
        self.searchResults = ko.observableArray([{
            data1: "1",
            data2: "2"
        }, {
            data1: "2",
            data2: "2"
        }, {
            data1: "3",
            data2: "2"
        }]);


        self.selectPrevious = function () {
            var index = self.searchResults().indexOf(self.selectedResult()) - 1;
            if (index < 0) index = 0;
            self.selectedResult(self.searchResults()[index]);
        };

        self.selectNext = function () {
            var index = self.searchResults().indexOf(self.selectedResult()) + 1;
            if (index >= self.searchResults().length) index = self.searchResults().length - 1;
            self.selectedResult(self.searchResults()[index]);
        };


    };
ko.applyBindings(myModel);

$(window).keyup(function (evt) {
    if (evt.keyCode == 38) {
        myModel.selectPrevious();
    } else if (evt.keyCode == 40) {
        myModel.selectNext();
    }
});

查看小提琴

我希望它有所帮助。

这篇关于如何绑定向上和向下箭头键以启用表格行导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！