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:}});
}

转载于:https://www.cnblogs.com/tangchun/p/10757275.html

Bootstrap table 行编辑导航相关推荐

jeecgboot前端自定义组件、JgEditable Table行编辑表格
上一篇本次示例全部是在新建的Demo.vue中操作 jeecgboot前端自定义组件 1.首先,在webstrom中找到ant-design-vue-jeecg/src/views/jeecg/mo ...
bootstrap表格行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrap表格行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案：x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrap table 行内文本样式绑定利用cellstyle属性
新手小白的我在前几天利用bootstrap table写表格样式的时候,有个需求当表格内容为"正常"时,要显示绿色文本,当"离线"时文本颜色显示为红色,具体想达 ...
iview table增加一行减少一行_iView学习笔记(二)：Table行编辑操作
1.前端准备工作首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...
bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
bootstrap table添加合计行
添加合计行首先为表格添加showFooter: true属性然后为列添加footerFormatter属性 var templateTableParams = {classes: "ta ...
Bootstrap的x-editable行编辑
x-editable插件支持行编辑首先,引入Jquery的JS,Bootstrap的CSS和JS 然后,引入插件的CSS和JS <link type="text/css" ...

Bootstrap table 行编辑导航

Bootstrap table 行编辑导航相关推荐

最新文章

热门文章