function LoadTable(queryData) {
            $("#eventInfoTable").datagrid({
                url: "/Dictionary/GetEventInfoListDo",
                //iconCls: 'icon-ok',
                title: '活动信息',
                height: document.documentElement.clientHeight - 115,
                width: document.documentElement.clientWidth,
                collapsible: true,
                fitColumns: true,
                singleSelect: true,
                autoRowHeight: false,
                pageSize: 20,
                striped: true,
                loadMsg: '正在加载信息...',
                pagination: true,
                rownumbers: true,
                //sortName: 'ID',
                sortOrder: 'asc',
                remoteSort: false,
                queryParams: queryData,
                columns: [[
                 { title: '活动名称', field: 'EventCnname', width: 18, sortable: false },
                 { title: '活动类型', field: 'EventType', width: 20, sortable: false },
               // { title: '活动所属领域', field: 'Fied', width: 40, sortable: false },
                 { title: '活动所含记录', field: 'EventRecord', width: 40, sortable: false },
                 { title: '活动类别', field: 'EventClass', width: 14, sortable: false },
                 { title: '活动频率', field: 'EventFrequency', width: 16, sortable: false },
                 {title:'窗口期',field:'EventWindowPhase',width:20},
                 //{ title: '活动记录', field: 'EventRecord', width: 40, sortable: false },
                // { title: '活动所属部门', field: 'Organize', width: 30, sortable: false },
                 //{ title: '活动所属岗位', field: 'Role', width: 30, sortable: false }
                     { title: '活动描述', field: 'EventRemark', width: 30, sortable: false }
                ]],
                toolbar: [
            { text: '增加', iconCls: 'icon-add', handler: function () { AddEventClick(); } },'-',
            { text: '修改', iconCls: 'icon-edit', handler: function () { EditEventClick(); } },'-',
            { text: '删除', iconCls: 'icon-remove', handler: function () { DeleteEventClick(); } }, '-',
            { text: '刷新', iconCls: 'icon-reload', handler: function () { $('#eventInfoTable').datagrid("reload"); } }, '-']
                             ,
                onLoadSuccess: function (data) {
                    // $(this).datagrid('doCellTip',{'max-width':'300px','delay':500});
                    $(this).datagrid('doCellTip',
    {
        onlyShowInterrupt: true,
        position: 'top',
        //,
        //tipStyler: { 'backgroundColor': '#fff000', width: '200px', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' },
        //,
        //contentStyler: { backgroundColor: '#333', paddingLeft: '5px' }
    });
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
文本超出文本框的主要代码:
 $(this).datagrid('doCellTip',
    {
        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提示的更多相关文章

  1. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  2. [js开源组件开发]tip提示组件

    tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...

  3. div文字超出

    效果一:div文字超出处理 <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:elli ...

  4. bootstrap3.0 模态框显示的文字超出怎么办

    版本:bootstrap3.3 模态框文字超出 解决方案: 在html中控制自动换行   其实只要在表格控制中添加一句<div style="word-break:break-all& ...

  5. 文字超出DIV后,隐藏文字并显示...

    <html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...

  6. td默认文字超出后显示..,点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  7. easyui combobox下拉框文字超出宽度有横向滚轮

    //下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...

  8. CSS 之 div中文字超出时自动换行

          在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...

  9. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

随机推荐

  1. Facebook libra开发者文档- 1 -welcome

    参考https://developers.libra.org/docs/welcome-to-libra 欢迎来到Libra开发者网站!Libra的使命是建立一个简单的全球货币和金融基础设施,为数十亿 ...

  2. python学习:python的常用功能示例2

    1. python 写入txt with open("douban.txt","w") as f: f.write("这是个测试!") fi ...

  3. [转]Postgres-XL 10r1英文文档

    Postgres-XL 是一个完全满足ACID的.开源的.可方便进行水平扩展的.多租户安全的.基于PostgreSQL的数据库解决方案. Postgres-XL 可非常灵活的应用在各类场景中,比如: ...

  4. 【Leetcode_easy】709. To Lower Case

    problem 709. To Lower Case solution1: class Solution { public: string toLowerCase(string str) { stri ...

  5. Python3类和实例之获取对象信息

    当我们拿到一个对象的引用时,如何知道这个对象是什么类型,有哪些方法呢 使用type() 判断对象类型使用type()函数 基本类型都可以用type()判断 <class 'int'> &g ...

  6. Jupter Notebook常用快捷键与常用的魔法命令

    jupter notebook快捷键整理 Part1 1.删除Cell——双击D 2.撤销删除——Z 3.新建Cell——A/B (向上/向下) 4.命令窗口——P 5.运行——Ctrl+Enter ...

  7. Mac brew命令踩坑

    brew是mac上的在线包管理软件,相当于linux apt以及yum包管理工具 1.取消brew的自动更新(https://blog.csdn.net/yf9595/article/details/ ...

  8. ML.Net Model Builder

    ML.Net Model Builder ML.NET技术研究系列1-入门篇   近期团队在研究机器学习,希望通过机器学习实现补丁发布评估,系统异常检测.业务场景归纳一下: 收集整理数据(发布相关的异 ...

  9. web前端三大主流框架的对比

    MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来 ...

  10. java spring事务管理相关

    一般项目结构为: 数据持久层dao     业务层service     控制层controller 事务控制是在业务层service起作用的,所以需要同时对多张表做添加,修改或删除操作时应该在ser ...