jquery datagird 单元格悬停显示内容

最新推荐文章于 2022-03-17 09:57:32 发布
小垣
最新推荐文章于 2022-03-17 09:57:32 发布
阅读量1.6k
点赞数
分类专栏： jquery 文章标签： jquery 悬停显示
本文链接：https://blog.csdn.net/junlong750/article/details/50905049
版权
jquery 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>Complex DataGrid - jQuery EasyUI Demo</title>  
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
    <link rel="stylesheet" type="text/css" href="../demo.css">  
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>  
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
    <script>  
        /**  
         * 扩展两个方法  
         */  
        $.extend($.fn.datagrid.methods, {  
            /**  
             * 开打提示功能  
             * @param {} jq  
             * @param {} params 提示消息框的样式  
             * @return {}  
             */  
            doCellTip: function(jq, params){  
                function showTip(data, td, e){  
                    if ($(td).text() == "")   
                        return;  
                    data.tooltip.text($(td).text()).css({  
                        top: (e.pageY + 10) + 'px',  
                        left: (e.pageX + 20) + 'px',  
                        'z-index': $.fn.window.defaults.zIndex,  
                        display: 'block'  
                    });  
                };  
                return jq.each(function(){  
                    var grid = $(this);  
                    var options = $(this).data('datagrid');  
                    if (!options.tooltip) {  
                        var panel = grid.datagrid('getPanel').panel('panel');  
                        var defaultCls = {  
                            'border': '1px solid #333',  
                            'padding': '2px',  
                            'color': '#333',  
                            'background': '#f7f5d1',  
                            'position': 'absolute',  
                            'max-width': '200px',  
                            'border-radius' : '4px',  
                            '-moz-border-radius' : '4px',  
                            '-webkit-border-radius' : '4px',  
                            'display': 'none'  
                        }  
                        var tooltip = $("<div id='celltip'></div>").appendTo('body');  
                        tooltip.css($.extend({}, defaultCls, params.cls));  
                        options.tooltip = tooltip;  
                        panel.find('.datagrid-body').each(function(){  
                            var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;  
                            $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td', {  
                                'mouseover': function(e){  
                                    if (params.delay) {  
                                        if (options.tipDelayTime)   
                                            clearTimeout(options.tipDelayTime);  
                                        var that = this;  
                                        options.tipDelayTime = setTimeout(function(){  
                                            showTip(options, that, e);  
                                        }, params.delay);  
                                    }  
                                    else {  
                                        showTip(options, this, e);  
                                    }  
                                      
                                },  
                                'mouseout': function(e){  
                                    if (options.tipDelayTime)   
                                        clearTimeout(options.tipDelayTime);  
                                    options.tooltip.css({  
                                        'display': 'none'  
                                    });  
                                },  
                                'mousemove': function(e){  
                                    var that = this;  
                                    if (options.tipDelayTime)   
                                        clearTimeout(options.tipDelayTime);  
                                    //showTip(options, this, e);  
                                    options.tipDelayTime = setTimeout(function(){  
                                            showTip(options, that, e);  
                                        }, params.delay);  
                                }  
                            });  
                        });  
                          
                    }  
                      
                });  
            },  
            /**  
             * 关闭消息提示功能  
             *  
             * @param {}  
             *            jq  
             * @return {}  
             */  
            cancelCellTip: function(jq){  
                return jq.each(function(){  
                    var data = $(this).data('datagrid');  
                    if (data.tooltip) {  
                        data.tooltip.remove();  
                        data.tooltip = null;  
                        var panel = $(this).datagrid('getPanel').panel('panel');  
                        panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')  
                    }  
                    if (data.tipDelayTime) {  
                        clearTimeout(data.tipDelayTime);  
                        data.tipDelayTime = null;  
                    }  
                });  
            }  
        });  
  
  
        $(function(){  
            $('#test').datagrid({  
                title:'My DataGrid',  
                iconCls:'icon-save',  
                width:700,  
                height:350,  
                nowrap: true,  
                autoRowHeight: false,  
                striped: true,  
                collapsible:true,  
                url:'066.json',  
                sortName: 'code',  
                sortOrder: 'desc',  
                remoteSort: false,  
                idField:'code',  
                onLoadSuccess:function(data){  
                    $(this).datagrid('doCellTip',{'max-width':'300px','delay':500});  
                },  
                frozenColumns:[[  
                    {field:'ck',checkbox:true},  
                    {title:'Code',field:'code',width:80,sortable:true}  
                ]],  
                columns:[[  
                    {title:'Base Information',colspan:3},  
                    {field:'opt',title:'Operation',width:100,align:'center', rowspan:2,  
                        formatter:function(value,rec){  
                            return '<span style="color:red">Edit Delete</span>';  
                        }  
                    }  
                ],[  
                    {field:'name',title:'Name',width:120},  
                    {field:'addr',title:'Address',width:220,rowspan:2,sortable:true,  
                        sorter:function(a,b){  
                            return (a>b?1:-1);  
                        }  
                    },  
                    {field:'col4',title:'Col41',width:150,rowspan:2}  
                ]],  
                pagination:true,  
                rownumbers:true,  
                toolbar:[{  
                    id:'btnadd',  
                    text:'Add',  
                    iconCls:'icon-add',  
                    handler:function(){  
                        $('#btnsave').linkbutton('enable');  
                        alert('add')  
                    }  
                },{  
                    id:'btncut',  
                    text:'Cut',  
                    iconCls:'icon-cut',  
                    handler:function(){  
                        $('#btnsave').linkbutton('enable');  
                        alert('cut')  
                    }  
                },'-',{  
                    id:'btnsave',  
                    text:'Save',  
                    disabled:true,  
                    iconCls:'icon-save',  
                    handler:function(){  
                        $('#btnsave').linkbutton('disable');  
                        alert('save')  
                    }  
                }]  
            });  
            var p = $('#test').datagrid('getPager');  
            $(p).pagination({  
                onBeforeRefresh:function(){  
                    alert('before refresh');  
                }  
            });  
        });  
        function doCellTip(){  
            $('#test').datagrid('doCellTip',{'max-width':'100px'});  
        }  
        function cancelCellTip(){  
            $('#test').datagrid('cancelCellTip');  
        }  
          
    </script>  
</head>  
<body>  
    <h2>Complex DataGrid</h2>  
    <div class="demo-info">  
        <div class="demo-tip icon-tip"></div>  
        <div>Click the button to do actions with datagrid. </div>  
    </div>  
      
    <div style="margin:10px 0;">  
        <a href="#" οnclick="doCellTip()">显示提示消息</a>  
        <a href="#" οnclick="cancelCellTip()">禁止消息显示</a>  
        <div id="info"></div>  
    </div>  
    <table id="test"></table>  
</body>  
</html>
小垣
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery datagird 单元格悬停显示内容

Complex DataGrid - jQuery EasyUI Demo /** * 扩展两个方法 */ $.extend($.fn.datagrid.methods, { /**
复制链接

扫一扫