/*开启表格编辑方向键导航
方向键(←): 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 行编辑导航的更多相关文章

  1. rowStyle设置Bootstrap Table行样式

    日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景 CSS样式 <style> .bg-blue { background ...

  2. iView学习笔记(二):Table行编辑操作

    1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...

  3. table行编辑

    一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_t ...

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

    思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: f ...

  5. bootstrap table dataView展开行详情,p元素自动换行

    // bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }

  6. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  7. bootstrap editable 行内编辑

    除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...

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

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  9. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

随机推荐

  1. solr 学习笔记1

    创建核心(帮助: solr create_core -help) 例子: solr create_core -c mjj_core -d /var/solr/mjj_config (-c 是核心名称 ...

  2. 结合JDK源码看设计模式——单例模式

    定义: 保证一个类仅有一个实例,并提供一个全局访问点 适用场景: 确保任何情况下这个对象只有一个实例 详解: 私有构造器 单利模式中的线程安全+延时加载 序列化和反序列化安全, 防止反射攻击 结合JD ...

  3. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. windows无人值守文件的制作_autounattend.xml

    网址:http://www.windowsafg.com/office2010.html  Note:网络不能是国内网络(需要FQ),否则不能生成自动应答文件. 以Windows10为例:Window ...

  5. centos下python3.6安装uwsgi失败。

    报错信息(省略大部分): plugins/python/uwsgi_python.h::: fatal error: Python.h: No such file or directory #incl ...

  6. MongoDB安装与使用体验

    1.获取并安装 具体的安装包可以到官方网站下载:http://www.mongodb.org/downloads 我看着教程就下载了linux版本吧,也不是很复杂.包的体积有点大. 安装过程比较简单, ...

  7. java EE中的hello1.java及Annotation(注解)

    一.Annotation(注解) 注解(Annotation)很重要,未来的开发模式都需要注解,注解是java.lang.annotation包,Annotation是从java5引入的,它提供一些不 ...

  8. 爬虫须知的HTTP协议

    HTTP请求: 1.HTTP请求主要分为"Get"和"Post"两种方法. 2.当我们在浏览器输入URL http://www.baidu.com 的时候, 浏 ...

  9. spring-boot-starter-mail技术总结

    1. spring-boot-starter-mail技术总结 1.1. 配置读取类SMTPTransport 在application中需要配置的信息,在此类中都可以看到,可以在此类打断点查看 1. ...

  10. java双重检测或枚举类实现线程安全单例(懒汉模式)

    双重检测实现 /** * 懒汉模式->双重同步锁单例模式 */ public class SingletonExample5 { private SingletonExample5() { } ...