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="400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
    　　<tr>
　　　　　　<th data-options="field:'itemid',80,halign:'center',formatter:formatCellTooltip">Item ID</th>
    　　</tr>
    </thead>
 </table>

源码：jquery-easyui-1.3.6.zip    例子是：jquery-easyui-1.3.6demodatagridformatter.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', 80,halign:'center', formatter: function (value) {
                return "<span title='" + value + "'>" + value + "</span>";
            }
            }]]
       });

源码：jquery-easyui-1.3.6.zip 例子是：jquery-easyui-1.3.6demodatagridformatter2.html

其他方式：

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 </span>= (opt.content || $(target).attr(<span style="color: #800000;">"</span><span style="color: #800000;">tooltip</span><span style="color: #800000;">"</span><span style="color: #000000;">));
    tips.appendTo(</span><span style="color: #800000;">"</span><span style="color: #800000;">body</span><span style="color: #800000;">"</span><span style="color: #000000;">);

    $(target).css(</span><span style="color: #800000;">"</span><span style="color: #800000;">color</span><span style="color: #800000;">"</span><span style="color: #000000;">, opt.wrapColor);

    $(target).hover(function () {
        tips.html(opt.content);
        </span><span style="color: #0000ff;">var</span> offset =<span style="color: #000000;"> $(target).offset();
        </span><span style="color: #008000;">//</span><span style="color: #008000;">var outerWidth = tips.outerWidth();
        </span><span style="color: #008000;">//</span><span style="color: #008000;">            if (outerWidth &gt; 200) {
        </span><span style="color: #008000;">//</span><span style="color: #008000;">                tips.width(200);
        </span><span style="color: #008000;">//</span><span style="color: #008000;">            }</span>
        <span style="color: #0000ff;">var</span> scrollTop =<span style="color: #000000;"> $(document).scrollTop();
        </span><span style="color: #0000ff;">var</span> tipsHeight =<span style="color: #000000;"> tips.outerHeight();
        </span><span style="color: #0000ff;">var</span> outerWidth =<span style="color: #000000;"> tips.outerWidth();

        </span><span style="color: #0000ff;">var</span> targetHeight =<span style="color: #000000;"> $(target).outerHeight();
        </span><span style="color: #0000ff;">var</span> top = offset.top -<span style="color: #000000;"> tipsHeight;
        </span><span style="color: #0000ff;">var</span> left =<span style="color: #000000;"> offset.left;

        </span><span style="color: #0000ff;">if</span> ((offset.top - scrollTop) &lt; top || top &lt; <span style="color: #800080;">100</span><span style="color: #000000;">) {
            top </span>= offset.top +<span style="color: #000000;"> targetHeight;
        }
        </span><span style="color: #0000ff;">var</span> bodyClienWidth = $(<span style="color: #800000;">"</span><span style="color: #800000;">body</span><span style="color: #800000;">"</span>)[<span style="color: #800080;">0</span><span style="color: #000000;">].clientWidth;
        </span><span style="color: #0000ff;">if</span> ((bodyClienWidth - left) &lt;<span style="color: #000000;"> outerWidth) {
            left </span>= bodyClienWidth -<span style="color: #000000;"> outerWidth;
        }
        tips.css({ top: top, left: left }).show();
    }, function () {
        tips.hide().width(</span><span style="color: #800000;">"</span><span style="color: #800000;">auto</span><span style="color: #800000;">"</span><span style="color: #000000;">);
    });
}

$.fn.tips </span>= function (options, <span style="color: #0000ff;">params</span><span style="color: #000000;">) {
    </span><span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">typeof</span> options === <span style="color: #800000;">'</span><span style="color: #800000;">string</span><span style="color: #800000;">'</span><span style="color: #000000;">) {
        </span><span style="color: #0000ff;">return</span> $(<span style="color: #0000ff;">this</span>).tips.methods[options].call(<span style="color: #0000ff;">this</span>, <span style="color: #0000ff;">params</span><span style="color: #000000;">);
    }

    options </span>= options ||<span style="color: #000000;"> {};
    </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span><span style="color: #000000;">.each(function () {
        </span><span style="color: #0000ff;">var</span> opt = $.data(<span style="color: #0000ff;">this</span>, <span style="color: #800000;">"</span><span style="color: #800000;">tips</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (opt) {
            $.extend(opt.options, options);
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            $.data(</span><span style="color: #0000ff;">this</span>, <span style="color: #800000;">"</span><span style="color: #800000;">tips</span><span style="color: #800000;">"</span><span style="color: #000000;">, {
                options: $.extend({}, $.fn.tips.defaults, options)
            });
            init(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
        }
    });
};

$.fn.tips.defaults </span>=<span style="color: #000000;"> {
    cls: </span><span style="color: #800000;">""</span><span style="color: #000000;">,
    content: </span><span style="color: #0000ff;">null</span><span style="color: #000000;">,
    wrapColor: </span><span style="color: #800000;">"</span><span style="color: #800000;">blue</span><span style="color: #800000;">"</span><span style="color: #000000;">
};

</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> ($.parser) {
    $.parser.plugins.push(</span><span style="color: #800000;">'</span><span style="color: #800000;">tips</span><span style="color: #800000;">'</span><span style="color: #000000;">)
}

})(jQuery);

使用:

在jquery 的datagrid的onLoadSuccess方法中

html:

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

js :

$(function () {
            var _grid = $('#dg').datagrid({
                url: 'products.json',
                columns: [[
            { field: 'productid', title: 'productid',  100 },
            { field: 'productname', title: 'productname',  100 },
            { field: 'price', title: 'Price',  100, align: 'right' }
            ]],
                onLoadSuccess: function () {
                </span><span style="color: #0000ff;">var</span> tableTd = $(<span style="color: #800000;">'</span><span style="color: #800000;">div.datagrid-body td[field="productname"]</span><span style="color: #800000;">'</span>); <span style="color: #008000;">//</span><span style="color: #008000;"><span style="color: #800000;">productname</span>是列名</span>

                    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-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.6demodatagrid	ips.html

2.当然还有各种jQuery tips插件