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 ...
随机推荐
- Ajax调用后台方法报未定义
需要在web.config中<system.webServer>节点下添加如下内容 <handlers> <add name="ajax" verb= ...
- BluetoothSetServiceState 函数
DWORD BluetoothSetServiceState( HANDLE hRadio, BLUETOOTH_DEVICE_INFO* pbtdi, GUID* pGuidService, DWO ...
- JavaScript代码存放位置
JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...
- mongodb 查询数据
MongoDB概念解析: 等同于SQL的数据库表:collectiondocument:等同于SQL的数据记录行field:等同于SQL的数据字段表连接,MongoDB不支持主键,MongoDB自动将 ...
- web 系统原理之路由器和交换机的区别
工作层次不同: 交换机主要工作在数据链路层(第二层) 路由器工作在网络层(第三层). 转发依据不同: 交换机转发所依据的对象时:MAC地址.(物理地址) 路由转发所依据的对象是:IP地址.(网络地址) ...
- chrome - Vimium 插件超级方便快捷键
Vimium插件作用 安装后,可以用定义好的快捷键操作浏览器,好用到爆粗口 下载地址 https://chrome.google.com/webstore/detail/vimium/dbepggeo ...
- Java数学相关工具类
1.求百分比 public class Test1 { public static String myPercent(int y, int z) { String baifenbi = "& ...
- Unity 点乘与叉乘 计算敌人位置
点乘:表示两个向量夹角 a*b=|a| * |b| * cos(ab),判断敌人在前后方 叉乘:表示两向量的法线
- Intel MPI 配置与基本使用
安装 Document 系统配置/含NFS 编译环境 设置 加载 mpivars.[c]sh 脚本. 创建文本文件 mpd.hosts ,其中保存有集群的节点列表,每行一个名字 (只针对开发者) 确保 ...
- Codeforces Round#522 Div2E(思维,背包,组合数学)
#include<bits/stdc++.h>using namespace std;int a[107];int b[10007][107];int c[107][107];int ma ...