蒋文健
|
be35ed0b55
|
增加行的上下文菜单事件
增加行的上下文菜单事件和是否显示系统默认上下文菜单事件的配置，方便在表格行上使用`layui.dropdown`组件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>开始使用 layui</title>
<link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 你的 HTML 代码 -->
<table id="demo" lay-filter="test"></table>
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'table', 'dropdown'], function(){
var layer = layui.layer;
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
// 不显示系统默认上下文菜单
,defaultContextmenu: false
,height: 312
,data: [
{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"words":82830700,"classify":"作家","score":57}
,{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"words":64928690,"classify":"词人","score":70.5}
,{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"words":6298078,"classify":"酱油","score":31}
,{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"words":37117017,"classify":"诗人","score":68}
,{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"words":76263262,"classify":"作家","score":6}
,{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"words":60344147,"classify":"作家","score":87}
,{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"words":57768166,"classify":"作家","score":34}
,{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"words":82030578,"classify":"作家","score":28}
,{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"words":16503371,"classify":"词人","score":14}
,{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"words":86801934,"classify":"词人","score":75}
]
,page: true //开启分页
,limit: 2
,limits: [2, 5, 10]
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'words', title: '字数', width: 135, sort: true}
]]
});
table.on('contextmenu(test)', function(obj){
// 下拉菜单组件
layui.dropdown.render({
show: true
,trigger: 'contextmenu'
,data: [
{title: '操作1', id: 'event1'},
{title: '操作2', id: 'event2'}
],
click(data, othis) {
console.log(data)
}
});
});
});
</script>
</body>
</html>
```
|
2023-01-04 16:08:54 +08:00 |
|