让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了。
效果图如下:

让easyui datagrid支持bootstrap的tooltip的更多相关文章

  1. easyui datagrid列中使用tooltip

    要实现这样一个效果:数据加载到DATAGRID中,鼠标移至某一列时,会弹出tooltip提示框. 最初的实现方法: { field: 'Reply', title: '备注', width: 220, ...

  2. EasyUI datagrid优化

    easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  4. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  5. VS2012 easyui datagrid url访问之坑

    VS2012 easyui datagrid url访问之坑 url属性放的是地址的话 返回的json格式必须有 total 和 rows,如下: {"total":2," ...

  6. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  7. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  8. validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    validate[.unobtrusive]和Bootstrap实现tooltip错误提示 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效 ...

  9. Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

随机推荐

  1. 移动web资源整理

    [原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...

  2. PHP用户注册与登录【1】

    需求分析 主要功能分为 用户注册.用户登录.用户退出.用户中心 四个部分. 用户注册 用户注册主要功能有: 注册信息表单填写界面 javascript 脚本初步检测用户输入的注册信息. 注册处理模块检 ...

  3. 第三周作业(三):wc程序

    本程序实现了统计文本档案中,文本单词数.字符数以及行数. 代码如下: #include<stdio.h> #include<stdlib.h> int linestatisti ...

  4. 第三周作业(一):安装VS以及创建单元测试

    安装的时候找的是最新版本的VS2015,因为不想花钱也不想用破解版,所以用社区版本. 下了一个IOS文件,社区版VS2015,个人免费版,强行表示不用盗版来表现自己高尚的情操:D 放入虚拟光驱软件后, ...

  5. (转)windows系统下Python环境的搭建

    原博文地址:http://www.cnblogs.com/windinsky/archive/2012/09/20/2695520.html 这段时间在做python,觉得这个配置环境的帖子还不错,分 ...

  6. python方法中的self

    前几天在写一个c作业时,突发奇想,在结构体中加入函数指针, 像这样: struct People { int _age; int (*age)(); }people; 这样调用时就可以 people. ...

  7. java学习中的一些疑惑解答

    一.java中的枚举类型: 在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.例如星期一到星期日七个数据元素 ...

  8. properties文件使用{0}...

    例如properties文件的配置 weixin.token.url=https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credent ...

  9. ES6(五) 数组扩展

    Array.of方法用于将一组值,转换为数组.  Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...

  10. WPF整理-Style

    "Consistency in a user interface is an important trait; there are many facets of consistency,   ...