您的位置:首页 > 产品设计 > UI/UE

鼠标右键对Layui每行表格数据进行操作

2018-08-24 09:36 656 查看

通过上次介绍的自定义鼠标右键拓展功能,对Layui数据表格中的每行数据进行操作

[code]layui.use(['table', 'layer'], function () {
var table = layui.table,
layer = layui.layer;
table.render({
elem: '#filing_info_table',
height: 'full-65',
page: true, //开启分页
cols: [cols],
data: data,
done: function (res, curr, count) {
var data = res.data;
$('.layui-table-body tr').each(function (e) {
//表单鼠标右键操作
$(this).mousedown(function (e) {
var index = $(this).attr('data-index');  //获取该表格行的数据
if (e.which == 3) {    //判断时鼠标右键按下
$("#menu").show();        //显示鼠标右键菜单列表
var x = e.originalEvent.x + 'px';  //获取鼠标位置x坐标
var y = e.originalEvent.y + 'px';  //获取鼠标位置y坐标
$("#menu").css({
top: y,    //定位右键菜单的位置
left: x
});
trdata = data[index];    //将该行的数据存放到自己定义的变量中
}
if (e.which == 1) {
$("#menu").hide();    //如果是点击的鼠标左键,则隐藏菜单
}
});

})
}
});

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐