jquery easyui鼠标右击显示自定义的菜单

1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单:

在html页面中写:

<div id="menu" class="easyui-menu" style="width:120;display:none">
    <div onclick="add()" iconCls="icon-add">增加</div>
    <div onclick="remove()" iconCls="icon-remove">删除</div>
    <div onclick="edit()" iconCls="icon-edit">编辑</div>
</div>

在js中的表格js中写datagrid的onRowContextMenu属性,如下:

onRowContextMenu:function(e,rowIndex,rowData){

    e.preventDefault();//阻止右击弹出的浏览器默认菜单
    $(this).datagrid(‘unselectAll‘);//先取消全部的选中行,防止选中多行,一次右击只选中一行
    $(this).datagrid(‘selectRow‘,rowIndex);//选中选中的行
    $(‘#menu‘).menu(‘show‘,{
        left:e.pageX,//让右击显示出来的菜单获取位置
        top:e.pageY

    })

}
时间: 2024-10-10 13:17:32

jquery easyui鼠标右击显示自定义的菜单的相关文章

springmvc + jquery easyui实现分页显示

如有不明白的地方,戏迎加入QQ群交流:66728073 一,下载并导入jquery easyui的导 <link rel="stylesheet" type="text/css" href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css"> <link rel="stylesheet" type="text/css

实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

JQuery EasyUI Combobox 实现省市二级联动菜单

//编辑修改或新增页面联动可以这样写 jQuery(function(){    // 省级     $('#province').combobox({         valueField:'itemvalue', //值字段         textField:'itemtext', //显示的字段         url:'/user/sort/province_list',         panelHeight:'auto',         required:true,       

bootstrap 导航栏鼠标悬停显示下拉菜单

在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4

jquery实现鼠标悬停显示大图(个人随笔)

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标悬停图片放大</title> <link type="text/css" rel="stylesheet" href="stye/style.css"/> <script type="tex

动态控制jQuery easyui datagrid工具栏显示隐藏

//隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分隔线 $('div.datagrid-toolbar div').eq(0).hide(); //显示第一个按钮 $('div.datagrid-toolbar a').eq(0).show(); //显示第一条分隔线 $('div.datagrid-toolbar div').eq(0).hide(); disable toolbar按钮 $('#btnpichuli').l

EasyUI 鼠标经过 显示气泡一例

$(function(){ $('#contacts').tooltip({ position: 'bottom', content: '<c:forEach items="${record.contacts}" var="staff">${staff.name}-${staff.jobRole }-${staff.tel }<br></c:forEach>', onShow: function(){ $(this).toolti

jQuery EasyUI 教程

jQuery EasyUI 是一个基于 jQuery的javascript框架,集成了各种用户界面插件.jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点.本教程将告诉您如何使用 jQuery EasyUI 框架创建应用.现在开始学习 jQuery EasyUI!jQuery EasyUI 离线版CHM下载! jQuery EasyUI 教程目录 jQuery EasyUI 教程jQuery EasyUI 简介 jEasyUI 应用jEasyUI 创建 CRUD 应用j

EasyUI+zTree实现简单的树形菜单切换

使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--导入eas