Jquery EasyUI---Datagrid右键菜单

    最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid

的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能

     

    

   用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦

的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键

就可以。下面上代码:

  

  HTML 代码 

<div id="menu" class="easyui-menu" style="width: 30px; display: none;">
      <!--放置一个隐藏的菜单Div-->
      <div id="btn_Delete" data-options="iconCls:'icon-remove'" onclick="">删除</div>
      <!--具体的菜单事件请自行添加,跟toolbar的方法是基本一样的-->
      <div id="btn_Modify" data-options="iconCls:'icon-edit'">编辑</div>
 </div>

  下面是Javascript的代码

   

//DataGrid右键菜单代码:
$("#dg").datagrid({
    onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件
        //三个参数:e里面的内容很多,真心不明白,rowIndex就是当前点击时所在行的索引,rowData当前行的数据
        e.preventDefault(); //阻止浏览器捕获右键事件
        $(this).datagrid("clearSelections"); //取消所有选中项
        $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
        $('#menu').menu('show', {
            //显示右键菜单
            left: e.pageX,//在鼠标点击处显示菜单
            top: e.pageY
        });
        e.preventDefault();  //阻止浏览器自带的右键菜单弹出
    }
});

   下面是实现后的效果:

   
 

   现在只是简单的实现了右键菜单,后期还会有改进。我们做出来的东西最后是要交给用户使用的,为用户着想,

怎样让用户用着舒心,在用户意想不到的时候,帮用户完成了他们想要完成的工作,这就是这个软件最大的成功!

     

时间: 2024-10-28 23:51:17

Jquery EasyUI---Datagrid右键菜单的相关文章

jQuery EasyUI实现右键菜单变灰不可用效果_jquery

首先,实现"除此之外全部关闭"变灰不可用. 当只打开一个Tab选项卡时,右键菜单里"除此之外全部关闭"就应该变灰不可用,这样可以提示用户没有除这一个选项卡没有其他的选项卡了.程序实现很简单了,只要获得打开Tab选项卡的个数,如果个数为1,那么就把"除此之外全部关闭"变灰不可用就行了. var tabcount = $('#tabs').tabs('tabs').length; //tab选项卡的个数 if (tabcount <= 1) {

jquery easyui datagrid 某列的数据为0或空时,这个列不显示

问题描述 jquery easyui datagrid 某列的数据为0或空时,这个列不显示 jquery easyui datagrid 某列的数据为0或空时,怎么让这个列不显示. 解决方案 问题是你所有行的此列都是0没有..要是有些列不是0那不是也被隐藏了, 如果是只要有0或者为空就隐藏,自己遍历下返回的数据,然后调用hideColumn执行隐藏此列$('#dg').datagrid('hideColumn','列名称') 解决方案二: jquery easyui datagrid 列宽按百分

jquery easyui datagrid 只有部分列的单元格调用单击单元格事件

问题描述 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件. 比如有姓名,年龄,性别3列.我要点击姓名下的单元格执行一些方法,但点击年龄和性别下的单元格则不执行方法 解决方案 http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html 解决方案二: EasyUI Datagrid 自定义列.Foolter及单元格

jquery easyui datagrid新增 java后台参数接收

问题描述 jquery easyui datagrid新增 java后台参数接收 js部分: var editRow = undefined; var dategrid; $(function() { dategrid = $('#userListTable').datagrid({ url : 'loadSalesmanList', idField : 'userCode', columns : [ [ { title : '姓名', field : 'voUserName', width :

jquery easyui datagrid 滚动条

问题描述 jquery easyui datagrid 滚动条 easyui版本:1.4.1 问题:datagrid中有好多好多列,且有数据.但是它只显示部分列.不出现滚动条,其他列看不见.我没有设置列的宽度,fitColumns的值是false. 我把宽度设成很小,才会出现滚动条.比如300px.但是这样太小了. 怎么解决啊. 解决方案 设置一个height值试试. 另外可参考中文api: http://www.zi-han.net/case/easyui/datagrid&tree.html

jQuery EasyUI datagrid实现本地分页的方法_jquery

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

jQuery easyUI datagrid 增加求和统计行的实现代码_jquery

在datagrid的onLoadSuccess事件增加代码处理. <style type="text/css"> .subtotal { font-weight: bold; }/*合计单元格样式*/ </style> <script type="text/javascript"> function onLoadSuccess() { //添加"合计"列 $('#table').datagrid('append

jQuery实现自定义右键菜单的树状菜单效果_jquery

本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就

jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码_jquery

1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果_jquery

1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-index属性等. 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等.将来保存的时候,就是通过取这个属性值找某一行的数据的. function