最近参与公司的电子档案系统的开发,需求是需要用户鼠标悬停某一行时,需要根据后台业务数据进行提示。

  档案系统开发采用的框架是struts2+mybatis+spring+easyUI开发,而前端的easyUI官方并不提供类似的功能,查找资料后,在别人的样本中找到了类似功能,通过流云大神开发的easyUI的拓展功能包实现鼠标悬停行提示,具体如下:

  

 js代码片段:
$(function(){
$('#resultDatas').datagrid({
url:"/GTDA/CadastreManage/daScanMng_findLand_RegisterCardByStateForPage?status=2",
autoRowHeight:true,
rownumbers:true,
fitColumns:true,
fit:true,
pagination:true,
singleSelect:true,
columns:[[
{field:'arch_guid',title:'',align:'center',
formatter:function(value,row,index){
if(row.arch_guid==undefined||row.arch_guid=='') return ;
var del = '<div class="datagrid-cell-check" ><input type="checkbox" name="arch_guid" value=""/></div>';
return del;
}
},
{field:'archid',title:'档案编号',width:100,align:'center'},
{field:'archName',title:'题名',width:100,align:'center'},
{field:'qlr',title:'土地权利人',width:100,align:'center'},
{field:'tdzh',title:'土地证号',width:100,align:'center'},
{field:'zl',title:'坐落',width:100,align:'center'},
{field:'djk_guid',title:'',width:0,align:'center'},
{field:'returnMark',title:'',width:0,align:'center'},
]],
toolbar:'#tb',
onSelect: function(rowId,rowData){
selectId = rowData.djk_guid;
selectName = rowData.archid;
},
rowStyler: function(index,row){
if (row.returnMark == '1'){
return 'background-color:yellow;';
}
},
rowTooltip: function (index, row) {
console.info(row);
if(row.returnMark == '1'){
var text = "此档案为退回件(需修正)" ;
return $("<span></span>").css("color", "Red").text(text);
}
}
});

rowTooltip即通过拓展的插件实现的鼠标悬停提示。需要引入的插件如下:

script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.datagrid.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/easyui/jquery.jdirk.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.menu.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.panel.js"></script>

  最主要拓展包是:jeasyui.extensions.datagrid.js,其他的包是此包的拓展包。流云二次开发DEMO:http://sshe.jeasyuicn.com/index.jsp ,在此特别敬谢alongSelf(http://www.cnblogs.com/alongSelf/)提供的帮助。

easyUI 鼠标悬停某行提示的更多相关文章

  1. Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. 【IDE_PyCharm】PyCharm中配置当鼠标悬停时快速提示方法参数

    方法一:通过在settings里面设置当鼠标至于方法之上时给出快速提示 方法二:按住Ctrl键,光标放在任意变量或方法上都会弹出该变量或方法的详细信息,点击鼠标还能跳转到变量或方法的定义处

  3. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  4. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  5. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  6. 兄弟连教育分享:用CSS实现鼠标悬停提示的方法

    兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...

  7. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  8. WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画

    原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...

  9. eclipse 鼠标悬停提示

    如果想要关闭鼠标悬停提示,只要把Window --> Preferences... --> Java --> Editor --> Hovers 把 Combined Hove ...

随机推荐

  1. Android 使用技巧

    1.Android 模拟器使用虚拟SD卡 首先创建一个虚拟的SD卡 mksdcard 500M ~/sdcard.img 启动模拟器的时候指定虚拟的SD卡 emulator -sdcard ~/sdc ...

  2. JavaScript代码存放位置

    JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...

  3. [计数问题dp]子数列的个数

    http://www.51nod.com/tutorial/course.html#!courseId=15 解题关键:主要是一种思想 $dp[i] = dp[i - 1]*2$ 如果a[i]不在之前 ...

  4. TCP的三次握手和四次挥手,为什么?

    首先,我们要知道TCP是全双工的,即客户端在给服务器端发送信息的同时,服务器端也可以给客户端发送信息.而半双工的意思是A可以给B发,B也可以给A发,但是A在给B发的时候,B不能给A发,即不同时,为半双 ...

  5. VMware 虚拟机 Ubuntu 系统没有IP地址 解决:UP BROADCAST MULTICAST 问题

    VMware 虚拟机 ifconfig没有net_addr地址的解决方法 使用时间长的虚拟机,会莫名其妙的连接不上网 在终端中,使用ifconfig命令查看Ubuntu系统的IP地址,发现没有分配IP ...

  6. 我对PageRank的理解及R语言实现

    PageRank,网页排名,又称网页级别.Google左侧排名或佩奇排名,是一种由搜索引擎根据网页之间相互的超链接计算的技术,而作为网页排名的要素之一,以Google公司创办人拉里·佩奇(Larry ...

  7. 17、GATK使用简介 Part2/2

    转载:http://blog.sina.com.cn/s/blog_6721167201018jik.html Change Logs: 13/01/12: 增加了一篇文献,外加一些无聊的修改.12/ ...

  8. idea中java项目增加module后,增加的目录(src)无法增加包(Package)

    在idea项目中,增肌model后,在项目根目录下增加src目录,右键发现无法增加包(Package). 仔细观察发现,新增加的src目录是棕色,而原先的src目录是浅蓝色的,见下图: 在src右键, ...

  9. Linux下查看文件编码,文件编码格式转换和文件名编码转换

    linux相关   2008-10-07 10:46   阅读1392   评论0   字号: 大大  中中  小小  如果你需要在Linux中 操作windows下的文件,那么你可能会经常遇到文件编 ...

  10. C++中struct和class定义类区别

    有一种常见的误解认为用struct保留字定义的类与用class定义的类有很大的区别.唯一的不同只是默认的成员保护级别和默认的派生保护级别,没有其他的区别. 1. 用class定义的类,默认的成员访问级 ...