easyUI 鼠标悬浮 和截取

			field: 'tf_info',
			width: '850px',
			title: '日志信息',
			formatter:function(value){
				return "<span title='"+ value +"'>" + value.substr(0, 12) +"</span>";
			}

第一种方式：
1.js 定义函数
  <script type="text/javascript">   
        //格式化单元格提示信息  
        function formatCellTooltip(value){  
            return "<span title='" + value + "'>" + value + "</span>";  
        }  
  </script>  

2、调用函数
 <table class="easyui-datagrid" style="width:400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
    　　<tr>
　　　　　　<th data-options="field:'itemid',width:80,halign:'center',formatter:formatCellTooltip">Item ID</th>
    　　</tr>
    </thead>
 </table>

1.3.6\demo\datagrid\formatter.html

 第二种方式：
1.html
<table id="dg">
</table>

2.js
$('#dg').datagrid({
            fitColumns: true,
            nowrap: true,
            striped: true,
            rownumbers: true,
            pagination: true,
            singleSelect: true,
            columns: [[
            { field: "itemid", title: 'Item ID', width:80,halign:'center', formatter: function (value) {
                return "<span title='" + value + "'>" + value + "</span>";
            }
            }]]
       });
1.例如，扩展 jQuery EasyUI tips
复制代码
js 文件 Jquery.easyui.tooltip.js：

(function ($) {
    function init(target) {
        var opt = $.data(target, "tips").options;
        var tips = $(".easyui-tips-hover");
        if (tips.length == 0) {
            tips = $("<div/>").css({
                "position": "absolute",
                "border-radius": "5px",
                "-webkit-border-radius": "5px",
                "-moz-border-radius": "5px",
                "padding": "5px",
                "background": "#fff",
                "display": "none",
                "border": "1px solid gray"
            }).hide().addClass("easyui-tips-hover").addClass(opt.cls);
        }

        opt.content = (opt.content || $(target).attr("tooltip"));
        tips.appendTo("body");

        $(target).css("color", opt.wrapColor);

        $(target).hover(function () {
            tips.html(opt.content);
            var offset = $(target).offset();
            //var outerWidth = tips.outerWidth();
            //            if (outerWidth > 200) {
            //                tips.width(200);
            //            }
            var scrollTop = $(document).scrollTop();
            var tipsHeight = tips.outerHeight();
            var outerWidth = tips.outerWidth();

            var targetHeight = $(target).outerHeight();
            var top = offset.top - tipsHeight;
            var left = offset.left;

            if ((offset.top - scrollTop) < top || top < 100) {
                top = offset.top + targetHeight;
            }
            var bodyClienWidth = $("body")[0].clientWidth;
            if ((bodyClienWidth - left) < outerWidth) {
                left = bodyClienWidth - outerWidth;
            }
            tips.css({ top: top, left: left }).show();
        }, function () {
            tips.hide().width("auto");
        });
    }
    $.fn.tips = function (options, params) {
        if (typeof options === 'string') {
            return $(this).tips.methods[options].call(this, params);
        }

        options = options || {};
        return this.each(function () {
            var opt = $.data(this, "tips");
            if (opt) {
                $.extend(opt.options, options);
            } else {
                $.data(this, "tips", {
                    options: $.extend({}, $.fn.tips.defaults, options)
                });
                init(this);
            }
        });
    };
    $.fn.tips.defaults = {
        cls: "",
        content: null,
        wrapColor: "blue"
    };

    if ($.parser) {
        $.parser.plugins.push('tips')
    }
})(jQuery);
复制代码
使用:

在jquery 的datagrid的onLoadSuccess方法中

html:

<table id="dg"></table>
js :
复制代码
$(function () {
            var _grid = $('#dg').datagrid({
                url: 'products.json',
                columns: [[
            { field: 'productid', title: 'productid', width: 100 },
            { field: 'productname', title: 'productname', width: 100 },
            { field: 'price', title: 'Price', width: 100, align: 'right' }
            ]],
                onLoadSuccess: function () {
                  var tableTd = $('div.datagrid-body td[field="productname"]'); //productname是列名
                tableTd.each(function () {
                        var $this = $(this);
                        var index = $this.parent('tr').attr('datagrid-row-index');
                        var rows = _grid.datagrid('getRows');
                        var currentRow = rows[index];
                        var content = '<div style=" max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.productname + '</div>'; //productname是列名
                        $this.tips({ content: content, wrapColor: 'black' });
                    });
                }
            });
        });

function findAllPreven() {
    var infoname = $('#area').val();   
    areadatagrid=$('#dg').datagrid({   
        rowStyler : function(index, row) {
            if (row.state == "0") {
                return 'color:red';
            } else if (row.state == "1") {
                return 'color:green';
            }
        },
        url : '连接地址',
        fit : true,
        nowrap : true,
        fitColumns : true,
        idField : 'id',
        pagination : true,
        pageSize : 15,
        pageList : [ 15, 25, 35, 45 ],
        rownumbers : true,
        sortName : 'id',
        sortOrder : "desc",
        toolbar: '#tb',  
        checkOnSelect : true,
        ctrlSelect:true,
        remoteSort : false,
        title:"数据列表",
        queryParams : {
            area : infoname,           
        },
        columns : [ [ {
            field : 'id',
            title : '选择',
            width : 100,
            align : 'center',
            sortable : true,
            checkbox : true,
             
        }
        ,{
            field : 'source',
            title : '信息来源',
            width : 100,
            align : 'center',
            sortable : true,
            formatter:cellRowMark //悬浮
        }  
        {
            field : 'state',
            title : '状态',
            width : 100,
            align : 'center',
            sortable : true,
            formatter:function(value,row,index){
                if(value==0){
                    return "<span style='color:red'>未处理</span>";
                }else if(value==1){
                    return "<span style='color:green'>已处理</span>";
                }
                else if(value==2){
                    return "<span style='color:black'>初处理</span>";
                }
            }
        }
        ] ],
        onLoadSuccess:function(){createTooltip();}, //初始化悬浮方法
        onDblClickCell:function(rowIndex, field, value){
            if(field=="source")
            {
                if(value=="")return;
                 
            }
            else
            {
                var rowData=$('#dg').datagrid('getRows')[rowIndex];     
            }
        }
    });
}
//单元格
function cellRowMark(value,row,index){
    return '<span getInfo='+index+' class="easyui-tooltip">' + value + '</span>'; 
}
//创建悬浮方法
function createTooltip(){ 
    $('#dataGrid【表格名称】').datagrid('getPanel').find('.easyui-tooltip').each(function(){ 
        var index = parseInt($(this).attr('getInfo')); 
        $(this).tooltip({ 
            content: $('<div>双击该单元格显示人员信息<br/>双击其他单元格显示预警信息</div>'),           
            position:'right' 
        }); 
    }); 
}