客户需求:

jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut)

如图所示,Datagrid 鼠标悬停/离开数据行时切换了不同的样式显示:

此时用谷歌开发者工具审查鼠标悬停行元素时发现,table tr 节点 class 属性中增加了 datagrid-row-over 样式:

于是打开 jquery.easyui.min.js 脚本,查找 datagrid-row-over 关键字,6983 行中发现关键字:

根据脚本 6974 行看出,此段脚本是为 Datagrid 绑定 mouseover 事件,紧接着便是 mouseout 事件的绑定。

之后参照文章http://www.loststop.com/archive/soft-and-internet/3819.html修改,发现作者用的版本为 jQuery EasyUI 1.2.4 ,奈何 jQuery EasyUI 现在已更新版本至 1.3.4(注:本文使用 jQuery EasyUI 1.3.2 版),脚本内容较之前版本变化太大,遂照葫芦画瓢摸索着扩展了 Datagrid 的 mouseover  及 mouseout 事件,具体步骤如下:

1、扩展添加 onMouseOverRow 事件

  1. var row=opts.finder.getRow(_4a5,_4af);
  2. opts.onMouseOverRow.call(_4a5,e,_4af,row);

扩展后如图所示:

2、扩展添加 onMouseOutRow 事件

  1. var row=opts.finder.getRow(_4a5,_4b1);
  2. opts.onMouseOutRow.call(_4a5,e,_4b1,row);

扩展后如图所示:

至此,只需四句代码即可实现 Datagrid mouseover 及 mouseout 事件的扩展,扩展后具体应用如下:

  1. <script type="text/javascript">
  2. $(function(){
  3. $('#baidu').datagrid({
  4. url: 'www.baidu.com',
  5. fit:true,
  6. fitColumns: true,
  7. pagination:true,
  8. pageSize:10,
  9. pageList:[10,20,50,80],
  10. singleSelect:true,
  11. onMouseOverRow:function(e, rowIndex, rowData){
  12. alert("Over~");
  13. },
  14. onMouseOutRow:function(e,rowIndex, rowData){
  15. alert("Out~");
  16. }
  17. });
  18. });

扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件demo下载:http://download.csdn.net/detail/for_china2012/6419133

效果图如下:

【第二种实现方式】

这种方式较第一种来说简单实用,具体实现代码如下:

  1. onLoadSuccess:function(){
  2. $(".datagrid-row").mouseover(function(){
  3. var url = $(this).children("td").eq(0).text(); //表示第一个td,也就是第一列,想要获得其他的列可以是eq(1)...等。
  4. if (url == "") {
  5. $("#show_img").attr("src", "${ctx}/images/person.jpg");
  6. } else {
  7. $("#show_img").attr("src", "${ctx}/" + url);
  8. }
  9. $("#preview").css("top", ($(this).offset().top - xOffset) + "px").css("left", ($(this).offset().left + yOffset) + "px").fadeIn("slow");
  10. });
  11. $(".datagrid-row").mouseout(function(){
  12. $("#preview").hide();
  13. });
  14. }

在 DataGrid 初始化时通过 onLoadSuccess 时间绑定数据表格行鼠标悬停离开事件,审查元素得知,DataGrid 生成的数据表格行都含有class=“datagrid-row”样式,之后通过 jQuery 获得当前行下指定列内容即可:

  1. var url = $(this).children("td").eq(0).text();

获得内容之后怎么处理就交给你了。。。

扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)的更多相关文章

  1. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  2. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  3. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  4. jQuery easyuI datagrid 多行编辑

    在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定.这是小弟的做法,望各位有好招的大侠指点. 1.添加jQuery 和jQuery easyuI的引用. 2.添加id为tt的 ...

  5. jquery easyui DataGrid 数据表格 属性

    用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_d ...

  6. 扩展jQuery easyui datagrid增加动态改变列编辑的类型

    $.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...

  7. jquery easyui datagrid 编辑行 类型combobox

    完成编辑瞬间datagrid中显示的是combobox的value 而非text var rows=$('#tb1').datagrid('getRows'); for(var i=0;i<ro ...

  8. jquery easyui datagrid设置行样式 不可删除某行

    rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSu ...

  9. jquery easyui datagrid数据自动换行 panel用法

    nowrap:false 初始化panel $('#txtLeftPercent').panel({ title: '剩余权重:' + percent, height: 10, width: 180, ...

随机推荐

  1. [Leetcode Week10]01 Matrix

    01 Matrix 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/01-matrix/description/ Description Given a ...

  2. POJ2245 Lotto

    Lotto Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6634   Accepted: 4201 Description ...

  3. rtp包格式

    转载一篇帮助我了解h264 rtp的文档,地址http://www.cppblog.com/czanyou/archive/2009/12/25/67940.html 当packetization-m ...

  4. iOS开发 贝塞尔曲线UIBezierPath(后记)

    使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...

  5. python中的with与上下文管理器

    #转载请留言联系 很多人平时需要打开文件进行读取写入操作时,通常这样: f = open('文件路径','w') f.write(data) f.close 这样写有一个潜在的问题,如果在调用 wri ...

  6. selenium 多窗口切换(windows)

    在web应用中,常常会遇见点击某个链接会弹出一个新的窗口,或者是相互关联的web应用 ,这样要去操作新窗口中的元素,这时就需要主机切换到新窗口进行操作..WebDriver 提供了switchTo() ...

  7. NetBeans中从实体创建Restful webservice工程

    分布式系统和移动计算...... 这学期上的课,名字听起来是不是很霸气? 然而 其实就是 restful 和 安卓...... 汗....... 用的IDE还是netBeans, 第一次听说有这个ID ...

  8. 曹政:CTO这点事

    几乎整个互联网行业都缺 CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找 CTO 的需求,嗯,算下来超过两位数了,光最近一个月就有 3 个,而且这三家都是刚拿 ...

  9. debian 更换sh的默认链接为bash

    https://blog.csdn.net/mudongliangabcd/article/details/43458895

  10. centos 修改ftp目录

    # usermod -d /home/www username // # service vsftpd restart // 重启vsftpd 两步搞定