jquery easyui datagrid单元格鼠标移动弹出提示框tooltip的使用方法

jquery | 2019-09-13 10:02:39

界面用的easyui,想datagrid中鼠标移动到单元格中时,弹出提示框展示数据详情。
先看看效果图:

1.png

实现的方法是,在列定义的时候用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。

登录后即可回复 登录 | 注册
    
关注编程学问公众号