认识easyUI

第一次写博客 ,说一下easyUI

哇 ,以前写前端都是div布局 .慢慢弄样式 , 光是布局就要弄好久 .真的超级麻烦 .

第一次接触easyUI , 发现怎么会这么方便 , 标签的样式都弄好了,只要用类选择器里引入 easyUI里分
装好的样式就可以了 ,网上还有专门的中文网 http://www.jeasyui.net/ , dome和文档甚至还有教程 , 真的非常舒服了 , 然后做项目就先把前端页面设置下 ,
主要用到easyUI的布局（layout）

标签页(Tabs)

和window(窗口)

这是主要的三个装内容的容器
而主要显示在容器中的有数据网格(datagrid)
从数据查到数据 , 以json的格式写过去 , 那边用固定的格式接收每个字段 , 生成表格

增删查改按钮 , 说是按钮 ,其实是a标签 , 生成代码如下

添加

	 <a  href="javascript:void(0)" class="easyui-linkbutton" "goUpdate()"
	 data-options="iconCls:'icon-edit',plain:true">修改</a>
	 
	<a   href="javascript:void(0)" class="easyui-linkbutton" "saveUpdate()"
	 data-options="iconCls:'icon-save',plain:true">保存</a>
	 
	<a   href="javascript:void(0)" class="easyui-linkbutton" "remove()"
	 data-options="iconCls:'icon-remove',plain:true">删除</a>

我们项目还有用到的tree树

• Folder
  • Sub Folder 1
    • File 11
    • File 12
    • File 13
  • File 2
  • File 3
• File21

生成数据网格(datagrid)的时候 , 有时数据太多 , 那我们就需要分页显示 , 而easyUI有在数据网格(datagrid)有专门分页工具栏 , 也就是不需要你在页面写分页的前端了 , 而且只需要把写下分页的数据处理语句 , 然后把数据和总数据数量发过去就行了 , 而easyUI的分页工具栏 有专门的两个参数
page(分页显示的当前页)和rows(一页显示了多少条数据) , 默认是第一页和十条数据 , 直接取到这两个参数
当前页 int cp =Integer.parseInt( req.getParameter(“page”));
每页要显示的数据量 int ls =Integer.parseInt( req.getParameter(“rows”));

知道了是哪页和页面要显示的数据数量后就能知道就能算出从那条数据开始查询
sql = “select*from user limit ?,?”;

dao层的数据处理语句 , 注意limit前面是不能加where , 不能直接where limit ?,? ,
但where name like ? limit ?,?这样是可以的

后面查到数据后 , 要返回个map , map里要有固定的两个key值 ,
map.put(“total”,总数据数量);
map.put(“rows”, 一页显示的数据);

然后以json的格式写过去
PrintWriter out = resp.getWriter();
out.print(JSON.toJSON(map));
out.flush();
out.close();

记得在生成数据网格的时候把分页栏打开 , 主要有三个设置分页的 .
pagination:true, 把分页栏打开
pageSize: 5, 一页显示多少条数据
pageList: [5, 10, 15, 20, 25], 一个可以调当前页显示多少页的调框

下面是一个生成数据网格的例子

<table id="dg"></table>

效果图

第一次写博客 ,也就写了我对easyUI的了解 , 以及一些应用和一些微小的经验 . 谢谢阅读 !