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

  档案系统开发采用的框架是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. OS X 10.9 Mavericks下显示和隐藏文件(区别10.8.*)

    我们常常在Windows系统下通过界面设置显示和隐藏文件,在Mac OS X通常采用defaults write命令来解决这个问题. 之前的OS X 10.8.*系统可以使用如下两条命令来开始或者关闭 ...

  2. ansible应用案例-一键安装flask

    一.添加主机 sudo vim /etc/ansible/hosts ------------------------------------------------------> [group ...

  3. ServerSocket01

    ServerSocket表示服务端套接字:我们首先来看下其中的一个构造器: public ServerSocket(int port,int backlog) throws IOException 其 ...

  4. npm设置代理提高下载速度

    *nix上给网络类程序设置代理的通用办法,即导出http_proxy/https_proxy环境变量对npm不起作用 需要用npm自己的配置命令来解决: npm set proxy $PROXY np ...

  5. netty的引用计数

    netty的引用计数文档看http://netty.io/wiki/reference-counted-objects.html 为什么会引用引用计数呢,Java中不是有gc线程帮我们回收对象吗?我个 ...

  6. Ubuntu12.04更新出现 The system is running in low-graphics mode解决方法

    这两天都困在这个问题上. 感谢:http://blog.chinaunix.net/uid-26748719-id-3780062.html 原因:显卡没驱动起来 解决方法: sudo apt-get ...

  7. 20169219《linux内核原理与分析》第六周作业

    网易云课堂学习 1.intel x86 CPU有四种不同的执行级别0-3,linux只使用了其中的0级和3级分贝来表示内核态和用户态. 2.一般来说在linux中,地址空间是一个显著的标志:0xc00 ...

  8. Struts2 源码分析-----拦截器源码解析 --- ParametersInterceptor

    ParametersInterceptor拦截器其主要功能是把ActionContext中的请求参数设置到ValueStack中,如果栈顶是当前Action则把请求参数设置到了Action中,如果栈顶 ...

  9. C#判断字符串是否是数字最简单的正则表达式

    if (theStr!= null)//注意加非空判断,否则报错 { System.Text.RegularExpressions.Regex rex = new System.Text.Regula ...

  10. 与pocket 对接技术文档

    同步每日新增用户接口(kwai 提供) 注释:该接口 每天0点(北京时间)之后 向kwai服务器同步前一天  新增的IMEI号 url:http://m.kwai.com/rest/o/pocket/ ...