EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

EasyUI Datagrid 鼠标悬停显示单元格内容

第一种方式：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>

源码：jquery-easyui-1.3.6.zip    例子是：jquery-easyui-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>";            }            }]]       });源码：jquery-easyui-1.3.6.zip 例子是：jquery-easyui-1.3.6\demo\datagrid\formatter2.html

扩展 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);

<table id="dg"></table>

$(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' });                    });                }            });        });源码：jquery-easyui-1.3.6.zip    例子是：jquery-easyui-1.3.6\demo\datagrid\tips.html