最近参与公司的电子档案系统的开发,需求是需要用户鼠标悬停某一行时,需要根据后台业务数据进行提示。
档案系统开发采用的框架是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:'档案编号',100,align:'center'}, 20 {field:'archName',title:'题名',100,align:'center'}, 21 {field:'qlr',title:'土地权利人',100,align:'center'}, 22 {field:'tdzh',title:'土地证号',100,align:'center'}, 23 {field:'zl',title:'坐落',100,align:'center'}, 24 {field:'djk_guid',title:'',0,align:'center'}, 25 {field:'returnMark',title:'',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/)提供的帮助。