扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

最新推荐文章于 2021-10-15 22:06:16 发布
最新推荐文章于 2021-10-15 22:06:16 发布
阅读量3.5w 收藏 16
点赞数 7
分类专栏： jQuery EasyUI Web HTML JavaScript 文章标签： easyui 扩展 jquery datagrid 开发者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/for_china2012/article/details/12849365
版权
本文介绍了如何扩展jQuery EasyUI Datagrid的onMouseOver和onMouseOut事件，以在鼠标悬停和离开数据行时显示或隐藏人员头像。通过修改jquery.easyui.min.js脚本并添加onMouseOverRow和onMouseOutRow事件，实现了Datagrid行样式的动态切换。同时提供了两种实现方式，包括直接在Datagrid初始化时通过onLoadSuccess事件绑定鼠标事件。
摘要由CSDN通过智能技术生成

客户需求：

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

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

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

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

最低0.47元/天 解锁文章
码农先生
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
DataGrid中的每一行，绑定onmouseover、onmousemove、onmouseout事件
sinablog1的专栏
08-24 1852
实现原理：    为DataGrid中的每一行，绑定onmouseover、onmousemove、onmouseout事件，使的鼠标移动到行内时，自动显示一个，鼠标移出该行，就把这个隐藏掉。实现代码：    前台：1．  定义的样式：.transparent { FILTER: alpha(opacity=85);BORDER-TOP: indianred 1px sol
鼠标悬停提示JS实现
11-19
从网上DOWN下来的鼠标鼠标悬停提示，用JS实现，可用于按钮提示和超链接提示作用。。留作自用
扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载
10-18
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
DataGrid [onmouseover] [onmouseout]
leeight的专栏
07-09 792
private void mygrid_ItemDataBound(object sender, System.Web.UI.Webcontrols.DataGridItemEventArgs e){        if(e.Item.ItemType == ListItem.AlternatingItem || e.Item.ItemType == ListItem.Item){　　　　　　　　
jqgrid mouseover css,jqgrid自动滚动数据内容demo
weixin_39609051的博客
08-04 311
如果jqgrid一次行加载的数据太多，而不想通过拖动滚动条来查看数据，需要javascript代码自动滚动滚动条，实现数据自动滚动展示，可以通过下面的办法实现。jqgrid数据加载生成完毕后(gridComplete事件)，获取数据数据的容器，用计时器来设置容器的scrollTop来实现。jqgrid的数据容器样式为“.ui-jqgrid-bdiv”，获取这个div。jqgrid自动滚动数据内容d...
EasyUI 给datagrid单元格添加onmouseover事件
iuhiqnehc的专栏
04-02 4237
1、前端网页代码，设置EasyUI的datagrid： tableid="tt"class="easyui-datagrid"style="width:700px;height:500px;font-size:xx-large " url="../JsonData/WebForm1Data.aspx"singleSelect="true"rownumbers="true">
easyui datagrid 增加鼠标悬停弹窗事件
08-21
在本示例中，我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能：当鼠标悬停在某一行时，弹出一个窗口显示该行的关键信息，例如用于图片预览。以下是对这个知识点的详细解释： 1. **EasyUI Datagrid**： ...
jQuery Easyui datagrid/treegrid 清空数据
10-21
主要介绍了jQuery Easyui datagrid/treegrid 清空数据的相关资料
jQuery easyUI datagrid 增加求和统计行的实现代码
12-28
在datagrid的onLoadSuccess事件增加代码处理。 <style type=text/css> .subtotal { font-weight: bold; }/*合计单元格样式*/ </style> [removed] function onLoadSuccess() { //添加“合计”列 $...
为EasyUI的dataGrid单元格增加鼠标移入移出事件
weixin_33890526的博客
03-02 765
onLoadSuccess: function (data) { $(".datagrid-row").mouseover(function (e) { var text = $(this).children("td").eq(1).text(); var tooltip = "...
jQurey中鼠标悬浮事件
java全包开发，java辅导
10-15 293
for（var i=0;i<sataList.lenth;i++）{ curDialog.find('#table').find("#label_id").mouseover(function(){ var value = $(this).html(); $(this).attr("title",value); }); } var form = Dialog.find("#id"); var filePath = form.find("#file").val(); va...
JQuery-EasyUI Datagrid数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
weixin_33824363的博客
12-10 664
基于JQuery EasyUI 1.3.5版本两种方式，一、修改easy-ui提供的js，缺点是直接修改源文件，后续版本升级存在问题easyui中的datagrid设置每行的class为datagrid-row-over和datagrid-row，在源代码中查找到与datagrid-row-over相关的实现代码（大概在7636行），根据脚本7619 行看出，此段脚...
miniui实现隔行换色与鼠标悬浮提示
Smile yourlife
07-28 1835
<style type="text/css"> html,body{ margin:0;padding:0;border:0;width:730px;height:100%;overflow:auto;color: black; } .mini-grid-border { border-color: white; } .mini-diff-color { background:#e4effa; } </sty
关于datagrid鼠标悬停行数突出显示
weixin_33709590的博客
08-01 144
private void DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e){if(e.Item.ItemIndex!=-1) //鼠标在DataGrid中移动时，选中的那一行显示颜色 { e.Item.Attributes.Add("...
easyui焦点离开事件的解决方案
weixin_30239339的博客
08-10 314
转载于:https://www.cnblogs.com/knightsu/p/7340220.html
一个简单的jQuery鼠标悬停经过事件
09-14 1387
Alex说需要再logo位置加个一个效果，需要鼠标放在LOGO上时我们的文字网址显示下划线并且文字透明度从80%提高到100%，开始先用CSS3来实现这个效果研究起来比较有难度，所以直接用jquery来实现了。 代码如下： $(document).ready(function(){ var isShow=false; $(".logo").mouseover(function
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值