jquery datagird 单元格悬停显示内容 -

junlong750
浏览: 21566 次
性别:
来自: 广州
最近访客更多访客>>

大锤sama
vavi
zhqyhp
dsffdet
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

jquery datagird 单元格悬停显示内容

博客分类：
javascript
jquery 悬停显示
<!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="#" onclick="doCellTip()">显示提示消息</a>
        <a href="#" onclick="cancelCellTip()">禁止消息显示</a>
        <div id="info"></div>
    </div>
    <table id="test"></table>
</body>
</html>
分享到：