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

最新推荐文章于 2024-04-09 11:12:09 发布
a9529lty
最新推荐文章于 2024-04-09 11:12:09 发布
阅读量1.1w
点赞数
分类专栏： Jquery Easy UI
Jquery Easy UI 专栏收录该内容
16 篇文章 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>