扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求:
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 事件
- var row=opts.finder.getRow(_4a5,_4af);
- opts.onMouseOverRow.call(_4a5,e,_4af,row);
扩展后如图所示:
2、扩展添加 onMouseOutRow 事件
- var row=opts.finder.getRow(_4a5,_4b1);
- opts.onMouseOutRow.call(_4a5,e,_4b1,row);
扩展后如图所示:
至此,只需四句代码即可实现 Datagrid mouseover 及 mouseout 事件的扩展,扩展后具体应用如下:
- <script type="text/javascript">
- $(function(){
- $('#baidu').datagrid({
- url: 'www.baidu.com',
- fit:true,
- fitColumns: true,
- pagination:true,
- pageSize:10,
- pageList:[10,20,50,80],
- singleSelect:true,
- onMouseOverRow:function(e, rowIndex, rowData){
- alert("Over~");
- },
- onMouseOutRow:function(e,rowIndex, rowData){
- alert("Out~");
- }
- });
- });
扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件demo下载:http://download.csdn.net/detail/for_china2012/6419133
效果图如下:
【第二种实现方式】
这种方式较第一种来说简单实用,具体实现代码如下:
- onLoadSuccess:function(){
- $(".datagrid-row").mouseover(function(){
- var url = $(this).children("td").eq(0).text(); //表示第一个td,也就是第一列,想要获得其他的列可以是eq(1)...等。
- if (url == "") {
- $("#show_img").attr("src", "${ctx}/images/person.jpg");
- } else {
- $("#show_img").attr("src", "${ctx}/" + url);
- }
- $("#preview").css("top", ($(this).offset().top - xOffset) + "px").css("left", ($(this).offset().left + yOffset) + "px").fadeIn("slow");
- });
- $(".datagrid-row").mouseout(function(){
- $("#preview").hide();
- });
- }
在 DataGrid 初始化时通过 onLoadSuccess 时间绑定数据表格行鼠标悬停离开事件,审查元素得知,DataGrid 生成的数据表格行都含有class=“datagrid-row”样式,之后通过 jQuery 获得当前行下指定列内容即可:
- var url = $(this).children("td").eq(0).text();
获得内容之后怎么处理就交给你了。。。
扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)的更多相关文章
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- jQuery easyuI datagrid 多行编辑
在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定.这是小弟的做法,望各位有好招的大侠指点. 1.添加jQuery 和jQuery easyuI的引用. 2.添加id为tt的 ...
- jquery easyui DataGrid 数据表格 属性
用法 1. <table id="tt"></table> 1. $('#tt').datagrid({ 2. url:'datagrid_d ...
- 扩展jQuery easyui datagrid增加动态改变列编辑的类型
$.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...
- jquery easyui datagrid 编辑行 类型combobox
完成编辑瞬间datagrid中显示的是combobox的value 而非text var rows=$('#tb1').datagrid('getRows'); for(var i=0;i<ro ...
- jquery easyui datagrid设置行样式 不可删除某行
rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSu ...
- jquery easyui datagrid数据自动换行 panel用法
nowrap:false 初始化panel $('#txtLeftPercent').panel({ title: '剩余权重:' + percent, height: 10, width: 180, ...
随机推荐
- [Leetcode Week10]01 Matrix
01 Matrix 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/01-matrix/description/ Description Given a ...
- POJ2245 Lotto
Lotto Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6634 Accepted: 4201 Description ...
- rtp包格式
转载一篇帮助我了解h264 rtp的文档,地址http://www.cppblog.com/czanyou/archive/2009/12/25/67940.html 当packetization-m ...
- iOS开发 贝塞尔曲线UIBezierPath(后记)
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- python中的with与上下文管理器
#转载请留言联系 很多人平时需要打开文件进行读取写入操作时,通常这样: f = open('文件路径','w') f.write(data) f.close 这样写有一个潜在的问题,如果在调用 wri ...
- selenium 多窗口切换(windows)
在web应用中,常常会遇见点击某个链接会弹出一个新的窗口,或者是相互关联的web应用 ,这样要去操作新窗口中的元素,这时就需要主机切换到新窗口进行操作..WebDriver 提供了switchTo() ...
- NetBeans中从实体创建Restful webservice工程
分布式系统和移动计算...... 这学期上的课,名字听起来是不是很霸气? 然而 其实就是 restful 和 安卓...... 汗....... 用的IDE还是netBeans, 第一次听说有这个ID ...
- 曹政:CTO这点事
几乎整个互联网行业都缺 CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找 CTO 的需求,嗯,算下来超过两位数了,光最近一个月就有 3 个,而且这三家都是刚拿 ...
- debian 更换sh的默认链接为bash
https://blog.csdn.net/mudongliangabcd/article/details/43458895
- centos 修改ftp目录
# usermod -d /home/www username // # service vsftpd restart // 重启vsftpd 两步搞定