发表于 下午 1:53 by & 分类 .
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("
2 | cc.push("<div style=\""+_607+"\" |
3 | data-toggle=\"tooltip\" data-original-title=\""+_605+"\""); |
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 () { |
OK,完成了。只需要在datagrid加载后调用showCellTip方法就OK了。效果图如下: