客户需求:

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. bzoj 1087 状压dp

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4130  Solved: 2390[Submit][ ...

  2. Python -- 使用pickle 和 CPickle对数据对象进行归档和解析

    经常遇到在Python程序运行中得到了一些字符串.列表.字典.对象等数据,想要长久的保存下来,方便以后使用,而不是简单的放入内存中关机断电就丢失数据. 这个时候Pickle模块就派上用场了,它可以将对 ...

  3. laravel中上传图片之后图片的处理

    $file=Input::file('file'); if ($file->isValid()){ $entension=$file->getClientOriginalExtension ...

  4. redisAPI整理

    全局命令 1.查看所有键 keys * 2.键总数 dbsize 3.检查键是否存在 exists key 4.删除键 del key del key1 key2 key3 5.键过期 expire ...

  5. MVC DateTime 字段 EditTime 必须是日期模板只能用于字段访问、属性访问、一维数组索引或单参数自定义索引器表达式

    ASP.NET MVC 中model含有DateTime类型的字段 更新字段时提示:字段 EditTime必须是日期,. 但是明明填入的是日期还是给出这个提示, 看有的博客说那是因为日期形式错了,如果 ...

  6. 【51nod-1521】一维战舰

    爱丽丝和鲍博喜欢玩一维战舰的游戏.他们在一行有n个方格的纸上玩这个游戏(也就是1×n的表格). 在游戏开始的时候,爱丽丝放k个战舰在这个表格中,并不把具体位置告诉鲍博.每一只战舰的形状是 1×a 的长 ...

  7. Flask_script扩展调用的方式

    Flask中flask-script扩展的使用 通过使用Flask-Script扩展,我们可以在Flask服务器启动的时候,通过命令行的方式传入参数.而不仅仅通过app.run()方法中传参 Flas ...

  8. window环境下创建Flask项目需要安装常见模块命令

    安装Flask环境 pip install flask==0.10.1 使用命令行操作 pip install flask-script 创建表单 pip install flask-wtf 操作数据 ...

  9. 我也说说Emacs吧(3) - 文件基本操作

    Spacemacs文件基本操作 有了前两讲的积累,我们知道了: 1. 我们既要学习emacs的操作,也要学习vi的操作 2. emacs是一个可扩展的平台,我们并不是从头配置,而是使用一套成熟的集成方 ...

  10. [GitHub] git push的时候报错 fatal: unable to access 'http://github.com/xxx/xxx.git/': Recv failure: Connection reset by peer

    参考了两种方法: 1. 解决fatal: unable to connect to github.com问题 http://blog.csdn.net/greenqingqingws/article/ ...