Layui表格删除行

PHY_68

发布于 2020-09-16 14:35:09

3.2K0

发布于 2020-09-16 14:35:09

文章被收录于专栏：laopan技术分享

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();

                        }

                    }

                })

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/06/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html