使用EasyUI创建分页对比效果
Posted lie隼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用EasyUI创建分页对比效果相关的知识，希望对你有一定的参考价值。
近期在做一个教学质量分析的系统，主要功能就是统计汇总考试信息从而得出知识点掌握的熟练程度。最近老板检查项目进度的时候提出了一个需求，想要通过点击筛选把页面一分为二，从而老师可以自己的筛选结果与总体要求有一个对比。
第一步，找到可以实现这个效果的一种布局
首先，找到了EasyUI这个强大的jQuery界面插件，在这其中有一个EasyUI Layout布局比较适合这个需求。布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局（官注）。而我们的需求只要保留一个center和一个east，默认使east折叠，通过点击弹出，这样便实现了“刷一下”弹出对比的效果。而创建这样一个layout也是超级简单，只需引入需要的css，js文件，然后就可以轻松创建一个简单的Layout了。
比如下边这个Layout只保存了center和east
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Easy UI</title> 5 <link rel="stylesheet" type="text/css" href="./css/easyui.css"> 6 <link rel="stylesheet" type="text/css" href="./css/icon.css"> 7 <link rel="stylesheet" type="text/css" href="./css/demo.css"> 8 <script type="text/javascript" src="./js/jquery.min.js"></script> 9 <script type="text/javascript" src="./js/jquery.easyui.min.js"></script> 10 </head> 11 <body > 12 <div > 13 <div class="easyui-layout" style="width:100%;height:100px;"> 14 <!-- East region --> 15 <div data-options="region:\'east\' ,collapsible: true ,border: true ,collapsed:true" style="width: 800px"> 16 <div> 17 <h1>我是需要弹出的部分</h1> 18 </div> 19 20 <!--Center region --> 21 <div data-options="region:\'center\',border: true" > 22 <div> 23 <h1>我是默认展示的部分</h1> 24 </div> 25 </div> 26 </div> 27 </body> 28 </html>
效果如下：
第二步，使east面板默认隐藏
为了实现这个效果可是没少走弯路，刚开始查找到layout有一下的方法：
于是自然而然的想到在页面加载的时候执行collapse方法，使面板折叠起来。但是这样有一个问题就是每次加载页面面板会有一个从中间向右边滑动的效果，于是就想到给east面板加一个id，用jQuery和JS来控制面板的隐藏和显示。
$("#id").hide(); $("#id").show();//jQuery语法
document.getElementById("id").style.visibility="hidden"；//显示visible，此方法隐藏后页面的位置还会被控件占用，显示空白
document.getElementById("id").style.display="none";//显示为inline，此方法隐藏后页面的位置不会被占用
如此以来看似是解决了问题，但终究还是图样图森破，每次点击展示隐藏east面板的时候都会有小小的bug。做到后来出现了不同分辨率下调节region大小的问题，于是在寻找解决方法的时候发现了另一个比较完美简便的方法：直接在region定义的style里设置collapsed=“true”即可。看到这里恍然大悟，果然什么东西都没有绝对，本以为表中的方法属性已经全了，没想到还是有漏网之鱼的。就这样轻易解决了使east面板在页面加载的时候隐藏的效果。
<div data-options="region:\'east\',collapsed:true ,collapsible: true ,border: false " id="eastpart">
第三步，实现根据窗口大小改变面板大小
在实际使用中，不同用户的显示器分辨率各不相同，页面在的显示效果也不尽相同，为此需要根据当前显示窗口的大小调整面板。实现这个效果也是非常的容易，只需要写一个resize方法，每次窗口变化都在JS中调用该方法即可。
$(\'#subWrap\').layout(\'panel\', \'east\').panel(\'resize\',{width:300});
$(\'#subWrap\').layout(\'resize\');
以下是对应的代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Complex Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="http://www.cnblogs.com/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/jquery.easyui.min.js"></script> <script> $(function(){ cover(); $(window).resize(function(){ //浏览器窗口变化 cover(); }); }); function cover(){ var win_width = $(window).width(); $(\'#subWrap\').layout(\'panel\', \'east\').panel(\'resize\',{width:win_width/3}); $(\'#subWrap\').layout(\'resize\'); } </script> </head> <body> <div id="subWrap" class="easyui-layout" fit="true"> <div data-options="region:\'north\'" style="height:50px"></div> <div data-options="region:\'south\',split:true" style="height:50px;"></div> <div data-options="region:\'east\',split:true" title="East" ></div> <div data-options="region:\'west\',split:true" title="West" style="width:180px;" ></div> <div data-options="region:\'center\',title:\'Main Title\',iconCls:\'icon-ok\',fit:true"></div> </div> </body> </html>
第四步，干掉region的收缩按钮
在这个项目中，我们想通过点击east region的折叠框来弹出整个面板，然后移开鼠标面板自动收回。如果误点了收缩按钮，那么会触发expand方法，那么面板就不会有自动收回的效果了，因此需要干掉这个收缩按钮。我们在Easy UI的说明中找到了这个扩展，在使用前引用 jquery.layout.extend.js ，然后定义function。visible取true时显示收缩按钮，取false时隐藏按钮。
function setRegionToolVisableState(flag){ $(\'#layout\').layout(\'setRegionToolVisableState\',{region:\'west\',visible:flag}); }
最后，剩下的就是把这几个小方法整合在一起，实现了点击收缩框让east面板自动收缩的功能，现在看起来可能会比较简单，但是在实现的过程中也是踩了无数的坑，最后才找到这样一个比较完善的方案。
感谢老铁的点拨：http://www.cnblogs.com/tv151579/archive/2013/04/19/3029837.html 解决了resize问题。
隐藏收缩按钮可参见：http://www.easyui.info/easyui/demo/layout/setRegionTool.html
以上是关于使用EasyUI创建分页对比效果的主要内容，如果未能解决你的问题，请参考以下文章