扩充 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~");
- }
- });
- });
- </script>
扩展 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();
- 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 多行编辑
在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 编辑行 类型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, ...
- 浅谈jQuery easyui datagrid操作单元格样式
今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
随机推荐
- ASP.NET网站部署CentOS操作笔记
ASP.NET 网站部署 Linux 服务器简要笔记 Mono 刚问世的时候,跑起来确实有很多不可预估的 BUG,但是被微软收购后推出的几个版本相对来说稳定了许多. 这几天使用了一个 n 年前用 We ...
- Java中操作Redis
一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6 下载后的文件为: 解压后,选择当前64位win7系统对 ...
- New Concept English there (1)Typing speed exercise
Today,I start learn new concept english there,Mainly for listening practice and typing speed exercis ...
- 关于block和inline元素的float
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...
- 创建python3.6的虚拟开发环境virtualenv
为了保证各个项目环境和插件的相对独立,使用virtualenv作为python的虚拟运行环境,这样在项目维护方面,减少在依赖包上所花费的时间. 1.安装 virtualenv虚拟环境插件 pip in ...
- javaScript高程笔记--最佳实践
1.可维护性 <1>什么是可维护的代码 (1)可理解性 (2)直观性 (3)可适应性 (4)可扩展性 (5)可调试性 <2>代码约定 (1)可读性---适当的进行注释[函数和方 ...
- python中对文件的处理
1.当文件中存放的用户名的密码,是以字符串的形式存储时,怎么进行读取和操作 eg:MLing,123456 niuniu,234567 luoluo,345678 方法一:将字符串转为字典 1)字典查 ...
- Android MVC,MVP,MVVM模式入门——重构登陆注册功能
一 MVC模式: M:model,业务逻辑 V:view,对应布局文件 C:Controllor,对应Activity 项目框架: 代码部分: layout文件(适用于MVC和MVP两个Demo): ...
- MySQL 存储过程,游标,临时表创建
-- -------------------------------------------------------------------------------- -- Routine DDL - ...
- 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 ...