写在最前：
如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统，第一次接触到EasyUI的时候，往往会有一个大大的疑问，这EasyUI是如何做跳转的啊？增删改查都不知道如何下手了！但是当你知道有RestFul编程的时候。你会恍然大悟：我靠，RestFul+EasyUI简直就是绝配呀！博主就是如此：在写完一个增删改查之后，才发现EasyUI越学越有意思，页面都是靠局部刷新来动态展示数据，这比页面跳转要快的多。不用考虑跳转到哪个视图，也不用重定向和转发，纯静态的html据说能让你的网页快速相应！博主是边做项目边学习同时，貌似摸到了学习的乐趣与门路，于是乎下定决心写这一系列EasyUI文章，以供后来者当作学习案例，同时也供其他Coder/Pragrammer提供解决方案。博主不敢说写出来的文章是最好的，技术总结最权威的，文笔最流畅的，但绝对保证实验是运行通过的，文章是一字一句码出来的！拒绝做Copy党。如果你觉得本系列博客技术含量不高，不够逼格，请一谂而视之，毕竟每个人都是从菜鸟阶段过来的。如果你觉得文章对你有帮助，无需通知笔者直接转载，转载时请著名出处。
每当学习一门新的技术之初，第一个程序都应当从HelloWorld开始写起，但是EasyUI应该不是属于新的技术，只是把UI界面紧密的结合jQuery绑定的事件做了封装。如果你拥有Html、Css、JavaScript、jQuery基础，那么我觉得从下面这个案例当作EasyUI的HelloWorld程序也没什么问题：
<%@ page language="java" contentType="text/html; charset=UTF-8"
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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo1</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/jquery-1.7.2.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/themes/icon.css" type="text/css"/>
</head>
<body>
<table id="userList" class="easyui-datagrid" style="width:600px;height:250px"
title="用户列表" iconCls="icon-save">
<thead>
<tr>
<th field="productid" width="80" align="center">学号</th>
<th field="listprice" width="80" align="center">姓名</th>
<th field="unitcost" width="80" align="center">性别</th>
<th field="attr1" width="150" algin="center">生日</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>宋江</td>
<td>男</td>
<td>1990-01-01</td>
</tr>
<tr>
<td>2</td>
<td>林冲</td>
<td>男</td>
<td>1992-01-01</td>
</tr>
<tr>
<td>3</td>
<td>吴用</td>
<td>男</td>
<td>1993-01-01</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
</script>
</html>在你把上诉代码进行拷贝之前，首先得引入EasyUI的必须文件:
1. jquery-1.7.2.min.js
2. jquery.easyui.min.js
3. easyui-lang-zh_CN.js
4. easyui.css
5. icon.css嗯，如果你已经知道要使用别人的框架首先要引入框架对应的包这个开发界的真理，那么就可以直接将上诉代码Copy进你的Html/Jsp页面了。如果你不知道在哪下载最新的包，那么麻烦伸伸手，动动你的小鼠标，猛戳EasyUI中文官网。
现在我们来观察第一个程序的代码：EasyUI的datagrid就是一个table标签，套用了class为"easyui-datagrid"而已。得到的界面如下：
这里用到的table的th,td标签，easyui会帮你渲染表格投和表格题的样式。当然，我们在开发中不可能写一个死的table表格，经常需要从后台传来一个集合类型数据列表，然后循环迭代的显示到页面。如果你用过Spring Mvc，我建议你用标签来做循环迭代。
<table id="userList" class="easyui-datagrid" style="width: 1288px;height:420px;" title="用户列表"
pagination="true" singleSelect="true" rownumbers="true" >
<thead>
<tr>
<th field="id" width="100px;">用户ID</th>
<th field="name" align="center" width="100px;">用户名</th>
<th field="loginName" align="center" width="100px;">登录名</th>
<th field="password" width="100px;">密码</th>
<th field="gender" align="center" width="75px;" formatter="formatter">性别</th>
<th field="phoneNumber" width="100px;">手机号码</th>
<th field="email" width="200px;">电子邮箱</th>
<th field="description" width="290px">备注</th>
</tr>
</thead>
<tbody>
<c:forEach items="${pager.datas }" var="data">
<tr>
<td>${data.id }</td>
<td>${data.name }</td>
<td>${data.loginName }</td>
<td>${data.password }</td>
<td>${data.gender }</td>
<td>${data.phoneNumber }</td>
<td>${data.email }</td>
<td>${data.description }</td>
</tr>
</c:forEach>
</tbody>
</table>看到没有？这与我们平常用的JSTL表达式没有什么区别两样，只不过是套了一层UI。这时候你的Controller需要把集合类型变量放进Model或者ModelAndView又或者是request的属性里面，总之就是让jsp页面拿到pager.datas列表属性的意思。
可是我们推荐使用用纯html来开发前端页面啊，因为不需要跳转，局部刷新，html可以直接渲染元素嘛，自然而然要比jsp+mvc跳转要快的多。当你的前端页面是纯html的时候怎么做呢？翻开你的EasyUI API手册，你会发现，这个组件有个url属性，就是让来加载数据的，但是这里加载的数据是json格式的。
我们来模拟一个Json数据：
{
"total": 3,
"rows": [{
"id": 1,
"name": "宋江",
"sex":"male",
"birthday":"1992-01-01 01:01:01",
"remark":"宋大哥"
},
{
"id": "2",
"name": "吴用",
"sex":"male",
"birthday":"1993-01-01 02:02:03",
"remark":"智多星"
},
{
"id": "3",
"name": "孙二娘",
"sex":"female",
"birthday":"1994-01-01 23:11:23",
"remark":""
}
]
}我们的重点是放在前端页面，能够尽量屏蔽后台的代码就屏蔽掉后台的代码，毕竟博主是Java Coder,或许读者你是phper呢？把我们构造的json放在datagrid_json.json文件里面，加载你的json数据：
<table id="userList" class="easyui-datagrid" style="width:600px;height:250px"
title="用户列表" iconCls="icon-save" url="datagrid_data.json">
<thead>
<tr>
<th field="id" width="80" align="center">学号</th>
<th field="name" width="80" align="center">姓名</th>
<th field="sex" width="80" align="center">性别</th>
<th field="birthday" width="150" algin="center">生日</th>
<th field="remark" width="150" algin="left">备注</th>
</tr>
</thead>
</table>这里需要解释一下：th标签的field值就是你json串数组里面的键值名称，th里面field的值id,name,sex,birthday,和remark与json的键一一对应，如果没有出错的话，你的页面应该如下所示：
上诉表格也可以用JavaScript代码生成， html代码很简单，就只需要你在body标签里面写一个table标签，然后接下来的事都交给jQuery/JavaScript来完成。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo1</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/jquery-1.7.2.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/themes/icon.css" type="text/css"/>
</head>
<body>
<table id="userList"></table>
</body>
<script type="text/javascript">
$(function(){
$("#userList").datagrid({
title:'用户列表'
});
});
</script>
</html>上诉代码中$(function(){})的含义是当html加载完毕就执行代码，想必你已经知道了，那么接下来的
$("#userList").datagrid({ title:'用户列表' });
就是一个datagrid组件了，这个组件只有一个表格的标题："用户列表"，如图所示：
好了，我们视图向着这个datagrid添加一些东西，让列表的内容丰富起来。首先的加入url属性是不？如果你的url写正确了，这时候json串已经拿到了，接下来就应该显示这些数据了，datagrid里面有一个columns属性，该属性对应的是以为二维数组，为什么要做一个二维数组？这是为了做复杂的列表头，如合并行，合并列等复杂操作。然后你现在所需要的仅仅是：
columns:[[
{field:'id',title:'ID',width:80,align:'center'}
]]field的值自然就行json键的名称了，title是标题头的列名称,width是宽度,align是文字对齐方式，ID这一列自然是居中对齐为好，但是并非每一列都是居中对齐，例如remark备注这一列，字符串个数参差不齐，最好还是左对齐比较美观。
$(function(){
$("#userList").datagrid({
title:'用户列表',
url:'datagrid_data.json',
columns:[[
{field:'id',title:'ID',width:80,align:'center'},
{field:'name',title:'姓名',width:80,align:'center'},
{field:'sex',title:'性别',width:80,align:'center'},
{field:'birthday',title:'出生日期',width:150,align:'center'},
{field:'remark',title:'备注',width:400,align:'left'}
]]
});
});我已经把要显示的5列都展示出来了，效果如图所示：
上诉提供了datagrid三种循环迭代数据列表的方法，我相信总有一款是适合你的。如果你自己动手完成了上诉实验，那么我觉得你已经具备了EasyUI入门的实力了，接下来我们就要进入EasyUI的世界了。