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文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
随机推荐
- Configuration类的@Value属性值为null
今天写的Configuration类的@Value属性值为null @Configuration public class MybatisConfigurer { @Value("${spr ...
- 【07月03日】A股ROE最高排名
个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名 兰州民百(SH600738) - ROE_TTM:86.45% - ...
- Appium+iOS真机环境搭建
安装目录 1.macOS系统 10.12.6 2.xcode 9.0 3.appium Desktop 1.12.1 4.node.js node -v npm 5.cnpm npm insta ...
- python 基础 ---- 文件读写
文件是一种存储在存储存储媒介上的信息或数据 常用的文件类型 文件 的打开关闭 close() 关闭文件 文件的打开路径 绝对路径 : 文件在操作系统中标准的存放路径 相对路径: 与目前引用文件的相对位 ...
- [转] Vue原理解析——自己写个Vue
一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...
- asp.net图片浏览器效果
技术来源于同学会实践 前台设计 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- http的GET方法参数中不能传列表,接收端的key会变
如下 async initTable() { await getHostAttributesForUser({'username': this.username}).then(response =&g ...
- Python 的 12 个学习方式
Python 是世界上最受欢迎的编程语言之一,它受到了全世界各地的开发者和创客的欢迎.大多数 Linux 和 MacOS 计算机都预装了某个版本的 Python,现在甚至一些 Windows 计算机供 ...
- 【方法论】5WHY分析法
一.概述 所谓“5WHY”分析法,又称“5问法”,就是连续反复使用5次“为什么”方式自问,以打破砂锅问到底方式寻找问题的根本原因的方法.“5WHY”不限定必须或只做5次为什么的提问,以找到问题根因为准 ...
- JCEF-tab形式展示浏览器
当我们点击target值为_blank的链接时,JCEF默认以弹出窗口的形式打开新页面,要实现tab栏形式,可参考以下步骤 1.创建一个实现CefLifeSpanHandlerAdapter的类,重写 ...