easyui Datagrid方法扩展 - tooltip

easyui Datagrid方法扩展 - tooltip

最新版本的jQuery Easyui新出来了一个组件叫tooltip,就是提示框。以前的版本没有这个组件的时候就有很多在问,datagrid的单元格,我要加鼠标提示要怎么做。原来我告诉他们的方法都是用formatter,大概方法如下:

1
2
3
4
5
formatter: function (value){
 
     return  '+value+ '">' +value+ '' ;
 
}

  

这样的方式就利用了浏览器自己的title特性,来达到显示效果。只是这种实现效果还不是非常里想。值得庆幸的是从1.3.3+的版本之后有了tooltip组件我就可以更进一步的自定义我们的提示信息了。

具体扩展方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
 * Datagrid扩展方法tooltip 基于Easyui 1.3.3,可用于Easyui1.3.3+
 * 简单实现,如需高级功能,可以自由修改
 * 使用说明:
 *   在easyui.min.js之后导入本js
 *   代码案例:
 *      $("#dg").datagrid({....}).datagrid('tooltip'); 所有列
 *      $("#dg").datagrid({....}).datagrid('tooltip',['productid','listprice']); 指定列
 * @author ____′gbq
 */
$.extend($.fn.datagrid.methods, {
    tooltip : function (jq, fields) {
        return jq.each(function () {
            var panel = $(this).datagrid('getPanel');
            if (fields  && typeof fields == 'object' && fields.sort) {
                $.each(fields, function () {
                    var field = this;

                    bindEvent($('.datagrid-body td[field=' + field + '] .datagrid-cell', panel));
                });
            } else {
                bindEvent($(".datagrid-body .datagrid-cell", panel));
            }
        });

        function bindEvent(jqs) {
            jqs.mouseover(function () {
                var content = $(this).text();
                if(content){
                    $(this).tooltip({
                        content : content,
                        trackMouse : true,
                        onHide : function () {
                            $(this).tooltip('destroy');
                        }
                    }).tooltip('show');
                }
            });
        }
    }
});


效果如下,样式可自行调整

easyui Datagrid方法扩展 - tooltip_第1张图片 


 参考:http://www.jeasyuicn.com/the-extended-datagrid-method---tooltip.html

你可能感兴趣的:(easyui Datagrid方法扩展 - tooltip)