如何绑定上下箭头键以启用在表格行中导航? [英] 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.

现在，用户必须点击Select按钮或标签到按钮并按下空格键.

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屋！