/*开启表格编辑方向键导航
方向键(←): 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. 由浅入深讲解责任链模式,理解Tomcat的Filter过滤器

    本文将从简单的场景引入, 逐步优化, 最后给出具体的责任链设计模式实现. 场景引入 首先我们考虑这样一个场景: 论坛上用户要发帖子, 但是用户的想法是丰富多变的, 他们可能正常地发帖, 可能会在网页中 ...

  2. HTML5最佳实践web app

    简介 本文重点关注如何充分利用HTML5和CSS让web app运行更加流畅. Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合 ...

  3. 【原】无脑操作:Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  4. #if和#ifdef的区别

    学习STM32偶然发现:在Keil中直接预先定义宏USE_STDPERIPH_DRIVER,但是却没有指定宏的值.而在头文件中判断用的是如下代码: #ifdef USE_STDPERIPH_DRIVE ...

  5. 管道及I/O重定向

    管道及IO 重定向 > < >> <<计算机组成: 运算器,控制器:CPU 存储器:RAM 输入/输出设备 I/O 程序: 指令和数据 控制器:指令 运算器: 存储 ...

  6. 使用PowerShell实时查看日志文件的变化

    开发过程中,会有好多的日志输出到日志文件中了,每次看日志都需要打开,log文件,觉得麻烦 找了个省事的方法 使用PowerShell 使用命令:Get-Content D:\www\webapp1\L ...

  7. C# 定时关机小程序

    1.打开VS2019,创建界面和按钮 2. 代码如下: private void button1_Click(object sender, EventArgs e) { downpc(txttime. ...

  8. Ubuntu 安装yii2 advanced版 遇到的坑

    1.安装 Composer https://www.yiichina.com/doc/guide/2.0/start-installation通过 Composer 安装 curl -sS https ...

  9. .net core下简单构建高可用服务集群

    一说到集群服务相信对普通开发者来说肯定想到很复杂的事情,如zeekeeper ,反向代理服务网关等一系列的搭建和配置等等:总得来说需要有一定经验和规划的团队才能应用起来.在这文章里你能看到在.net ...

  10. SpringBoot整合Netty并使用Protobuf进行数据传输(附工程)

    前言 本篇文章主要介绍的是SpringBoot整合Netty以及使用Protobuf进行数据传输的相关内容.Protobuf会简单的介绍下用法,至于Netty在之前的文章中已经简单的介绍过了,这里就不 ...