基于1.3.3版本tooltip的datagrid单元格tip实现
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也不咋的,但是终归也是官方出品,同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:
实现代码
- $.extend($.fn.datagrid.methods, {
- /**
- * 开打提示功能
- * @param {} jq
- * @param {} params 提示消息框的样式
- * @return {}
- */
- doCellTip:function (jq, params) {
- function showTip(showParams, td, e, dg) {
- //无文本,不提示。
- if ($(td).text() == "") return;
- params = params || {};
- var options = dg.data('datagrid');
- showParams.content = '<div class="tipcontent">' + showParams.content + '</div>';
- $(td).tooltip({
- content:showParams.content,
- trackMouse:true,
- position:params.position,
- onHide:function () {
- $(this).tooltip('destroy');
- },
- onShow:function () {
- var tip = $(this).tooltip('tip');
- if(showParams.tipStyler){
- tip.css(showParams.tipStyler);
- }
- if(showParams.contentStyler){
- tip.find('div.tipcontent').css(showParams.contentStyler);
- }
- }
- }).tooltip('show');
- };
- return jq.each(function () {
- var grid = $(this);
- var options = $(this).data('datagrid');
- if (!options.tooltip) {
- var panel = grid.datagrid('getPanel').panel('panel');
- panel.find('.datagrid-body').each(function () {
- var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
- $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td[field]', {
- 'mouseover':function (e) {
- //if($(this).attr('field')===undefined) return;
- var that = this;
- var setField = null;
- if(params.specialShowFields && params.specialShowFields.sort){
- for(var i=0; i<params.specialShowFields.length; i++){
- if(params.specialShowFields[i].field == $(this).attr('field')){
- setField = params.specialShowFields[i];
- }
- }
- }
- if(setField==null){
- options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');
- var factContentWidth = options.factContent.width();
- params.content = $(this).text();
- if (params.onlyShowInterrupt) {
- if (factContentWidth > $(this).width()) {
- showTip(params, this, e, grid);
- }
- } else {
- showTip(params, this, e, grid);
- }
- }else{
- panel.find('.datagrid-body').each(function(){
- var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');
- trs.each(function(){
- var td = $(this).find('> td[field="' + setField.showField + '"]');
- if(td.length){
- params.content = td.text();
- }
- });
- });
- showTip(params, this, e, grid);
- }
- },
- 'mouseout':function (e) {
- if (options.factContent) {
- options.factContent.remove();
- options.factContent = null;
- }
- }
- });
- });
- }
- });
- },
- /**
- * 关闭消息提示功能
- * @param {} jq
- * @return {}
- */
- cancelCellTip:function (jq) {
- return jq.each(function () {
- var data = $(this).data('datagrid');
- if (data.factContent) {
- data.factContent.remove();
- data.factContent = null;
- }
- var panel = $(this).datagrid('getPanel').panel('panel');
- panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
- });
- }
- });
入参列表
doCellTip方法的参数包含以下属性:
名称 | 参数类型 | 描述以及默认值 |
---|---|---|
onlyShowInterrupt | string | 是否只有在文字被截断时才显示tip,默认值为false,即所有单元格都显示tip。 |
specialShowFields | Array | 需要特殊定义显示的列,比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入:[{field:'name',showField:'standName'}]。 |
position | string | tip的位置,可以为top,botom,right,left。 |
tipStyler | object | tip内容的样式,注意要符合jquery css函数的要求。 |
contentStyler | object | 整个tip的样式,注意要符合jquery css函数的要求。 |
使用示例
- $('#dg').datagrid('doCellTip',
- {
- onlyShowInterrupt:false,
- position:'bottom',
- tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'},
- contentStyler:{backgroundColor:'#333', paddingLeft:'5px'}
- });
效果演示
http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html
基于1.3.3版本tooltip的datagrid单元格tip实现的更多相关文章
- datagrid单元格格式化样式化
本文体验datagrid单元格的格式化和样式化. datagrid显示的DOM结构 <td field="code"> <div style="te ...
- WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决
原文:WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决 如下图,在凭证编辑窗体中,有的单元格不需要数字,但如果录入数字后再删除,会触发数字验证,单元格显示红色框线,导致不能执行 ...
- 为EasyUI的dataGrid单元格增加鼠标移入移出事件
onLoadSuccess: function (data) { $(".datagrid-row").mouseover(function (e) { var text = $( ...
- WPF中修改DataGrid单元格值并保存
编辑DataGrid中的单元格的内容然后保存是非常常用的功能.主要涉及到的方法就是DataGrid的CellEditEnding 和BeginningEdit .其中BeginningEdit 是当 ...
- EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本
nowrap : true; 是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...
- WPF学习笔记(1):DataGrid单元格实现逐键过滤功能
最近,开始学习WPF,其UI设计完全颠覆了传统的设计理念,为程序员提供了极大的自由发挥空间,让我为之惊叹,且为之着迷.然而,WPF在国内的热度却并不高,大部分贴子都是2012年以前的,出版的图书也很少 ...
- easyui datagrid 单元格编辑(cell editing)
demo中有row editing 项目中发现个cell editing,但是有bug,修改好了 主要实现功能:单击数据表格单元格,编辑单元格数据 js代码如下: $.extend($.fn.data ...
- 关于C# wpf DataGrid单元格双击设置单元格内容
1.我是使用了 visual stadio 2015, 用的C# WPF写个工具,但是发现wpf原生没有涉及表格的东西(类似 winform·的DataGridView),所以使用的是toolkit工 ...
- EasyUI Datagrid 单元格编辑
3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...
随机推荐
- 尽量用goto代替尾递归
void PrintList(List L) { if(L!=Null) { PrintElement(L->Element); PrintLisr(L->Next); } } 所谓尾递归 ...
- 【C++设计模式】单件类与DCLP(Double Check Lock Pattern)的风险
[单件类] 保证只能有一个实例化对象,并提供全局的访问入口. [设计注意事项] 1.阻止所有实例化的方法: private 修饰构造函数,赋值构造函数,赋值拷贝函数. 2.定义单实例化对象的方法: a ...
- Ubuntu安装Wildfly(原JBoss)并为其配置MySQL分布式数据源
注:JBoss在8.0版本后改名为WildFly,以JBoss命名的版本最高为7.1.1.Final,但JBoss7.1.1.Final不支持jdk1.8以上版本,如果在jdk1.8情况下安装JBos ...
- 迎战Meta 2,微软新专利有望解决Hololens视场角野窄问题
上周,微软HoloLens的竞争对手AR眼镜Meta 2正式发货,微软是该急了.我们知道Meta 2不仅在价格上比HoloLens便宜,而且在性能上也不弱,Meta2的可视角度达到90度,比HoloL ...
- [ACM训练] 算法初级 之 搜索算法 之 广度优先算法BFS (POJ 3278+1426+3126+3087+3414)
BFS算法与树的层次遍历很像,具有明显的层次性,一般都是使用队列来实现的!!! 常用步骤: 1.设置访问标记int visited[N],要覆盖所有的可能访问数据个数,这里设置成int而不是bool, ...
- 关于H5框架之Bootstrap的小知识
浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...
- div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)
在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...
- Spring Mvc的入门
SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的. Spring Web MVC是什么: Sprin ...
- PMP备考_第六章_项目时间管理
项目时间管理 前言 项目时间管理是项目管理中最难的一个环节,与个人时间管理类似,团体的效率如果管理不当,是低于个人效率的,为了管理好时间,从预估,执行到反馈均需要严格的分析和处理.如果制定的计划是无法 ...
- 递归一题总结(OJ P1117倒牛奶)
题目: 农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数,最初,A和B桶都是空的,而C桶是装满牛奶的.有时,约翰把牛奶从一个桶倒到另 ...