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:
}
});
}
Bootstrap table 行编辑导航的更多相关文章
- rowStyle设置Bootstrap Table行样式
日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景 CSS样式 <style> .bg-blue { background ...
- iView学习笔记(二):Table行编辑操作
1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...
- table行编辑
一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_t ...
- bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号
思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: f ...
- bootstrap table dataView展开行详情,p元素自动换行
// bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- bootstrap editable 行内编辑
除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
随机推荐
- vue学习记录④(路由传参)
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- ArcGIS Engine 笔记-控件类型
控件 MapControl Map 地图控件 PageLayouControl 布局地图控件 TOCControl 目录控件 ToolbarCo ...
- Activity简介
声明周期 4种状态 running / paused / stopped / killed 声明周期 activity启动 --->onCreate() -->onStart()---& ...
- string转QBytearray
最近在程序中遇到要把图片的二进制string存成图片到本地,其实就是写文件 structCameraInfo tmpCameraInfo; string strData = tmpCalibrateR ...
- [20190402]关于semtimedop函数调用2.txt
[20190402]关于semtimedop函数调用2.txt --//前几天做了sql语句在mutexes上的探究.今天看看_mutex_wait_time设置很大的情况下是否semtimedop会 ...
- 客户端和服务端(C#) 时间戳的生成和转换
C# DateTime与时间戳的相互转换,包括JavaScript时间戳和Unix的时间戳. 1. 什么是时间戳 首先要清楚JavaScript与Unix的时间戳的区别: JavaScript时间戳: ...
- .NET WebAPI中使用Session使用
问题及其解决方案: 今天做项目的时候因为需要编写一个短信验证码的接口我需要在我的后台.net webapi中存入我随机生成的短信验证码方便与前端传递过来的数据对比,所以决定使用session做缓存.但 ...
- Hadoop系列009-NameNode工作机制
本人微信公众号,欢迎扫码关注! NameNode工作机制 1 NameNode & SecondaryNameNode工作机制 1.1 第一阶段:namenode启动 1)第一次启动namen ...
- Java相关面试题总结+答案(一)
[Java基础] 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,即Java开发工具包,提供了Java 的开发环境和运行环境. JRE:Java Ru ...
- 关于 Docker 镜像的操作,看完这篇就够啦 !(下)
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...