easyUI 鼠标悬停某行提示
最近参与公司的电子档案系统的开发,需求是需要用户鼠标悬停某一行时,需要根据后台业务数据进行提示。
档案系统开发采用的框架是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 鼠标悬停某行提示的更多相关文章
- Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 【IDE_PyCharm】PyCharm中配置当鼠标悬停时快速提示方法参数
方法一:通过在settings里面设置当鼠标至于方法之上时给出快速提示 方法二:按住Ctrl键,光标放在任意变量或方法上都会弹出该变量或方法的详细信息,点击鼠标还能跳转到变量或方法的定义处
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- 兄弟连教育分享:用CSS实现鼠标悬停提示的方法
兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...
- JS基础(二)事件监听练习之table鼠标悬停行变色
JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].r ...
- WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...
- eclipse 鼠标悬停提示
如果想要关闭鼠标悬停提示,只要把Window --> Preferences... --> Java --> Editor --> Hovers 把 Combined Hove ...
随机推荐
- HDFS中hsync方法介绍
HDFS中hsync方法介绍 原创文章,转载请注明:博客园aprogramer 原文链接:HDFS中hsync方法介绍 1. 背景介绍 HDFS在写数据务必要保证数据的一致性与持久性,从HDFS最初的 ...
- 51单片机的TXD、 RXD 既接了 232 又接了 485芯片 ,会导致通信失败!
51单片机的TXD. RXD 既接了 232 又接了 485 ,会导致通信失败! 下面是绘制电路板用的部分电路图: 通信现象: 1.我使用了USB-232的下载模块,把它接到P4上,发现单片机只能发送 ...
- CSS之边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 情况1:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元 ...
- badblocks 检查磁盘损坏的区块
Linux badblocks命令用于检查磁盘装置中损坏的区块. 语法: badblocks [-svw][-b <区块大小>][-o <输出文件>][磁盘装置][磁盘区块数] ...
- Dialog 基本使用
1 : 效果图 btnGeneral.setOnClickListener(new View.OnClickListener() { @Override public void onClick( ...
- 关于android的一些博文收集
Java网络编程总结 http://www.cnblogs.com/oubo/archive/2012/01/16/2394641.html Android应用系列:双击返回键退出程序 http:// ...
- Umbraco中的RelatedLink的使用
Umbraco中经常需要使用到RelatedLink, 那么在代码中我们如何来获取RelatedLink呢, 可能在Backoffice中我们有一个RelatedLink, 上面有3个链接,如下所示: ...
- 打开Visual Studio Code,rg.exe占用CPU过高
打开Visual Studio Code,再打开文件-首选项-设置 搜索“followSymlinks” 将“√”给取消掉
- NetCore 学习笔记(DI 实例生命周期)
Transient: 每一次GetService都会创建一个新的实例 Scoped: 在同一个Scope内只初始化一个实例,同一个请求内只会被创建一次 Singleton :整个应用程序生命周期 ...
- MATLAB求解非齐次线性方程组
例如方程组: 法1:左除法 >> A=[3 1 -1;1 2 4;-1 4 5];b=[3.6;2.1;-1.4]; >> x=A\b x = 1.4818 -0.4606 0 ...