<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
