让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了。

效果图如下：