- <!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>
easyui拓展title
最新推荐文章于 2022-04-11 10:16:20 发布