easyui 使用笔记
http://www.easyui.info/archives/1435.html
datagrid
服务端分页
服务端分页,高效,快捷!强力推荐!
easyui的datagrid服务端分页,通过设置url的方式会自动请求数据。默认会传递两个参数{page:1,rows:10},自定义参数,如果是固定不变的就可以通过queryParam配置,也可通过事件onBeforeLoad事件来拦截。只要返回{total:20,rows:[]}类型的数据就可以了。
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'MyJsp.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <link rel="stylesheet" href="themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link> <script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/json.js"></script></head> <body> <input type="text" id="t" value="123" /> <table id="tt"> </table> <script type="text/javascript"> $('#tt').datagrid({ rownumbers:true, pagination:true, url:'getData.jsp', queryParams:{ name:'wch', id:$('#t').val() }, onBeforeLoad:function(param){ alert(JSON.encode(param)); param.id = $('#t').val(); return true; }, columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); </script> </body> </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}]]
比如{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}]]
重置,刷新到第一页
$('#dg').datagrid('getPager').pagination('select',1);单元格鼠标悬停显示内容
通过给单元格设置title显示里面的内容 ,当单元格内容比较多的时候,就非常有用了
在1.3.3版本中的8674行修改成在renderRow方法中拦截,添加title
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行
t.bind('click', function(e){ var animate = $.data(container, 'accordion').options.animate; var defSel = $.data(container, 'accordion').options.defSelected; stopAnimate(container); if (pp.panel('options').collapsed){ pp.panel('expand', animate); } else { pp.panel('collapse', animate); setTimeout(function(){ var cur11 = getCurrent(container); if(cur11 == null){ select(container,defSel); }},500); } return false; });也可直接修改压缩后的文件:jquery.easyui.min.js-1.3.3 ------3585行
else{ pp.panel("collapse",_292); setTimeout(function(){ var defSel = $.data(_28d, 'accordion').options.defSelected; if( defSel && _278(_28d) ==null){ _293(_28d,defSel); } },500); }
combobox 和combotree双击可清除
//双击清除combo $('.combo').each(function(i){ var is_box = true; // 是combobox还是combotree var combo = $(this).prev()[0]; var opts = $.data(combo,'combobox') ? $.data(combo,'combobox').options:($.data(combo,'combotree').options,is_box = false); if(opts.dblToClear != false){ this.title = '双击可清除!'; $(this).bind('dblclick',function(){ if(is_box){ $(this).prev().combobox('clear'); }else{ $(this).prev().combotree('clear'); } }); } });
linkbutton bug修复
linkbutton 如果在禁用期间去掉了绑定的click事件,再次启用,事件依然有效。linkbutton对于jQuery绑定的click方法禁用启用无效,即禁用时事件依然会触发。
/** * 1、修复jquery绑定的方法在按钮disable之后仍然有效 * 2、修复按钮disable之后,取消事件,再次enable之后,事件继续有效 */ (function($){ function setDisabled(target, disabled){ var state = $.data(target, 'linkbutton'); var opts = state.options; $(target).removeClass('l-btn-disabled l-btn-plain-disabled'); if (disabled){ opts.disabled = true; var href = $(target).attr('href'); if (href){ state.href = href; $(target).attr('href', 'javascript:void(0)'); } if (target.onclick){ state.onclick = target.onclick; target.onclick = null; } //--------------------------- var data = $(target).data('events'); if(data && data.click){ state.click= data.click[0].handler ; $(target).unbind('click'); } //-------------------------------------------- opts.plain ? $(target).addClass('l-btn-disabled l-btn-plain-disabled') : $(target).addClass('l-btn-disabled'); } else { opts.disabled = false; //--------------------- if (state.href) { $(target).attr('href', state.href); state.href = 'javascript:void(0)'; } if (state.onclick) { target.onclick = state.onclick; state.onclick = null; } if (state.click){ $(target).bind('click',state.click); state.click = null; } } } $.fn.linkbutton.methods =$.extend($.fn.linkbutton.methods, { enable: function(jq){ return jq.each(function(){ setDisabled(this, false); }); }, disable: function(jq){ return jq.each(function(){ setDisabled(this, true); }); } }); $(function(){ $('.l-btn-disabled').each(function(i){ setDisabled(this, true); }) }); })(jQuery);
easyui在IE中样式不正确
//IE反应比较慢,有时候样式会变,可以通过setTimeout的方式修复bug; $(function(){ setTimeout(function(){ $('#tg').treegrid({ title:"配置菜单", width:ViewWidth, height:ViewHeight-30, iconCls: 'icon-ok', rownumbers: true, animate: true, collapsible: true, fitColumns: true, url: 'frame/menu_config.json?p='+new Date().getTime(), method: 'get', idField: 'id', treeField:'text', cache:false, columns:[[ {title:'菜单名称',field:'text',width:100,editor:'text'}, {title:'菜单路径',field:'path',width:100,editor:'text'}, {title:'展开状态',field:'state',width:30,editor:'text'} ]] }); },30); });
窗口动态关闭
/* *窗口打开和关闭的动画效果 *@param options { 【必须】id:dom元素id, 【可选,默认500】speed:动画速度 'fast'、'normal'、'slow'、具体的毫秒数 【可选】close_to_id:关闭时动画指向的元素id,如果不指定,就向左上角关闭 } */ function windowAnimate(options){ //如果没有id属性,就返回 if(!options.id){ return; } //默认参数 var opt = {speed:500,easing:'swing',close_state:{left:0,top:0,width:0,height:0}}; //读取参数 $.extend(opt,options); //窗口实际的dom元素 var $w = $('#'+opt.id).parent('.window'); //保存参数信息 $w.data('opt',opt); //保存关闭时的状态 function saveCloseState(){ //指定了关闭时,动画指向的元素 if(opt.close_to_id){ var $c = $("#"+opt.close_to_id); //获取指向元素的中心点位置 opt.close_state.left = $c.offset().left + $c.width()/2; opt.close_state.top = $c.offset().top + $c.height()/2; } } //保存打开时的状态 function saveOpenState(){ opt.open_state = {width:$w.width(),height:$w.height(),top:$w.offset().top,left:$w.offset().left}; } //设置动画方法 setTimeout(function(){ $('#'+opt.id).window({ shadow:false, onBeforeClose:animateClose, onBeforeOpen:animateOpen, onMinimize:minimizeWindow, onOpen:openWindow }); },300); //打开窗口 function openWindow(){ saveOpenState(); saveCloseState(); $w.css(opt.close_state); $('#'+opt.id).window('open'); } //最小化窗口 function minimizeWindow(){ $w.show(); $('#'+opt.id).window('close'); } //动态关闭 function animateClose(){ //保存关闭时的状态 saveCloseState(); //保存打开时的状态 saveOpenState(); //动画关闭 $w.animate(opt.close_state,opt.speed,'swing',function(){ $w.hide(); }); return false; } //动态打开 function animateOpen(){ //如果不存在之前的状态,说明是第一次打开,就调用打开方法 if(!opt.open_state){ return true; } $w.show(); $w.animate(opt.open_state,opt.speed,'swing'); return false; } }
附录:easyui扩展和bug修复源代码
/** * 1、修复jquery绑定的方法在按钮disable之后仍然有效 * 2、修复按钮disable之后,取消事件,再次enable之后,事件继续有效 * 3、扩展了combobox和combotree双击可清除事件,通过设置属性dblToClear=false可以屏蔽此扩展 */ (function($){ function setDisabled(target, disabled){ var state = $.data(target, 'linkbutton'); var opts = state.options; $(target).removeClass('l-btn-disabled l-btn-plain-disabled'); if (disabled){ opts.disabled = true; var href = $(target).attr('href'); if (href){ state.href = href; $(target).attr('href', 'javascript:void(0)'); } if (target.onclick){ state.onclick = target.onclick; target.onclick = null; } //--------------------------- var data = $(target).data('events'); if(data && data.click){ state.click= data.click[0].handler ; $(target).unbind('click'); } //-------------------------------------------- opts.plain ? $(target).addClass('l-btn-disabled l-btn-plain-disabled') : $(target).addClass('l-btn-disabled'); } else { opts.disabled = false; //--------------------- if (state.href) { $(target).attr('href', state.href); state.href = 'javascript:void(0)'; } if (state.onclick) { target.onclick = state.onclick; state.onclick = null; } if (state.click){ $(target).bind('click',state.click); state.click = null; } } } $.fn.linkbutton.methods =$.extend($.fn.linkbutton.methods, { enable: function(jq){ return jq.each(function(){ setDisabled(this, false); }); }, disable: function(jq){ return jq.each(function(){ setDisabled(this, true); }); } }); $(function(){ $('.l-btn-disabled').each(function(i){ setDisabled(this, true); }) //双击清除combo $('.combo').each(function(i){ var is_box = true; // 是combobox还是combotree var combo = $(this).prev()[0]; var opts = $.data(combo,'combobox') ? $.data(combo,'combobox').options:($.data(combo,'combotree').options,is_box = false); if(opts.dblToClear != false){ this.title = '双击可清除!'; $(this).bind('dblclick',function(){ if(is_box){ $(this).prev().combobox('clear'); }else{ $(this).prev().combotree('clear'); } }); } }); }); })(jQuery);