让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的时候,你 ...
随机推荐
- Daily Scrum Meeting ——SeventhDay(Beta)12.15
一.Daily Scrum Meeting照片 二.Burndown Chart 想做的太多,冲刺仍在继续 三.项目进展(check-in) 1.完成了登录注册剩下的所有界面 2.更改通知详情和活动详 ...
- tomcat的安全配置(禁用http方法,部署多个应用,启用从安全cookie,指定错误页面和显示信息)
配置版本:tomcat6 1,虚拟路径,可以配置多个host在一个tomcat中,docbase是web应用目录,此处在server.xml中添加应用配置,要让server.xml配置生效需要重启to ...
- 一些关于HTML与CSS的总结与实际应用
//学习前端也快一年了,觉得有必要好好总结一下这一年来学过的知识.一些是前辈们的精华,文章最后会讲地址一一放出,若原作者有任何介意,请及时联系我删除. 关于DOCTYPE 1.DOCTYPE的作用是什 ...
- bfrd collector性能排查
1.2.09上昨天timeout在18点23分-22点10分 2.检测2.17网卡流量,sar -f /var/log/sa/sa06 -n DEV,发现这段时间刚好是rxpck/s超过6400. ...
- 解决jquery新加入的元素没有绑定事件问题
在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果 ...
- 【总结】C# Access 数据库 增删查改 的简单步骤
引用集: using System.Data.OleDb; static string exePath = System.Environment.CurrentDirectory;//本程序所 ...
- appium过程中的问题
1.在eclipse中点击Genymotion Virtual Device Manager ,选择虚拟设备,点击start后,无反应. 解决方法:Help/Install New Softwa ...
- docker-compose启动报错,解决方案
[root@cache1 www]# docker-composeTraceback (most recent call last): File "/usr/bin/docker-compo ...
- 日常关键字:定时关机、该任务映像已损坏或已篡改.(0x80041321)、ChaZD生词同步扇贝
我在床上用chinanet网络慢得简直令人发指,12B/S.是的你没有看错,这是我最常看到的网速.但是我最近发现电脑联网开出一个WiFi,在床上用手机上网时,网速会一点提升,可达到1KB/S(⊙﹏⊙) ...
- Python之路Day12--mysql介绍及操作
上节回顾: 1. RabbitMQ a. 平均分发 b. perfetch = 1 c. durable 队列持久化 deliver_mode = 2 消息持久化 d. 1对多广播 exchang ...