github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

增加行的上下文菜单事件

Browse Source 
增加行的上下文菜单事件和是否显示系统默认上下文菜单事件的配置，方便在表格行上使用`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>
```
pull/1188/head
蒋文健 2 years ago committed by GitHub
parent f20875a2ba
commit be35ed0b55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File

8
src/modules/table.js
Unescape View File

@ -305,6 +305,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
,cellMaxWidth: Number.MAX_VALUE // 所有单元格默认最大宽度
,editTrigger: 'click' // 单元格编辑的事件触发方式
,defaultToolbar: ['filter', 'exports', 'print'] // 工具栏右侧图标
,defaultContextmenu: true // 显示默认上下文菜单
,autoSort: true // 是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
,text: {
none: '无数据'
@ -2067,9 +2068,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
setRowEvent.call(this, 'row');
}).on('dblclick', 'tr', function(){ //双击行
setRowEvent.call(this, 'rowDouble');
});
}).on('contextmenu', 'tr', function(e){ //菜单
if (!options.defaultContextmenu) e.preventDefault();
setRowEvent.call(this, 'contextmenu');
});;
// 创建行单击、双击事件
// 创建行单击、双击、菜单事件
var setRowEvent = function(eventType){
var othis = $(this);
if(othis.data('off')) return; //不触发事件

Write Preview
Loading…
Cancel
Save