datagrid使用和文字超出tip提示

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‘);
        });
    }
});
时间: 2024-10-28 23:34:20

datagrid使用和文字超出tip提示的相关文章

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli

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

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行

设置一个DIV的文字超出隐藏,并用省略号表示未完待续

<div style="width:50px;height:18px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续</div>

【转】html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{     display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : cli

div中文字超出时自动换行

    在开发中很容易遇到div中文字超出的问题,在此总结以下方法: white-space 属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支持 white-space 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowrap

文字超出隐藏 且后面变成点

实例: <p>文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点</p> css解决方法 1.常规css方法——可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示  现在在火狐的高版本也支持了(火狐低版本不支持) p{width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 注

文字超出自动截取为...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字超出自动截取为...</title> </head> <body> <style> *{ margin:0; padding:0; } body{font-family:Arial, Helvetica, sans-serif;} h2,em{ font-w

文字超出隐藏并显示省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法 一是用程序开截取字符长度,这个其实也是可以的 第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧, css样式如下: .css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2 { overflow: hidden; /

css 文字超出用省略号显示

在一行文字超出用省略号显示我们经常会使用如下方法 display:block; width:100px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 但要求两行及以上时,我们需要换另一种方法,代码如下 display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 此时要求父级的宽度是确定的,如