jquery datagird 单元格悬停显示内容

小鱼儿 2022-08-21 04:51 183阅读 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>