创建easyui的右键菜单(onRowContextMenu)

来源:互联网 发布:买淘宝店铺号去哪里买 编辑:程序博客网 时间:2024/06/07 12:44

第一步:

在HTML页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui)

代码:

  <div id="contextMenu_jygl" class="easyui-menu" style="width: 80px; display: none;">              
                <div id="btn_More" data-options="iconCls:'icon-ok'" onclick="MoreInfo()">查看个人信息</div>
                <div id="Pass" data-options="iconCls:'icon-remove'" onclick="MoreInfo()">通过</div>
                <div id="NoPass" data-options="iconCls:'icon-remove'" onclick="MoreInfo()">不通过</div>
</div>

第二步:

编写JS代码

  $("#dt").datagrid({

 onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                        e.preventDefault(); //阻止浏览器捕获右键事件
                        $(this).datagrid("clearSelections"); //取消所有选中项
                        $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                        $('#contextMenu_jygl').menu('show', {                        
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                        e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                    },

})


0 0
原创粉丝点击