datagrid.celltips.js
/**
* Created with JetBrains WebStorm.
* User: cao.guanghui
* Date: 13-6-26
* Time: 下午11:27
* To change this template use File | Settings | File Templates.
*/
$.extend($.fn.datagrid.methods, {
/**
* 开打提示功能(基于1.3.3+版本)
* @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');
var styler = 'style="';
if(showParams.width){
styler = styler + "width:" + showParams.width + ";";
}
if(showParams.maxWidth){
styler = styler + "max-width:" + showParams.maxWidth + ";";
}
if(showParams.minWidth){
styler = styler + "min-width:" + showParams.minWidth + ";";
}
styler = styler + '"';
showParams.content = '<div class="tipcontent" ' + styler + '>' + 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;
}
}
});
});
}
});
},
/**
* 关闭消息提示功能(基于1.3.3版本)
* @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')
});
}
});
datagrid.celltips.js的更多相关文章
- easyui的datagrid用js插入数据等编辑功能的实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- datagrid后台分页js.js
$(function () { gridbind(); bindData(); }); //表格绑定function gridbind() { $('#dg').datagrid({ title: ' ...
- datagrid后台分页js
$(function () { gridbind(); bindData(); }); //表格绑定function gridbind() { $('#dg').datagrid({ title: ' ...
- DevExtreme学习笔记(一) DataGrid中js分析
1.overviewjs采用 $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type ...
- 基于1.3.3版本tooltip的datagrid单元格tip实现
基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...
- RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单
在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...
- easyloader.js源代码分析
http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...
- easyui datagrid使用
http://www.cnblogs.com/zgqys1980/archive/2011/01/04/1925775.html 加载相关js和css,因为easyui依赖jquery,所有加载eas ...
- easyui datagrid使用(好)
加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <scrip ...
随机推荐
- 北京SAP-AGS CoE support consultant intern 面试总结
7月4号去大连SAP面试.通过的话直接去北京SAP參加实习(有幸已通过). SAP一直是我理想的公司,大二的时候曾试图參加SAP大连vt项目,当时下了非常大决心,假设通过了就先留在大连,可惜英语群面就 ...
- 创建组件“AxLicenseControl”失败
打开以前的程序,准备来添加一个功能,打开主程序就报错: 我未曾改变过版本,原来是由于破解测试需要,修改了系统时间,时间对不了,ArcGIS的问题,改过来就正常了.
- IOS效率提升工具
在应用开发过程中,有太多繁杂的事务需要开发者认真去解决.如何才能对开发流程进行改善或自动化,从而提高效率?这成为许多开发者共同探讨的命题.有的开发者会别出心裁地想出熟记他们最喜欢使用的文本编辑器的快捷 ...
- Oracle 检索数据
SELECT * | { [ DISTINCT ] column | expression [ alias ] , ... } FROM ta ...
- Vue 源码 基础知识点
1.数据类型判断 const _toString = Object.prototype.toString function toRawType(value) { return _toString.ca ...
- Android应用开发相关下载资源(2014/12/14更新)
官方终于发布了Android Studio正式版,Android Studio将会成为推荐使用的主要Android开发工具. (1)Android SDK (Android SDK主安装包,包含SDK ...
- 关于python 中的 sys.argv 的使用方法
sys.argv是获取在cmd运行python文件的时候输入的命令行参数,呈现的数据结构是列表的格式 1.用pacharm时运行时的结果是: 输出结果: 2.当我在cmd中输入指令 debu ...
- C#:复选框操作类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- Locust分布式负载测试工具入门
忽略元数据末尾 回到原数据开始处 Locust简介 Locust是一个简单易用的分布式负载测试工具,主要用来对网站进行负载压力测试. 以下是github上的仓库地址 https://github.co ...
- 父级和 子集 controller 之间的通讯
在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式 基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通 ...