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 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
随机推荐
- 人生苦短,我用 Python
从2015开始国内就开始慢慢接触Python了,从16年开始Python就已经在国内的热度更高了,目前也可以算的上"全民Python"了.众所周知小学生的教材里面已经有Python ...
- 土旦:关于display:flex碰上white-space nowrap 影响布局的问题
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...
- 用weexplus从0到1写一个app
说明 基于wexplus开发app是来新公司才接触的,之前只是用过weex体验过写demo,当时就被用vue技术栈来开发app的开发体验惊艳到了,这个开发体验比react native要好很多,对于我 ...
- vmware P2V迁移域内windows服务器脱域问题
windows 域服务器采用vmware converter进行物理机转换为虚拟机,需要在完成后进行退域重新加域操作. 否则,有可能会出现服务器在30天后脱域情况.出现脱域情况,可以通过退域加域的方式 ...
- asp.net core导入excel
接昨天的导出 导入excel内容 对比昨天导出的内容增加了一行实体属性名称作为标题行,这样到转换为实体的时候才能找到对应的属性. 导入代码 public IActionResult InportExc ...
- TCP三次握手和四次挥手的全过程
三次握手: 第一次握手:客户端发送syn包(syn=x)到服务器,并进入SYN_SEND状态,等待服务器确认:第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个 ...
- springboot+jwt做api的token认证
本篇和大家分享jwt(json web token)的使用,她主要用来生成接口访问的token和验证,其单独结合springboot来开发api接口token验证很是方便,由于jwt的token中存储 ...
- [Abp vNext 源码分析] - 1. 框架启动流程分析
一.简要说明 本篇文章主要剖析与讲解 Abp vNext 在 Web API 项目下的启动流程,让大家了解整个 Abp vNext 框架是如何运作的.总的来说 ,Abp vNext 比起 ABP 框架 ...
- 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建
目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏 ...
- 微信小程序开发01-小程序的执行流程是怎么样的?
前言 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是我们需要做一个Hybrid体系,如果做App,React Native也是不错的选择,但是一定要有完善的分层: ① ...