easyui的menu学习

目的:

  • 在某个元素上面点击右键,弹出菜单进行操作。

对table的行添加右击效果,效果图:

效果图

代码:/EasyUiLearn/WebContent/menu/index.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath %>">
    <title>menu</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
</head>
<script>
var rightSel;
var rightR;
$(function(){
    $('#mm').menu({
        onClick:function(item){
        }
    });
    $("#table1").datagrid({
        onRowContextMenu:function(e,index,row){
            $('#table1').datagrid('selectRow',index);
            rightR = index;
            rightSel = $('#table1').datagrid('getSelected');
            e.preventDefault();
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }
    });
});
function del(){
    if(rightR>-1){
        $("#table1").datagrid("deleteRow",rightR);
    }
}

</script>
<body>
    <div class="easyui-panel" title="说明" style="margin-bottom:15px">
        1.table右键出现菜单。<br/>
        2.点击菜单操作对table进行行操作。<br/>
        注意:因为本例datagrid数据格式有问题,所以rightSel = $('#table1').datagrid('getSelected');获取不到值。
    </div>
    <div class="easyui-panel" style="text-align:center;margin-bottom:15px">
        <table id="table1">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">标题</th>
            </tr>
        </thead>
            <tr>
                <td>1111111</td>
            </tr>
            <tr>
                <td>2222222</td>
            </tr>
            <tr>
                <td>3333333</td>
            </tr>
            <tr>
                <td>4444444</td>
            </tr>
        </table>
    </div>

<!-- menu div -->
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="javascript:del();">删除</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>

</body>
</html>

要点:

  1. table绑定右击事件:
$("#table1").datagrid({
    onRowContextMenu:function(e,index,row){
}
  1. 获取右击行内容:
rightSel = $('#table1').datagrid('getSelected');

源码下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容