最近參與公司的電子檔案系統的開發，需求是需要用戶鼠標懸停某一行時，需要根據后台業務數據進行提示。
檔案系統開發采用的框架是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/）提供的幫助。