/*开启表格编辑方向键导航
方向键(←): 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. 六大设计原则(一)SRP单一职责原则

    单一职责原则SRP(Single reponsibility principle) BO(Business Object):业务对象 Biz(Business Logic):业务逻辑 SRP最简单的例 ...

  2. .NET Framework和 .Net Core实现不一致的API之 `EmailAddressAttribute`

    .NET Framework和 .Net Core实现不一致的API之 EmailAddressAttribute Intro 现在我们的类库项目大多是 NETStandard2.0 项目,但是 ne ...

  3. 使用d3.v5实现折线图与面积图

    d3最新是V5版的,比起V2的API变动了不少,写下我实现过程 效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en&qu ...

  4. #ifndef, #define, #endif 作用

    #ifndef, #define, #endif 作用 https://www.cnblogs.com/challenger-vip/p/3386819.html

  5. this指针的初运用

    this一般运用场景: 1.位于函数中,谁调用指向谁 var make = "Mclaren"; var model = "720s" function ful ...

  6. Followme Devops实践之路

    引言 天下武功,唯快不破 想要提高开发团队效率,势必要有一套完整而成熟的开发流程方案,除了sprint迭代开发模式之外,还有近几年流行的devops流程,都是可以大幅度提高开发效率的工具. 我们团队也 ...

  7. php自动加载规范 PSR4 (Thinkphp)

    PSR4是一种自动加载规范,老版本是PSR0,尽管thinkPHP支持PSR4和PSR0的自动加载方式,但是默认也是优先进行PSR4加载,如果失败,再进行PSR0的加载.本篇文章只会讨论PSR4的加载 ...

  8. 关于.Net mvc 项目在本地vs运行响应时间过长无法访问时,解决方法!

    最近可能是刚升级了电脑使用了window10操作系统,总是遇到了一些以前没有遇到过的事情! 今早来到公司本来准备写bug的,但是当我打开vs运行的时候发现今天的电脑响应的时间明显的要比之前打开网页调试 ...

  9. Vue.js-03:第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  10. 总结C语言字符检测函数:isalnum、isalpha...

    前言:最近一直在刷leetcode的题,用到isalnum函数,用man手册查找了一下,总共有13个相关函数如下: #include <ctype.h> int isalnum(int c ...