easy原理與理解，EasyUI怎麼應用？author:songfuwfei
使用easyUI主要有這麼幾個步驟，首先是通過引入layout來進行頁面的整體佈局，然後用Layout進行頁面佈局（主要有北，西，中間幾個區域）西邊區域用於選單展示,然後我左邊用的是ztree樹,
出於安全考慮，我們首先做的是許可權，不同角色的人登入應該看到不同的許可權和內容，許可權通常有3,5,7張表甚至更多來完成，我們當時用了五張，包括員工資訊表、角色資訊表、許可權資訊表和兩張中間關係表：一張員工角色關係表，一張角色許可權關係表。可以對使用者賦角色，然後角色賦許可權，許可權表裡存著不同的許可權的url，當用戶登入時，從session中獲取使用者id，通過使用者id獲取使用者的所有角色id，再通過角色id獲取所有許可權url。把當前使用者的許可權資訊用ztree以樹形結構展示，就實現了不同的人登入展示不同的許可權樹。（當然，在這裡可能有一些安全問題，就是使用者直接在瀏覽器輸入非法許可權的url執行非法操作的問題，我們採用filter攔截器在使用者執行操作時先判斷該使用者有無該許可權的url，在有許可權的情況下才放行，否則提示非法操作，並且終止該操作）。同時我們對選單樹進行了快取（Ehcahe）。
然後點選tree節點的時候會動態載入tab選項卡，在實現這個功能的過程中，我們組有個新人因為沒有注意就出現了每次點選同一個節點再次新增同一個tab選項卡。這是因為他沒有通過'exists'方法判定來檢視選擇的選項卡面板是否已存在，如果存在就不應該讓這個選項卡再次展開。在做到datagrid的時候，這個同事也遇到了一些問題，就是訪問頁面的時候會自動檢索兩次資料庫，我在檢查他程式碼的時候發現他分別在html標籤和js程式碼中都引用了一次datagrid,只要刪掉其中一個這個問題就解決了。
EasyUI怎麼應用？
author:songfuwfei
1.先在myeclipse搭好一個ssm的框架。
2.在mysql裡面建好需求表。
3.建立好表，搭好框架寫個index檔案跑一下專案看框架好使不。
4.匯入一些 css js 小圖示 外掛放到webRoot下面新創的資料夾下 3rd-party下面新創的easyUI下面。
5.往index頁面匯入這些css js 樣式的路徑：
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd-party/easyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd-party/easyUI/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd-party/easyUI/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd-party/easyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd-party/easyUI/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>
6.上面5步完成後我們在index頁面取得了EasyUI的樣式，表格中沒有資料那麼我們把後臺寫完整。
該寫什麼呢？無非就是列表增刪改。。。
7.寫完後臺操作 用EasyUI展示列表。
8.index頁面程式碼如下使用javascript去建立DataGrid控制元件（API裡有一些列子和屬性可以引用）：
<body>
<table id="dg"></table>
</body>
9.如下程式碼寫在webRoot下新建一個檔案在新建一個js頁面
$(function(){
$('#dg').datagrid({
url:'goods/Goodslist.do',//------>後臺列表路徑
// -----------------------------------------------------------------------------------------
columns:[[
{field:'gid',title:'商品編號',width:100},
{field:'gname',title:'商品名稱',width:100},
{field:'gprice',title:'商品價格',width:100},
{field:'gcount',title:'商品庫存',width:100},
{field:'gcontent',title:'商品簡介',width:100},
{field:'gdate',title:'上架日期',width:100},
{field:'gphoto',title:'圖片路徑',width:100}
]] ,
title:"商品列表",
width:"700px",
height:"400px",
fitColumns:true，
pagination:true，//顯示分頁工具欄
pageSize:5,//分頁預設每頁5條資料
pageList:[5,10,15,20]， //設定分頁每頁條數
rownumbers:true,
toolbar: [{
text:'新增商品',
iconCls: 'icon-add',
handler: function(){
$('#ff').form('clear');
$("#dd").dialog({title:'新增商品'});
$('#dd').dialog('open');
}
},'-',{
text:'刪除商品',
iconCls: 'icon-cut',
handler: function(){
var row = $("#dg").datagrid("getSelected");
if(row!=null){
$.ajax({
type:"post",
url:"goods/deleteGoods.action",
data:{gid:row.gid},
dataType:"json",
success:function (flag){
if(flag){
alert("成功！");
$('#dg').datagrid('reload');
}else{
alert("失敗！");
}
}
});
}else{
alert("請選擇一行資料！");
}
}
},'-',{
text:'修改商品',
iconCls: 'icon-edit',
handler: function(){
var row = $("#dg").datagrid("getSelected");
if(row==null){
alert("請選擇一行資料！");
}else{
$("#dd").dialog({title:'修改商品'});
$("#ff").form("load",row);
$("#dd").dialog("open");
}
}
}],
singleSelect:true
});
$('#dd').dialog({
width: 400,
height: 280,
closed: true
});
});
function submitForm(){
$.ajax({
type:"post",
url:"goods/insertGoods.action",
data:$("#ff").serialize(),
dataType:"json",
success:function (flag){
if(flag){
alert("成功！");
$('#dd').dialog('close');
$('#dg').datagrid('reload');
}else{
alert("失敗！");
}
}
});
}
});
});
10.寫完以上東西 泡一下專案 在瀏覽器中執行一下如果出現亂碼我們需要設定一下js頁面的程式碼格式
點選頂端window，再點選最底端prefenerces，點進去你會看到Content Types點選它選擇Text
裡面你會看到兩個javaScriptSource file 點選它底部有一個D開頭的方框裡改一下編碼格式
寫上utf-8 然後點選右邊的update 再點選ok 兩個都需要改哦。
11.改好上面的程式碼再次執行tomcat泡一下專案在瀏覽器中執行完成EasyUI簡單列表展示.
EasyUI分頁
12.在上面列表的基礎上新增分頁。
13.檢視API文件 裡面有個分頁工具欄屬性pagination 把它設定在上面第9步的屬性裡 如上 但是經過本人親自驗證發現有個小bug 就是
當你設定完如上pagination:true程式碼時泡一下專案發現在瀏覽器中取不到底部分頁工具導向 這是為什麼呢 是因為mysql中表中資料
太少你要寫大於十條資料（這是當時我的bug）。
14.如果想讓資料和分頁工具欄同步 那麼 傳輸給頁面的資料，必須按照easyUI分頁工具欄能解析的格式進行傳遞
easyUI分頁工具欄需要2組資料：
1.total:總條數
2.rows:分頁之後的資料集合
15.明白上面的道理接下來我們就來寫controller等等分層裡面的程式碼：
16.controller層程式碼如下：
@Controller
@RequestMapping("goods")
public class GoodsController {
@Autowired
private GoodsService goodsService;
@RequestMapping("Goodslist")
@ResponseBody
public Map<String,Object> Goodslist(int page,int rows){
int count =goodsService.Goodscount();
List list =goodsService.Goodslist(page,rows);
//select * from 表 limit （頁數-1）*每頁條數,每頁條數
//頁數（page） 每頁多少條(rows) 索引
//1 5 0=0*5
//2 5 5=1*5
//3 5 10=2*5
//索引=（頁數-1）*每頁條數
Map<String,Object> map = new HashMap<String,Object>();
map.put("total", count);
map.put("rows", list);
return map;
}
}
service層程式碼如下：
@Service
public class GoodsService {
@Autowired
private GoodsDao goodsDao;
public List Goodslist(int page, int rows) {
Map<String, Integer> map = new HashMap<String, Integer>();
map.put("index", (page-1)*rows);
map.put("rows", rows);
return goodsDao.Goodslist(map);
}
public int Goodscount() {
return goodsDao.Goodscount();
}
}
dao層我就不寫了。。。。。。。
Mapper層：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.baidu.dao.GoodsDao">
<select id="Goodslist" resultType="Goods" parameterType="map" >
select * from tb_goods limit #{index},#{rows}
</select>
<select id="Goodscount" resultType="Integer">
select count(gid) from tb_goods
</select>
</mapper>
17.寫完跑一下專案在瀏覽器中執行 完成列表分頁功能了。
EasyUI增刪改
EasyUI刪除功能講解：
當作刪除時我們要選中一天資料刪除
controller層程式碼如下：
@RequestMapping("deleteGoods")
@ResponseBody
public Boolean deleteGoods(Goods goods){
int i = goodsService.deleteGoods(goods);
if(i>0){
return true;
}else{
return false;
}
}
Mapper層：
<delete id="deleteGoods" parameterType="Goods" >
delete from tb_goods where gid=#{gid}
</delete>
EasyUI 新增和修改
做一種簡單的方法 讓新增和修改做一個後臺那麼我們就得判斷：
@RequestMapping("addGoods")
@ResponseBody
public Boolean addGoods(Goods goods){
int i = 0;
if(goods.getGid()==null){//當id等於null 時做新增
i = goodsService.addGoods(goods);
}else{
i = goodsService.updateGoods(goods);//當id不等於null 時做修改
}
if(i>0){
return true;
}else{
return false;
}
}
如果新增雙表聯查的話下拉框 寫活 找到相應得表：
<tr>
<td>商品型別:</td>
<td>
<input class="easyui-combobox" name="gtid" data-options="url:'../goods/getGoodsTypeList.action',method:'get',valueField:'gtid',textField:'gtname',multiple:false,panelHeight:'auto'">
</td>
</tr>
EasyUI 東西南北樣式：
api樣式
from表單樣式
<div id="dd">
<form id="ff" method="post">
<table cellpadding="5">
<tr>
<td> :<input type="hidden" name="id"/></td>
<td><input class="easyui-textbox" type="text" name="sid" data-options="required:true" style="width: 230px;"></input></td>
</tr>
<tr>
<td> :</td>
<td>
<input class="easyui-combobox" name="cid" data-options="url:'student/Typelist.do',method:'get',valueField:'cid',textField:'cname',multiple:false,panelHeight:'auto'">
</td>
</tr>
<tr>
<td> :</td>
<td><input class="easyui-textbox" type="text" name="shtime" data-options="required:true" style="width: 230px;"></input></td>
</tr>
<tr>
<td> :</td>
<td><input class="easyui-textbox" type="text" name="flag" data-options="multiline:true" style="height:60px; width: 230px;"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">儲存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>
</div>
</div>