客户需求:

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. });
  19. </script>

扩展 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();
  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 多行编辑

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

  3. jquery easyui DataGrid 数据表格 属性

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

  4. jquery easyui datagrid 编辑行 类型combobox

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

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

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

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

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

  7. 浅谈jQuery easyui datagrid操作单元格样式

    今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...

  8. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

  9. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

随机推荐

  1. ASP.NET网站部署CentOS操作笔记

    ASP.NET 网站部署 Linux 服务器简要笔记 Mono 刚问世的时候,跑起来确实有很多不可预估的 BUG,但是被微软收购后推出的几个版本相对来说稳定了许多. 这几天使用了一个 n 年前用 We ...

  2. Java中操作Redis

    一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6 下载后的文件为: 解压后,选择当前64位win7系统对 ...

  3. New Concept English there (1)Typing speed exercise

    Today,I start learn new concept english there,Mainly for listening practice and typing speed exercis ...

  4. 关于block和inline元素的float

    CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...

  5. 创建python3.6的虚拟开发环境virtualenv

    为了保证各个项目环境和插件的相对独立,使用virtualenv作为python的虚拟运行环境,这样在项目维护方面,减少在依赖包上所花费的时间. 1.安装 virtualenv虚拟环境插件 pip in ...

  6. javaScript高程笔记--最佳实践

    1.可维护性 <1>什么是可维护的代码 (1)可理解性 (2)直观性 (3)可适应性 (4)可扩展性 (5)可调试性 <2>代码约定 (1)可读性---适当的进行注释[函数和方 ...

  7. python中对文件的处理

    1.当文件中存放的用户名的密码,是以字符串的形式存储时,怎么进行读取和操作 eg:MLing,123456 niuniu,234567 luoluo,345678 方法一:将字符串转为字典 1)字典查 ...

  8. Android MVC,MVP,MVVM模式入门——重构登陆注册功能

    一  MVC模式: M:model,业务逻辑 V:view,对应布局文件 C:Controllor,对应Activity 项目框架: 代码部分: layout文件(适用于MVC和MVP两个Demo): ...

  9. MySQL 存储过程,游标,临时表创建

    -- -------------------------------------------------------------------------------- -- Routine DDL - ...

  10. c++语言第二次作业

    一题目7-1统计学生成绩 1实验代码 #include<stdio.h> int main(void) { int i,n,grade,A,B,C,D,E; A=B=C=D=E=; sca ...