Bootstrap table 行编辑导航

/*开启表格编辑方向键导航
方向键(←): 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:
        }
    });
}

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

时间: 2024-11-13 06:53:27

Bootstrap table 行编辑导航的相关文章

简单粗暴的table行编辑保存

前段时间有人私信问"有没有点击编辑按钮相应的一行变成编辑状态",最后交流了一会儿,只能写了一个简单的Demo,也就是上一篇博文:<最原始的行编辑>,完事后问题又来了,编辑完成后保存能行否?这个问题你们觉得答案是什么,我就不说了,答案你们定...最后强调了一句,编程一定要有自己的思路和想法!!!今天就把剩下的想要的给大家~~~ <html> <head> <title>Table Test Demo</title> <st

table行编辑

一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_table { width:800px; height:auto; margin:0px auto; } .view_table table { width: 100%; font-size: 12px; font-family: "Microsoft YaHei" !important;

bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号

思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: function (value, row, index) { return index+1; } } by 情郎 2016年3月10日00:22:58

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

使用bootstrap table时不能显示筛选列和分页每页显示的行数

使用bootstrap table时不能显示筛选列和分页每页显示的行数 后来在同事的帮助下,才发现没有引用bootstrap的js文件 <script src="/Scripts/bootstrap/js/bootstrap.js"></script> 这个引用了就可以了

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

新的表格展示利器 Bootstrap Table Ⅱ

    上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.Bootstrap Bable 全部数据导出分析 在表格导出数据中,发现设置了分页参数,导出的数据仅为表格加载的分页参数数据,于是,针对这样的情况,通过设置分页参数的值,使表格可以加载更多的数据,可达到导出所有数据的功能需求.然而,在实际的实验中,发现此方案存在以下问题: 表格一次加载一千条数据时,网

BootStrap table使用

bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_compon