easyUI 鼠标悬停某行提示 

 

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

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

　　

 1 js代码片段：
 2 $(function(){
 3         $('#resultDatas').datagrid({
 4                url:"/GTDA/CadastreManage/daScanMng_findLand_RegisterCardByStateForPage?status=2",
 5             autoRowHeight:true,
 6             rownumbers:true,
 7             fitColumns:true,
 8             fit:true,
 9             pagination:true,
10             singleSelect:true,
11             columns:[[
12                 {field:'arch_guid',title:'',align:'center',
13                     formatter:function(value,row,index){
14                         if(row.arch_guid==undefined||row.arch_guid=='') return ;
15                         var del = '<div class="datagrid-cell-check" ><input type="checkbox" name="arch_guid" value=""/></div>';
16                         return del;
17                     }
18                 },
19                 {field:'archid',title:'档案编号',width:100,align:'center'},
20                 {field:'archName',title:'题名',width:100,align:'center'},
21                 {field:'qlr',title:'土地权利人',width:100,align:'center'},
22                 {field:'tdzh',title:'土地证号',width:100,align:'center'},
23                 {field:'zl',title:'坐落',width:100,align:'center'},
24                 {field:'djk_guid',title:'',width:0,align:'center'},
25                 {field:'returnMark',title:'',width:0,align:'center'},
26             ]],
27             toolbar:'#tb',
28             onSelect: function(rowId,rowData){
29                     selectId = rowData.djk_guid;
30                     selectName = rowData.archid;
31             },
32             rowStyler: function(index,row){
33                 if (row.returnMark == '1'){
34                     return 'background-color:yellow;';
35                 }
36             },
37             rowTooltip: function (index, row) {
38                 console.info(row);
39                 if(row.returnMark == '1'){
40                      var text = "此档案为退回件（需修正）" ;
41                     return $("<span></span>").css("color", "Red").text(text);
42                 }
43             }
44         });


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/）提供的帮助。

posted @ 2015-01-19 16:37  HEWU  阅读(5105)  评论(0)  编辑  收藏  举报