扩展:datagrid鼠标经过提示单元格内容

妖狐艹你老母 2021-11-22 11:04 207阅读 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>