datagrid 文本溢出时候 鼠标经过出现提示信息tooltip
1只有文本溢出的单元格鼠标经过才显示提示信息
$('.datagrid-cell').mouseover(function () {
if (this.offsetWidth < this.scrollWidth) {
var content = $(this).text();
$(this).tooltip({
content: content,
trackMouse: true,
onHide: function () {
$(this).tooltip('destroy');
}
}).tooltip('show');
}
});
//一下是绑定事件位置
Easyui.$myview = $.extend({}, $.fn.datagrid.defaults.view, {
onAfterRender: function (target) {
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
var opts = $(target).datagrid('options');
var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
vc.children('div.datagrid-empty').remove();
if (!$(target).datagrid('getRows').length) {
var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
d.css({
position: 'absolute',
left: 0,
top: 50,
width: '100%',
textAlign: 'center'
});
}
$(target).datagrid("fixRownumber");//自适应rownumber
$('.datagrid-cell').mouseover(function () {
//判断文本是否溢出
if (this.offsetWidth < this.scrollWidth) {
var content = $(this).text();
$(this).tooltip({
content: content,
trackMouse: true,
onHide: function () {
$(this).tooltip('destroy');
}
}).tooltip('show');
}
});
}
});
Easyui.datagrid = function (/*object*/options) {
var $dg = $('#' + options.datagridId);
var _options = $.extend({
loadMsg: '数据加载中,请稍后……',
method: 'post',
pageList: [15, 20, 30, 50],
pageSize: 50,
toolbar: '#dg_toorbar',
fit: true,
pagination: true,
border: false,
rownumbers: true,
striped: true,
view: Easyui.$myview,
singleSelect: true,
fitColumns: true,
emptyMsg: '未找到符合条件的数据',
cache: false
}, options);
if (options.formId && $(options.formId).form('validate')) {
_options.queryParams = $(options.formId).form('serialize');
}
$dg.datagrid(_options);
};
datagrid 文本溢出时候 鼠标经过出现提示信息tooltip的更多相关文章
- CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)
当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...
- 文本溢出text-overflow和文本阴影text-shadow
前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...
- 设置text-overflow文本溢出隐藏时的对齐问题
设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧. <p> <span ...
- 浅谈文本溢出省略号代表修剪text-overflow
一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性. 示例 ...
- 文本溢出text-overflow
文本溢出text-overflow 问题:有一个新闻标题,标题宽度为200px,文字为宋体,加粗,文字大小为16px,颜色为黑色,行高为25px,要求单行显示,并且超出时显示“…”,请按要求完成效果. ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
随机推荐
- Python 3.X 练习集100题 05
用 *号输出字母 C的图案 方法1: print(" ***** ") print(" ** * ") print(" ** ") prin ...
- Semaphore源码分析
public class SemaphoreExample1 { ; public static void main(String[] args) throws Exception { Executo ...
- [原创] C#编程规范工具介绍
1.目标 代码编写规范.整齐.整洁.可读. 无错误 无警告 2.排版 安装PowerCommands扩展 “工具”-“扩展管理库”,搜索安装. 设置选中Format document on save和 ...
- HTML5微信长按图片不会弹出菜单的解决方法
HTML5微信长按图片不会弹出菜单的解决方法 <pre><div ontouchstart = "return false;"></div>&l ...
- scrapy中间件中发送邮件
背景介绍:之前写过通过通过scrapy的扩展发送邮件,在爬虫关闭的时候发送邮件.那个时候有个问题就是MailSender对象需要return出去.这次需要在中间件中发送邮件,但是中间件中不能随便使用r ...
- linux -------- 使用xshell ,winscp 连接linux 以及一些问题解决
1. 安装主要就是默认确定 2.连接VM上的centos 系统 设置连接模式 3.通过 ping 虚拟机上的linux系统的IP地址 4.使用xshell 进行连接 5.输入linux 的用户名和密码 ...
- C 编程环境搭建 Window 篇
前言 - 简介 我们在写代码的过程中, 不可避免的重度依赖所处的开发环境. 本文重点带大家在 Window 搭建 C 简单控制台项目. 当作存档, 用于记录项目搭建各种重复操作. 在详细过程之前, ...
- SQL分类之DML:增删改表中的数据
DML:增删改表中的数据 1.添加数据: 语法: insert into 表名(列名1,列名2,...列名n) values(值1,值2,...值n): 注意: 1.列名和值要一一对应. 2.如果表名 ...
- DispatcherServlet 是 spring 网络模块的核心
https://cn.bing.com/images/search?q=DispatcherServlet+&FORM=HDRSC2
- 一张图看懂SharpBarcode
通过下面的图片,可以瞬间看懂整个SharpBarcode类库的脉络.