前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Layui表格删除行

Layui表格删除行

作者头像
PHY_68
发布2020-09-16 14:35:09
3.2K0
发布2020-09-16 14:35:09
举报
文章被收录于专栏:laopan技术分享

Layui表格删除行

开发工具与关键技术:MVC

作者:盘洪源

撰写时间:2019年6月17日星期一

在这里我要实现的一个删除行的效果就是通过点击键盘上的delete按钮来删除表格的选中行,想要实现这个效果需要怎么做呢?

首先你得知道键盘的键码,这个肯定是要的,这个去网上去搜一下,就会有很详细的讲解了。

首先自已在页面上先初始化一个表格先

代码语言:javascript
复制
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忘记写,这个如果没写会出现什么错误呢?就是这个表格的监听行单机事件就会获取不到,然后这个监听行单机事件就不行,所以这个记得要写上。

然后就是监听行单机事件。

代码语言:javascript
复制
                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();

                        }

                    }

                })

主要是键盘按下事件,然后通过判断键码来进行一个行数据的删除,一个简单的行删除就这样。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/06/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档