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

效果图如下：

巴特西

让easyui datagrid支持bootstrap的tooltip

让easyui datagrid支持bootstrap的tooltip

最新文章

热门文章