最近，在项目中用到JQuery EasyUI DataGrid，它封装了表格的实现，为我们提供很多便利，让我们的开发速度有了一定的提高。（PS：我用的是spring MVC 框架 和velocity）.
注：这里简单的提下解释下velocity。velocity是基于java的一种页面模板引擎，支持#if #else #foreach等写法的前台文件。$link.contextPath是该引擎支持的一种默认写法，可以取得应用程序执行根路径。
Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象。 当Velocity应用于web开发时，界面设计人员可以和java程序开发人员同步开发一个遵循MVC架构的web站点，也就是说，页面设计人员可以只 关注页面的显示效果，而由java程序开发人员关注业务逻辑编码。Velocity将java代码从web页面中分离出来，这样为web站点的长期维护提 供了便利，同时也为我们在JSP和PHP之外又提供了一种可选的方案。 Velocity的能力远不止web站点开发这个领域，例如，它可以从模板（template）产生SQL和PostScript、XML，它也可以被当 作一个独立工具来产生源代码和报告，或者作为其他系统的集成组件使用。Velocity也可以为Turbine web开发架构提供模板服务（template service）。Velocity+Turbine提供一个模板服务的方式允许一个web应用以一个真正的MVC模型进行开发。
好的，Velocity不是今天的重点，下面开始easyUI
1、数据的提取和显示
##搜索栏
<div id="searchAccountBar" style="padding:5px;height:auto">
<form action="/dcs/yng/finance/all_account_balance/list.do" method="post" id="accountSearchForm">
<table>
<tr>
<td class="align-right">经销商代码：</td>
<td>
<input class="text-input small-input" type="text" id="agentCode" name="agentCode"
value="$!{bo.agentCode}"/>
</td>
<td class="align-right">经销商全称：</td>
<td>
<input class="text-input small-input" type="text" id="agentName" name="agentName"
value="$!bo.agentName"/>
</td>
<tr>
<button type="button" id="search">查询</button>
</td>
</tr>
</table>
</form>
</div>
上面是我们普通的搜索栏代码，下面这段代码，是table数据展示，easyui有许多封装好的属性，非常方便，我们可以根据自己的需要，来搭配属性。
<table id="accountSearchTable" class="easyui-datagrid" title="" style="height:500px"
data-options="rownumbers:true,
singleSelect:true, ##单选
url:'/dcs/yng/finance/all_account_balance/list_json.do', ##链接
toolbar:'#searchAccountBar'" ##搜索及工具栏
pagination="true" ##翻页
rownumbers="true"
showFooter="true"
fitColumns="false">
<thead data-options="frozen:true"> ##表头
<tr>
<th data-options="field:'agentName',width:225,align:'center'">经销商全称</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'agentCode',width:70,align:'center'">经销商代码</th>
<th data-options="field:'agentName',width:72,align:'center'" formatter="formatPrice">经销商名称</th>
</tr>
</thead>
</table>
这里的url,就是请求链接,当我们点击之前上面的搜索栏里，查询按钮时，就会触发我下面这个js的点击事件，然后easyui，就会根据我们配的属性，将搜索栏的参数，一起通过url,发送到后台。
$("#search_account_btn_json").click(function () {
$('#accountSearchTable').datagrid('load', {
agentCode:$('#agentCode').val(),
agentName:$('#agentName').val()
});
});
easyui 里的DataGrid,就是通过url获取数据的，。它获取的数据返回的要是json字串。JSON字串必须按照DataGrid定义的数据格式进行拼装。特别强调的是，JSON字串中的total域的值是数据的条数，用于数据的分页。
@RequestMapping("/dcs/yng/finance/all_account_balance/list_json")
public @ResponseBody
JSONObject listJson(AgentAccountBO bo,Integer page, Integer rows, Model model, HttpServletRequest request, HttpServletResponse response) {
JSONObject json = new JSONObject();
List<AgentAccountBO> list = agentAccountYNGService.query(bo);
JsonBinder binder = JsonBinder.buildNonNullBinder();
String beanString = binder.toJson(list);
json.put("rows", (null != list && !list.isEmpty())?beanString:"");
json.put("total", list.size());
return json;
}
上面这段代码，就是将list数据，拼成DataGrid定义的数据格式，数据的分页分为前台分页和后台分页，前台分页，DataGrid已经封装好了。 DataGrid定义了两个参数: rows(每页的条数)，page(当前的页数)，这两个参数分别对应属性pageSize，pageNumber。用户可以在 pageSize，pageNumber属性中设置，也可以不设置，这样就取默认值。获取数据后，DataGrid就会刷新，将后台数据在table中展示出来