让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("&lt;div style=""+_607+""

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

4
else

5
cc.push("&lt;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了。
效果图如下：