1 easyUI
1.1简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
1.2下载和安装
下载地址:
http://www.jeasyui.net/download/
在项目中使用easyUI
将相关内容拷贝到项目的根目录:
在页面中引用相关的内容:
1.3 easyUI的布局
边框布局(border layout)提供五个区域:east、west、north、south、center。以下是一些通常用法:
- north 区域可以用来显示网站的标语。
- south 区域可以用来显示版权以及一些说明。
- west 区域可以用来显示导航菜单。
- east 区域可以用来显示一些推广的项目。
- center 区域可以用来显示主要的内容。
<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div> <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div> <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> <div data-options="region:'center',title:'Center'"></div> </body> |
效果:
如果不需要某个部分,就直接不写就行了。
可以设置每个部分的大小。
也可也在局部范围内使用这样的布局方式:
1.4easyUI面板
面板作为承载其它内容的容器。这是构建其他组件的基础(比如:layout,tabs,accordion等)。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置
案例:
<div data-options="title:'用户列表',iconCls:'icon-save',collapsible:true,closable:true" style="width: 500px; height: 150px; padding: 10px; background: #fafafa;" class="easyui-panel"> 这里是一个面板 </div> |
事件的使用:
使用JS动态渲染一个panel
<script type="text/javascript"> $(document).ready(function(){ //将div渲染成一个panel $("#st").panel(); //调用方法: $("#st").panel('resize',{ width: 600, height: 400 }); //通过JS动态的设置属性 $("#st").panel({ title:"测试标题", iconCls:'icon-remove' }); }); </script> |
1.5 数据列表
DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
最基本的表格:
<table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">编码</th> <th data-options="field:'name'">名称</th> <th data-options="field:'price'">价格</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>name1</td> <td>2323</td> </tr> <tr> <td>002</td> <td>name2</td> <td>4612</td> </tr> </tbody> </table> |
效果:
easyUI的datagrid最强大的不是表格的渲染,而是数据的处理
案例:
页面:
<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'user?op=users',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'uId'">编号</th> <th data-options="field:'nickName'">昵称</th> <th data-options="field:'loginName'">登录名</th> <th data-options="field:'gender'">性别</th> </tr> </thead> </table> |
Servlet中的代码:
@WebServlet("/user") public class UserServlet extends BaseServlet { private IUserService userService = (IUserService) BeansFactory.getBean("userService");
public void users(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<User> users = userService.queryAll(); Map<String, Object> data = new HashMap<>(); data.put("total", users.size()); data.put("rows", users); // 将map转换为json ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(data); // 输出json response.setCharacterEncoding("utf-8"); response.getWriter().write(json); } } |
效果:
分析:
发送请求
数据的对应:
Datagrid需要的数据结构:
{“total”:268, Rows:[ {“uid”:1,”nickName”:”卡卡西”,”loginNmae”:”kakaxi”..}, {“uid”:1,”nickName”:”卡卡西”,”loginNmae”:”kakaxi”..}, ….. ] } |
动态绑定数据到表格:
<script type="text/javascript"> $(document).ready(function(){ $("#us").datagrid({ title:"又是用户列表", url:"user?op=users", fitColumns:false, columns:[[ {field:'uId',checkbox:true,width:50}, {field:'nickName',title:'昵称',width:100}, {field:'loginName',title:'登录名',width:100,align:'right'}, {field:'gender',title:'性别',width:100,formatter:function(value,row,index){ var v = '男'; if(value==2){ v = '女'; }else if(value==0){ v = '不明' } return v; }} ]] }); }); </script> <table id="us"></table> |
效果:
1.6工具栏
面板和表格都有工具栏,表格本身是继承自面板的。
效果:
1.7分页条
分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮,以增强其功能。
显示分页条:
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div> |
在表格上显示分页条:
通过属性pagination设置
效果:
通过属性设置分页条的相关数据
效果:
分页条的使用:
当点击上一页下一页时处理:easyUI会将表格加载数据的url再次请求,并且将当前的页码+1或者-1发送到服务器。参数名称是固定的。
参数中 page代表页码,rows代表每页大小。
在servlet中可以通过request.getParameter获取请求参数。
1.8easyUI的树
使用硬代码实现树:
<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> <ul> <li><span>文件111</span></li> <li><span>文件222</span></li> </ul> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul> |
动态生成一个树:
添加实体类类别:
public class Categroy { private int id; private String text; private List<Categroy> childen;//子类别 } |
添加treeservlet,在servlet中创建一颗树。
@WebServlet("/tree") public class TreeServlet extends BaseServlet { public void showTree(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Categroy cat = new Categroy(0,"商品"); Categroy cat1 = new Categroy(1,"家电"); Categroy cat2 = new Categroy(2,"食品"); Categroy cat3 = new Categroy(3,"冰箱"); Categroy cat4 = new Categroy(4,"电视"); Categroy cat5 = new Categroy(5,"洗衣机"); List<Categroy> cats = new ArrayList<>(); cats.add(cat3);cats.add(cat4);cats.add(cat5); cat1.setChildren(cats);
Categroy cat6 = new Categroy(6,"辣条"); Categroy cat7 = new Categroy(7,"奶粉"); List<Categroy> cats1 = new ArrayList<>(); cats1.add(cat6);cats1.add(cat7); cat2.setChildren(cats1);
List<Categroy> cats2 = new ArrayList<>(); cats2.add(cat1);cats2.add(cat2); cat.setChildren(cats2);
//将树转换json String json = new ObjectMapper().writeValueAsString(cat); System.out.println(json); //将json响应给客户端 response.setCharacterEncoding("utf-8"); response.getWriter().write("["+json+"]"); } }
|
页面中的动态请求:
<script type="text/javascript"> $(document).ready(function(){ $("#t").tree({ url:"tree?op=showTree" }); }); </script> <ul id="t"></ul> |
效果: