easyui 使用笔记

来源：互联网发布：sql union和union all 编辑：程序博客网时间：2024/05/16 10:15

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}]]

重置，刷新到第一页

$('#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还是combotreevar 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还是combotreevar 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);