让easyui datagrid支持bootstrap的tooltip

让easyui datagrid支持bootstrap的tooltip

发表于 下午 1:53 by ylpro.net & 分类 Java.

Easyui在1.3.3版本之前是不支持tooltip的，但是在1.3.3中引入了tooltip。也可以使用自带的tooltip。本文是为解决1.3.3以下版本的tooltip而写，需要使用到bootstrap的js和css
因此，首先需要导入bootstrap的文件。在此不再列代码，仅把easyui中需要修改的地方列出。
目前的需求是，需要为列定义是否需要tooltip；同样，我们也可以在grid中加个开关来支持是否打开tooltip，这就需要扩展并自行调用了。
开始工作：

1、为datagrid的column增加tooltip属性：
搜索var col=$.extend({},在resizable:"boolean"后添加tooltip:"boolean"
2、需要为列的数据增加data-toogle属性以及title：
搜索cc.push("<div style=\""+_607+"\""); 修改为

1	if(col.tooltip)

2	cc.push("<div style=\""+_607+"\"

3	data-toggle=\"tooltip\" data-original-title=\""+_605+"\"");

4

else

5	cc.push("<div style=\""+_607+"\"");

 

3、扩展easyui的datagrid：

01	$.extend($.fn.datagrid.methods, {

02	showCellTip:function(jq){

03	$("div[data-toggle='tooltip']").each(function() {

04	$(this).tooltip({

05	placement:"bottom",//tooltip的显示位置

06	delay:500//显示tooltip的延时时间

07

});

08

});

09

}

10

});

 

OK，完成了。只需要在datagrid加载后调用showCellTip方法就OK了。
效果图如下：