码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap table 行编辑导航

时间:2019-04-23 17:06:11      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:===   ble   pre   class   edit   bootstra   rap   行编辑   case   

/*开启表格编辑方向键导航
方向键(←): VK_LEFT (37)
方向键(↑): VK_UP (38)
方向键(→): VK_RIGHT (39)
方向键(↓): VK_DOWN (40)
*/
function OpenTableEditKeyNavigation() {
    $(document).on("keyup", "tr.editable-select input", function (event) {
        var keyCode = event.keyCode;
        var $this = $(this);
        switch (keyCode) {
            case 37://向左
            case 39://向右
                var $trInputs = $this.parents("tr.editable-select").find("input[type!=‘hidden‘]");
                var curInputIndex = $trInputs.index($this);
                var nextIndex = keyCode == 37 ? (curInputIndex - 1) : (curInputIndex + 1);
                if (nextIndex===-1) {
                    nextIndex = $trInputs.length - 1;
                }
                else if (nextIndex === $trInputs.length) {
                    nextIndex = 0;
                }
                $trInputs[nextIndex].focus();
                break;
            case 38://向上
            case 40://向下
                
                var $curTr = $this.parents("tr.editable-select");
                var $trs = $curTr.parents("tbody").find("tr");
                var $trInputs = $curTr.find("input[type!=‘hidden‘]");
                var curInputIndex = $trInputs.index($this);

                var curTrIndex = $curTr.index();
                var nextIndex = keyCode === 38 ? (curTrIndex - 1) : (curTrIndex + 1);
                if (nextIndex === -1) {
                    nextIndex = $trs.length - 1;
                }
                else if (nextIndex === $trs.length) {
                    nextIndex = 0;
                }
                var nextTr = $trs[nextIndex];
                if (nextTr) {
                    nextTr.click();
                    $(nextTr).find("input")[curInputIndex].focus();
                }
                break;
            default:
        }
    });
}

 

Bootstrap table 行编辑导航

标签:===   ble   pre   class   edit   bootstra   rap   行编辑   case   

原文地址:https://www.cnblogs.com/tangchun/p/10757275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!