Layui表格删除行
时间:2022-07-25
本文章向大家介绍Layui表格删除行,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Layui表格删除行
开发工具与关键技术:MVC
作者:盘洪源
撰写时间:2019年6月17日星期一
在这里我要实现的一个删除行的效果就是通过点击键盘上的delete按钮来删除表格的选中行,想要实现这个效果需要怎么做呢?
首先你得知道键盘的键码,这个肯定是要的,这个去网上去搜一下,就会有很详细的讲解了。
首先自已在页面上先初始化一个表格先
ShopID = layuiTable.render({
elem: "#ShopID",
height: 270,
cols: [[
{ type: 'numbers', title: ''
},
{ field: 'colour', title: '颜色', align: 'center', width: 100,
templet: '#selectTools' },
{ field: 'size', title: '尺码', align: 'center', width: 100, templet:
'#selectTool' },
{ field: 'shopNumber', title: '商品编码', align: 'center', width:
130, edit: 'text' },
{ field: 'shopNumbers', title: '商品条码', align: 'center', width:
120, edit: 'text' },
{ field: 'top', title: '上限', align:
'center', width: 50, edit: 'text' },
{ field: 'bottom', title: '下限', align: 'center', width: 50, edit:
'text', fixed: 'right' }
]],
})
这里需要注意的就是这个table的html样式
就是有些人容易把这个lay-filter忘记写,这个如果没写会出现什么错误呢?就是这个表格的监听行单机事件就会获取不到,然后这个监听行单机事件就不行,所以这个记得要写上。
然后就是监听行单机事件。
layuiTable.on('row(ShopID)',
function (obj) {
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
//检测你点击的是不是delete键
document.onkeydown =
function (event) {
var e = event ||
window.event || arguments.callee.caller.arguments[0];
//delete删除行
if (e.keyCode == 46) {
//JS出发btnSubmit的单机事件
obj.del();
}
}
})
主要是键盘按下事件,然后通过判断键码来进行一个行数据的删除,一个简单的行删除就这样。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 5个技巧让你更好的编写 JavaScript(ES6) 中条件语句
- cURL-7.72.0(scheme)
- cURL-7.72.0初体验(参数写法)
- 21道前端面试题,值得收藏~
- OpenCV4.4 CUDA编译与加速全解析
- JavaScript中的Event Loop机制详解(前端必看)
- HDFS集群缩容案例: Decommission DataNode
- 应用深度学习进行乳腺癌检测
- 为什么你的数据仓库项目推进不下去?
- 19个有趣的Linux 命令,最后一个?... 打死我都不敢尝试!
- SpringBoot 整合 Quartz 实现 JAVA 定时任务的动态配置
- 使用 IntelliJ IDEA 查看类图,内容极度舒适
- 精选10款谷歌浏览器插件武装你的浏览器
- 王者荣耀为什么不使用微服务架构?
- Dubbo 时间轮