http://www.easyui.info/archives/1435.html

datagrid

服务端分页

服务端分页，高效，快捷！强力推荐！

easyui的datagrid服务端分页，通过设置url的方式会自动请求数据。默认会传递两个参数{page:1,rows:10},自定义参数，如果是固定不变的就可以通过queryParam配置，也可通过事件onBeforeLoad事件来拦截。只要返回{total:20,rows:[]}类型的数据就可以了。

代码如下：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'MyJsp.jsp' starting page</title>
  13.  
  14. 	<meta http-equiv="pragma" content="no-cache">
  15. 	<meta http-equiv="cache-control" content="no-cache">
  16. 	<meta http-equiv="expires" content="0">
  17. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18. 	<meta http-equiv="description" content="This is my page">
  19. 	<!--
  20. 	<link rel="stylesheet" type="text/css" href="styles.css">
  21. 	-->
  22.  
  23.   <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  24.   <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
  25.   <link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
  26.   <link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
  27.   <script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
  28.   <script type="text/javascript" src="js/json.js"></script></head>
  29.  
  30.   <body>
  31.   <input type="text" id="t" value="123" />
  32.     <table id="tt"> </table>
  33.     <script type="text/javascript">
  34.     	$('#tt').datagrid({
  35. 				rownumbers:true,
  36. 				pagination:true,
  37. 				url:'getData.jsp',
  38. 				queryParams:{
  39. 					name:'wch',
  40. 					id:$('#t').val()
  41. 				},
  42. 				onBeforeLoad:function(param){
  43. 					alert(JSON.encode(param));
  44. 					param.id = $('#t').val();
  45. 					return true;
  46. 					},
  47. 			    columns:[[
  48. 			        {field:'code',title:'Code',width:100},
  49. 			        {field:'name',title:'Name',width:100},
  50. 			        {field:'price',title:'Price',width:100,align:'right'}
  51. 			    ]]
  52.         	});
  53.     </script>
  54.   </body>
  55. </html>

网络请求拦截到的图片：

自适应宽度

如果列想自适应宽度，填满整个表格，但是想使用百分比的形式设置，width可以设置为方法的形式，自己计算宽度之后设置

比如{field:'id',title:'查询到的用户',width:$('#dg').width()-10,align:'center',resizable:true,sortable:true},



如果想设置为100%，那就随便设置比实际宽度宽的数字，然后fitColumns设置为true就可以了。

fitColumns:true,

columns:[[{field:'id',title:'查询到的用户',width:500,align:'center',resizable:true,sortable:true}]]

重置，刷新到第一页

  1. $('#dg').datagrid('getPager').pagination('select',1);

单元格鼠标悬停显示内容


通过给单元格设置title显示里面的内容 ,当单元格内容比较多的时候，就非常有用了
在1.3.3版本中的8674行修改成在renderRow方法中拦截，添加title 
  1. cc.push("<td field=\""+_643+"\" title=\""+(col.checkbox?"":_644)+"\" "+_646+">");


combotree 取消选中

combotree其实也是tree，但是今天碰到了一个问题，竟然api中没有提到，本来认为肯定会有的东西-----树节点的取消选中,我认为这是一个肯定会提供api的操作，竟然api中寻她千百度，依然不见踪影，但是内心有股默认的力量支撑着我，忽然灵光一闪，原来，使用select空就可以实现了。$('#ttt').combotree('tree').tree('select','');
如果想实现再次点击已选择的取消选中，那就监听onclick事件。

弹出框(dialog)底部多余空白

如果在dialog里面创建table，初始化的时候如果是先创建dialog，然后创建table，等显示出来的时候，dialog的底部就会有多余的空白，如果你还没遇到说明你很幸运，因为在你无意间避免了，你初始化的时候是先创建的table然后创建的dialog。

accordion 默认选中

defSelected 属性，默认 undefined, 可以使accordion 的index或者是title。
在取消选中后500ms后判断如果没有选中的就默认选中defSelected;
修改源文件：jquery.accordion.js 第185行
  1. 	t.bind('click', function(e){
  2. 			var animate = $.data(container, 'accordion').options.animate;
  3. 			var defSel = $.data(container, 'accordion').options.defSelected;
  4. 			stopAnimate(container);
  5. 			if (pp.panel('options').collapsed){
  6. 				pp.panel('expand', animate);
  7. 			} else {
  8. 				pp.panel('collapse', animate);
  9. 				setTimeout(function(){
  10. 				var cur11 = getCurrent(container);
  11. 				if(cur11 == null){
  12. 					select(container,defSel);
  13. 				}},500);
  14. 			}
  15. 			return false;
  16. 		});

也可直接修改压缩后的文件：jquery.easyui.min.js-1.3.3 ------3585行

  1. else{
  2. pp.panel("collapse",_292);
  3. setTimeout(function(){
  4. 	var defSel = $.data(_28d, 'accordion').options.defSelected;
  5. 	if( defSel && _278(_28d) ==null){
  6. 		_293(_28d,defSel);
  7. 	}
  8. },500);
  9. }

combobox 和combotree双击可清除

  1. 	//双击清除combo
  2. 			$('.combo').each(function(i){
  3. 				var is_box = true; // 是combobox还是combotree
  4. 				var combo = $(this).prev()[0];
  5. 				var opts = $.data(combo,'combobox') ? $.data(combo,'combobox').options:($.data(combo,'combotree').options,is_box = false);
  6. 				if(opts.dblToClear != false){
  7. 					this.title = '双击可清除!';
  8. 					$(this).bind('dblclick',function(){
  9. 						 if(is_box){
  10. 						 		$(this).prev().combobox('clear');
  11. 						 	}else{
  12. 						 		$(this).prev().combotree('clear');
  13. 						 	}
  14. 					});
  15. 				}
  16. 			});

linkbutton bug修复

linkbutton 如果在禁用期间去掉了绑定的click事件，再次启用，事件依然有效。linkbutton对于jQuery绑定的click方法禁用启用无效，即禁用时事件依然会触发。
  1. /**
  2. * 1、修复jquery绑定的方法在按钮disable之后仍然有效
  3. * 2、修复按钮disable之后，取消事件，再次enable之后，事件继续有效
  4. */
  5. (function($){
  6.  
  7. 	function setDisabled(target, disabled){
  8. 		var state = $.data(target, 'linkbutton');
  9. 		var opts = state.options;
  10. 		$(target).removeClass('l-btn-disabled l-btn-plain-disabled');
  11. 		if (disabled){
  12. 			opts.disabled = true;
  13. 			var href = $(target).attr('href');
  14. 			if (href){
  15. 				state.href = href;
  16. 				$(target).attr('href', 'javascript:void(0)');
  17. 			}
  18. 			if (target.onclick){
  19. 				state.onclick = target.onclick;
  20. 				target.onclick = null;
  21. 			}
  22. 			//---------------------------
  23. 			var data =  $(target).data('events');
  24. 			if(data && data.click){
  25. 					state.click= data.click[0].handler ;
  26. 					$(target).unbind('click');
  27. 				}
  28. 			//--------------------------------------------
  29. 			opts.plain ? $(target).addClass('l-btn-disabled l-btn-plain-disabled') : $(target).addClass('l-btn-disabled');
  30. 		} else {
  31. 			opts.disabled = false;
  32. 			//---------------------
  33. 			if (state.href) {
  34. 				$(target).attr('href', state.href);
  35. 				state.href = 'javascript:void(0)';
  36. 			}
  37. 			if (state.onclick) {
  38. 				target.onclick = state.onclick;
  39. 				state.onclick = null;
  40. 			}
  41. 			if (state.click){
  42. 				$(target).bind('click',state.click);
  43. 				state.click = null;
  44. 			}
  45. 		}
  46. 	}
  47. 	$.fn.linkbutton.methods =$.extend($.fn.linkbutton.methods, {
  48. 		enable: function(jq){
  49. 			return jq.each(function(){
  50. 				setDisabled(this, false);
  51. 			});
  52. 		},
  53. 		disable: function(jq){
  54. 			return jq.each(function(){
  55. 				setDisabled(this, true);
  56. 			});
  57. 		}
  58. 	});
  59. 	  $(function(){
  60. 			$('.l-btn-disabled').each(function(i){
  61. 				setDisabled(this, true);
  62. 			})
  63.   	});
  64.  
  65. })(jQuery);

easyui在IE中样式不正确

  1. //IE反应比较慢，有时候样式会变，可以通过setTimeout的方式修复bug；
  2. $(function(){
  3.     		setTimeout(function(){
  4.     			$('#tg').treegrid({
  5.         			title:"配置菜单",
  6.         			width:ViewWidth,
  7.         			height:ViewHeight-30,
  8.                     iconCls: 'icon-ok',
  9.                     rownumbers: true,
  10.                     animate: true,
  11.                     collapsible: true,
  12.                     fitColumns: true,
  13.                     url: 'frame/menu_config.json?p='+new Date().getTime(),
  14.                     method: 'get',
  15.                     idField: 'id',
  16.                     treeField:'text',
  17.                     cache:false,
  18.                     columns:[[
  19.                               {title:'菜单名称',field:'text',width:100,editor:'text'},
  20.                               {title:'菜单路径',field:'path',width:100,editor:'text'},
  21.                               {title:'展开状态',field:'state',width:30,editor:'text'}
  22.     	       		]]
  23.         		});
  24.     		},30);
  25.  
  26.     	});

窗口动态关闭

  1. /*
  2. *窗口打开和关闭的动画效果
  3. *@param options
  4. {
  5. 	【必须】id:dom元素id，
  6. 	【可选,默认500】speed:动画速度 'fast'、'normal'、'slow'、具体的毫秒数
  7. 	【可选】close_to_id：关闭时动画指向的元素id，如果不指定，就向左上角关闭
  8. }
  9. */
  10. function windowAnimate(options){
  11. 	//如果没有id属性，就返回
  12. 	if(!options.id){
  13. 		return;
  14. 	}
  15. 	//默认参数
  16. 	var opt = {speed:500,easing:'swing',close_state:{left:0,top:0,width:0,height:0}};
  17. 	//读取参数
  18. 	$.extend(opt,options);
  19.  
  20. 	//窗口实际的dom元素
  21. 	var $w = $('#'+opt.id).parent('.window');
  22. 	//保存参数信息
  23. 	$w.data('opt',opt);
  24. 	//保存关闭时的状态
  25. 	function saveCloseState(){
  26. 		//指定了关闭时，动画指向的元素
  27. 		if(opt.close_to_id){
  28. 			var $c = $("#"+opt.close_to_id);
  29. 			//获取指向元素的中心点位置
  30. 			opt.close_state.left = $c.offset().left + $c.width()/2;
  31. 			opt.close_state.top = $c.offset().top + $c.height()/2;
  32. 		}
  33. 	}
  34.  
  35. 	//保存打开时的状态
  36. 	function saveOpenState(){
  37. 		opt.open_state = {width:$w.width(),height:$w.height(),top:$w.offset().top,left:$w.offset().left};
  38. 	}
  39.  
  40. 	//设置动画方法
  41. 	setTimeout(function(){
  42. 		$('#'+opt.id).window({
  43. 			shadow:false,
  44. 			onBeforeClose:animateClose,
  45. 			onBeforeOpen:animateOpen,
  46. 			onMinimize:minimizeWindow,
  47. 			onOpen:openWindow
  48. 		});
  49. 	},300);
  50.  
  51. 	//打开窗口
  52. 	function openWindow(){
  53. 		saveOpenState();
  54. 		saveCloseState();
  55. 		$w.css(opt.close_state);
  56. 		$('#'+opt.id).window('open');
  57. 	}
  58.  
  59. 	//最小化窗口
  60. 	function minimizeWindow(){
  61. 		$w.show();
  62. 		$('#'+opt.id).window('close');
  63. 	}
  64.  
  65. 	//动态关闭
  66. 	function animateClose(){
  67. 		//保存关闭时的状态
  68. 		saveCloseState();
  69. 		//保存打开时的状态
  70. 		saveOpenState();
  71. 		//动画关闭
  72. 		$w.animate(opt.close_state,opt.speed,'swing',function(){
  73. 			$w.hide();
  74. 		});
  75. 		return false;
  76. 	}
  77. 	//动态打开
  78. 	function animateOpen(){
  79. 			//如果不存在之前的状态，说明是第一次打开，就调用打开方法
  80. 			if(!opt.open_state){
  81. 				return true;
  82. 			}
  83. 			$w.show();
  84. 			$w.animate(opt.open_state,opt.speed,'swing');
  85. 			return false;
  86. 	}
  87. }

附录：easyui扩展和bug修复源代码

  1. /**
  2. * 1、修复jquery绑定的方法在按钮disable之后仍然有效
  3. * 2、修复按钮disable之后，取消事件，再次enable之后，事件继续有效
  4. * 3、扩展了combobox和combotree双击可清除事件，通过设置属性dblToClear=false可以屏蔽此扩展
  5. */
  6. (function($){
  7.  
  8. 	function setDisabled(target, disabled){
  9. 		var state = $.data(target, 'linkbutton');
  10. 		var opts = state.options;
  11. 		$(target).removeClass('l-btn-disabled l-btn-plain-disabled');
  12. 		if (disabled){
  13. 			opts.disabled = true;
  14. 			var href = $(target).attr('href');
  15. 			if (href){
  16. 				state.href = href;
  17. 				$(target).attr('href', 'javascript:void(0)');
  18. 			}
  19. 			if (target.onclick){
  20. 				state.onclick = target.onclick;
  21. 				target.onclick = null;
  22. 			}
  23. 			//---------------------------
  24. 			var data =  $(target).data('events');
  25. 			if(data && data.click){
  26. 					state.click= data.click[0].handler ;
  27. 					$(target).unbind('click');
  28. 				}
  29. 			//--------------------------------------------
  30. 			opts.plain ? $(target).addClass('l-btn-disabled l-btn-plain-disabled') : $(target).addClass('l-btn-disabled');
  31. 		} else {
  32. 			opts.disabled = false;
  33. 			//---------------------
  34. 			if (state.href) {
  35. 				$(target).attr('href', state.href);
  36. 				state.href = 'javascript:void(0)';
  37. 			}
  38. 			if (state.onclick) {
  39. 				target.onclick = state.onclick;
  40. 				state.onclick = null;
  41. 			}
  42. 			if (state.click){
  43. 				$(target).bind('click',state.click);
  44. 				state.click = null;
  45. 			}
  46. 		}
  47. 	}
  48. 	$.fn.linkbutton.methods =$.extend($.fn.linkbutton.methods, {
  49. 		enable: function(jq){
  50. 			return jq.each(function(){
  51. 				setDisabled(this, false);
  52. 			});
  53. 		},
  54. 		disable: function(jq){
  55. 			return jq.each(function(){
  56. 				setDisabled(this, true);
  57. 			});
  58. 		}
  59. 	});
  60. 	  $(function(){
  61. 			$('.l-btn-disabled').each(function(i){
  62. 				setDisabled(this, true);
  63. 			})
  64. 			//双击清除combo
  65. 			$('.combo').each(function(i){
  66. 				var is_box = true; // 是combobox还是combotree
  67. 				var combo = $(this).prev()[0];
  68. 				var opts = $.data(combo,'combobox') ? $.data(combo,'combobox').options:($.data(combo,'combotree').options,is_box = false);
  69. 				if(opts.dblToClear != false){
  70. 					this.title = '双击可清除!';
  71. 					$(this).bind('dblclick',function(){
  72. 						 if(is_box){
  73. 						 		$(this).prev().combobox('clear');
  74. 						 	}else{
  75. 						 		$(this).prev().combotree('clear');
  76. 						 	}
  77. 					});
  78. 				}
  79. 			});
  80.   	});
  81.  
  82. })(jQuery);

easyui 使用笔记的更多相关文章

  1. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  2. EasyUI 开发笔记(一)

    由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...

  3. easyui学习笔记8—在手风琴中加载其他的页面

    在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...

  4. easyui学习笔记2—在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  5. easyui学习笔记1—增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

  6. jQuery EasyUI 使用笔记

    大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...

  7. EasyUI学习笔记之panel

    <easyUI panel 属性:> <!--引入easyUI panel 组件 设置宽,高,定义标题(默认在左上角),设置图标iconCls:'icon-ok',引入工具tools ...

  8. easyUI datagrid笔记

    easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <lin ...

  9. EasyUI学习笔记---Datagrid真分页

    EasyUI Datagrid组件在我看来功能还是很强大的,在我使用过程中遇到分页请求的问题困扰了一天才解决,下面我就把我遇到的问题分享一下 //datagrid数据表格渲染 $("#dg& ...

  10. EasyUI ComboGrid 笔记(支持分页)

    业务要求: 下拉框做选择时需要展现多个字段供用户参考,由于内容可能会很多,故还需要考虑分页. 解决方案: 由于项目整体已经采用了EasyUI,在浏览了demo以后,初步考虑使用EasyUI的combo ...

随机推荐

  1. The Balance POJ 2142 扩展欧几里得

    Description Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of ...

  2. Mysql 使用delete drop truncate 删除数据时受外键约束影响解决方案

    先禁用数据库的外键约束: set foreign_key_checks=0; 进行删除操作 delete.drop.truncate 恢复数据库外键约束: set foreign_key_checks ...

  3. Android对方向感应器的封装调用

    Android自动的SensorManager使用起来已经很方便,但由于一些情况我们希望对其中的功能进行封装: 只使用个别的sensor,功能相对单一 要对sensor返回的raw data进行算法处 ...

  4. 1245 最小的N个和(前k小ai+bi)

    1245 最小的N个和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 有两个长度为 N ...

  5. UVA1602 Lattice Animals 搜索+剪枝

    题目大意 给出一个$w\times h$的网格,定义一个连通块为一个元素个数为$n$的方格的集合$A,\forall x\in A, \exists y\in A$,使得$x,y$有一条公共边.现要求 ...

  6. Android 完全退出应用程序

    随着业务逻辑越来越复杂,退出应用程序也不像之前那个直接将Activity finish()掉就可以了,在网上看到很多完全退出App的文章,但是实践之后发现,并不像文章中描述的那样,不是方法过时了,就是 ...

  7. C语言strdup()函数：复制字符串【转】

    本文转载自:http://c.biancheng.net/cpp/html/166.html 头文件:#include <string.h> 定义函数:char * strdup(cons ...

  8. java线程异常处理方法

    工作中常发现有些程序发生异常但却没有错误日志,原因就是一些开发线程异常处理错误,导致程序报错但异常信息打印到堆栈上,不好在生产环境中定位问题. 在java多线程程序中,所有线程都不允许抛出未捕获的ch ...

  9. 【WIP】Bootstrap modal

    创建: 2017/09/28   更新: 2017/10/14 标题加上[WIP]

  10. Python机器学习算法 — KNN分类

    KNN简介 K最近邻(k-Nearest Neighbor,KNN)分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一.KNN分类算法属于监督学习. 最简单最初级的分类器是将全部的训练 ...