easyui Datagrid方法扩展 - tooltip

具体扩展方法如下:

 

/**

 * Datagrid扩展方法tooltip 基于Easyui 1.3.3,可用于Easyui1.3.3+

 * 简单实现,如需高级功能,可以自由修改

 * 使用说明:

 *   在easyui.min.js之后导入本js

 *   代码案例:

 *      $("#dg").datagrid({....}).datagrid('tooltip'); 所有列

 *      $("#dg").datagrid({....}).datagrid('tooltip',['productid','listprice']); 指定列

 *   例:

 *   在onLoadSuccess中加入如下代码

onLoadSuccess: function(data) {

$(this).datagrid('tooltip',['name','title']);       //数据过长会浮动显示

}

 * @author

 */

$.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();

                $(this).tooltip({

                    content : content,

                    trackMouse : true,

                    onHide : function () {

                        $(this).tooltip('destroy');

                    }

                }).tooltip('show');

            });

        }

    }

});

猜你喜欢

转载自humlzy.iteye.com/blog/2389558