<script>
layui.use(['table', 'dropdown', 'util'], function(){
var table = layui.table;
var dropdown = layui.dropdown;
var util = layui.util;
// 渲染
table.render({
elem: '#ID-table-onrowContextmenu',
defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单
url: '/static/json/2/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
cols: [[
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true},
{field:'username', title:'用户', width:120},
{field:'sex', title:'性别', width:80},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名'},
{field:'experience', title:'积分', width:80, sort: true}
]],
});
// 右键单击行事件
table.on('rowContextmenu(ID-table-onrowContextmenu)', function(obj){
var data = obj.data; // 得到当前行数据
var dataCache = obj.dataCache; // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
var index = obj.index; // 得到当前行索引
var tr = obj.tr; // 得到当前行 元素的 jQuery 对象
var options = obj.config; // 获取当前表格基础属性选项
var e = obj.e; // 当前的 jQuery 事件对象 --- 2.9.14+
console.log('rowContextmenu', obj); // 查看返回对象的所有成员
// 右键操作
dropdown.render({
trigger: 'contextmenu',
show: true,
data: [
{title: 'Menu item 1', id: 'AAA'},
{title: 'Menu item 2', id: 'BBB'}
],
click: function(menuData, othis) {
// 显示选中的相关数据 - 仅用于演示
layer.alert(util.escape(JSON.stringify({
dropdown: menuData,
table: obj.data
})));
}
});
// obj.del() // 删除当前行
// obj.update(fields, related); // 修改行数据
obj.setRowChecked({ type: 'radio' }); // 选中当前行
});
});
</script>
