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文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
随机推荐
- Alpha冲刺——总结篇
课程信息 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺 团队目标 切实可行的计算机协会维修预约平台 团队信息 队员学号 队员姓名 个人博客地址 备注 22 ...
- 【java】获取客户端访问的公网ip和归属地
import com.alibaba.druid.support.json.JSONUtils; import org.thymeleaf.util.StringUtils; import javax ...
- 如何申请腾讯地图用户Key
打开网页https://lbs.qq.com/,进入腾讯位置服务. 单击[登录],登录腾讯账号(本文以QQ登录为例),如果首次登陆腾讯位置服务,则提示注册开发者账号. 选择箭头处[注册新账号].填写手 ...
- Lodash之throttle(节流)与debounce(防抖)总结
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11305028.html 先重点说一下可能遇到的坑:主要在原本默认参数的设置以及两个方法的选择上, ...
- FusionInsight大数据开发---MapReduce与YARN应用开发
MapReduce MapReduce的基本定义及过程 搭建开发环境 代码实例及运行程序 MapReduce开发接口介绍 1. MapReduce的基本定义及过程 MapReduce是面向大数据并行处 ...
- FRP represents an intersection of two programming paradigms.
FRP represents an intersection of two programming paradigms. Functional programming Functional progr ...
- TeamViewer14试用版到期-怎么解决
Teamviewer14提示试用期已到期怎么办? 问题分析: 出现这种问题,是因为在安装是选择了[公司/商务用途]或者[以上都是]这两个选项中的一个 解决方法: 1.退出TeamViewer远程软件, ...
- ELK学习笔记之Kibana权限控制和集群监控
详细请参考如下四篇博客,注意ELK6中移除了Xpack的默认账户和密码,需要手动设置 Kibana安全特性之权限控制 ELK 集群 Kibana 使用 X-Pack 权限控制,监控集群状态,警报,监视 ...
- EF Core 迁移整理
创建迁移 PowerShell Add-Migration InitialCreate 多数据源 Add-Migration InitialCreate -Context MyDbContext -O ...
- “分而治之”,一种AI和动画系统的架构
译者注:随着国内游戏研发水平的不断提高,对画面品质的不断提升,同时大量手游使用Unity和Unreal 4等成熟的工具开发,动作状态机已经不是什么陌生的概念了.我们在项目开发时也大量使用了动作状态机. ...