jquery datagird 单元格悬停显示内容

刺骨的言语ヽ痛彻心扉 2022-04-12 13:12 237阅读 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>