让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip
发表于 下午 1:53 by ylpro.net & 分类 Java.
因此,首先需要导入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列中使用tooltip
要实现这样一个效果:数据加载到DATAGRID中,鼠标移至某一列时,会弹出tooltip提示框. 最初的实现方法: { field: 'Reply', title: '备注', width: 220, ...
- EasyUI datagrid优化
easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- VS2012 easyui datagrid url访问之坑
VS2012 easyui datagrid url访问之坑 url属性放的是地址的话 返回的json格式必须有 total 和 rows,如下: {"total":2," ...
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- validate[.unobtrusive]和Bootstrap实现tooltip错误提示
validate[.unobtrusive]和Bootstrap实现tooltip错误提示 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效 ...
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...
随机推荐
- 移动web资源整理
[原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...
- PHP用户注册与登录【1】
需求分析 主要功能分为 用户注册.用户登录.用户退出.用户中心 四个部分. 用户注册 用户注册主要功能有: 注册信息表单填写界面 javascript 脚本初步检测用户输入的注册信息. 注册处理模块检 ...
- 第三周作业(三):wc程序
本程序实现了统计文本档案中,文本单词数.字符数以及行数. 代码如下: #include<stdio.h> #include<stdlib.h> int linestatisti ...
- 第三周作业(一):安装VS以及创建单元测试
安装的时候找的是最新版本的VS2015,因为不想花钱也不想用破解版,所以用社区版本. 下了一个IOS文件,社区版VS2015,个人免费版,强行表示不用盗版来表现自己高尚的情操:D 放入虚拟光驱软件后, ...
- (转)windows系统下Python环境的搭建
原博文地址:http://www.cnblogs.com/windinsky/archive/2012/09/20/2695520.html 这段时间在做python,觉得这个配置环境的帖子还不错,分 ...
- python方法中的self
前几天在写一个c作业时,突发奇想,在结构体中加入函数指针, 像这样: struct People { int _age; int (*age)(); }people; 这样调用时就可以 people. ...
- java学习中的一些疑惑解答
一.java中的枚举类型: 在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.例如星期一到星期日七个数据元素 ...
- properties文件使用{0}...
例如properties文件的配置 weixin.token.url=https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credent ...
- ES6(五) 数组扩展
Array.of方法用于将一组值,转换为数组. Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...
- WPF整理-Style
"Consistency in a user interface is an important trait; there are many facets of consistency, ...