datagrid使用和文字超出tip提示
{onlyShowInterrupt: true,position: 'top',//,//tipStyler: { 'backgroundColor': '#fff000', width: '200px', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' },//,//contentStyler: { backgroundColor: '#333', paddingLeft: '5px' }});
{onlyShowInterrupt: true,position: 'top',//,//tipStyler: { 'backgroundColor': '#fff000', width: '200px', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' },//,//contentStyler: { backgroundColor: '#333', paddingLeft: '5px' }});其中:doCellTip为easyui内部封装,并非页面需要定义一个id=doCellTip的标签
其他解说查看网站:http://www.zi-han.net/case/easyui/datagrid&tree.html
使用以上代码需要引用js文件datagridTip.js
<script type="text/javascript" src="@Url.Content("~/js/datagridTip.js")"></script>代码如下:
$.extend($.fn.datagrid.methods, {
/**
* 开打提示功能 by xiaoyu
* @param {} jq
* @param {} params 提示消息框的样式
* @return {}
*/
doCellTip: function (jq, params) {
function showTip(showParams, td, e, dg) {
//无文本,不提示。
if ($(td).text() == "") return; params = params || {};
// $(".tipcontent").show(); 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.content.length > 100) {
tip.css({width:'600px'});
}
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;
// $(".tipcontent").hide();
$(".tooltip.tooltip-top").hide();
// $(".tooltip-arrow-outer").hide();
$(".tooltip-arrow").hide();
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').hide();
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);
}
},
'mouseup': function(e) {
if (options.factContent) {
options.factContent.remove();
options.factContent = null; }
},
'mouseout': function(e) {
if (options.factContent) {
options.factContent.remove();
options.factContent = null; }
},
'mousemove': function(e) {
if (options.factContent) {
options.factContent.remove();
options.factContent = null; }
}
});
});
} else {
if (options.factContent) {
options.factContent.remove();
options.factContent = "";
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').undelegate('td', 'mouseup');
});
}
});
datagrid使用和文字超出tip提示的更多相关文章
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- [js开源组件开发]tip提示组件
tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...
- div文字超出
效果一:div文字超出处理 <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:elli ...
- bootstrap3.0 模态框显示的文字超出怎么办
版本:bootstrap3.3 模态框文字超出 解决方案: 在html中控制自动换行 其实只要在表格控制中添加一句<div style="word-break:break-all& ...
- 文字超出DIV后,隐藏文字并显示...
<html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- easyui combobox下拉框文字超出宽度有横向滚轮
//下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...
- CSS 之 div中文字超出时自动换行
在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
随机推荐
- sql 从服务器取消主从复制
mysql>change master to master_host='' mysql>stop slave;reset slave;
- 基础数据结构 对应 基础api
<深入理解Redis> mastering redis
- SQL-W3School-函数:SQL LEN() 函数
ylbtech-SQL-W3School-函数:SQL LEN() 函数 1.返回顶部 1. LEN() 函数 LEN 函数返回文本字段中值的长度. SQL LEN() 语法 SELECT LEN(c ...
- 005-多线程-集合-Map-ConcurrentSkipListMap
一.概述 ConcurrentSkipListMap是线程安全的有序的哈希表,适用于高并发的场景. ConcurrentSkipListMap和TreeMap,它们虽然都是有序的哈希表.但是,第一,它 ...
- 丢失libiconv-2.dll解决办法以及无法定位输入点libiconv-2.dll到动态链接库
摘自https://blog.csdn.net/mengxiangjia_linxi/article/details/78147348 丢失libiconv-2.dll解决办法以及无法定位输入点lib ...
- JSONP实现Ajax跨域请求
前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
- matlab学习——02整数规划(蒙特卡洛法,指派问题,混合整数规划)
02整数规划 蒙特卡洛法(随机取样法) 编写文件mengte.m,目标函数f和约束向量g function[f,g]=mengte(x); f=x(1)^2+x(2)^2+3*x(3)^2+4*x(4 ...
- MySQL安装时出现Apply Security Settings错误的解决办法(转)
最近在学习MySQL时,下载了MySQL5.5版本的安装包,在配置向导的最后的页面却出现了Apply Security Settings的错误.第一次安装时比较顺利,中途卸载了一下,结果第二次安装的时 ...
- HTTP中的请求头和响应头属性解析
HTTP中的请求头和响应头属性解析 下面总结一下平时web开发中,HTTP请求的相关过程以及重要的参数意义 一次完整的HTTP请求所经历的7个步骤 说明:HTTP通信机制是在一次完整的HTTP通信过程 ...
- 一种可以避免数据迁移的分库分表scale-out扩容模式
转自: http://jm.taobao.org/ 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星 ...