界面用的easyui,想datagrid中鼠标移动到单元格中时,弹出提示框展示数据详情。
先看看效果图:
实现的方法是,在列定义的时候用formatter,把easyui的tooltip,加到值里面,然后再数据加载成功后初始化tooptp。
datagrid列定义:
<th data-options="field:'sale_num',sortable:true,width:100, formatter: function(value,row,index){ var pcRate=((row.pc_sale_num/value)*100).toFixed(2); var mobileRate=((row.mobile_sale_num/value)*100).toFixed(2); var oldCustomRate=((row.old_custom_sale_num/value)*100).toFixed(2); return value+' <a title=\'全部:'+value+'<br>-------------------------------<br>pc端:'+row.pc_sale_num+'('+pcRate+'%)<br>手机端:'+row.mobile_sale_num+'('+mobileRate+'%) <br>-------------------------------<br>老客:'+row.old_custom_sale_num+'('+oldCustomRate+'%) \' style=\'cursor: pointer;color:blue\' class=\'cellTips\'> 件 </a>'; } ">销售量</th>
注意return的a标签。class=\'cellTips\'
然后数据加载成功后,初始化tooltip
$('#salesDataGrid').datagrid('loadData',data.data); $(".cellTips").tooltip();
当然也可以在datagrid的数据加载完成事件onLoadSuccess中初始化tooltip。所有单元格的tooptip a标签用同一个class。