JQuery EasyUI 的datagrid 调整Struts2的实现一 （基本实现）
ExtJS一个很好的，一个非常好的UI工具，但太庞大，太复杂了。对于一些简单的应用也没有必要使用。
最近在网上转着，发现了一款还不错的UI插件-----JQuery EasyUI。对于个人来说，对JQuery还比较熟悉，既然是基于JQuery的，也不妨试试。
JQuery EasyUI其实挺强大的，一些比较常用的比如 windows，tab，datagrid，pagination ,layout,menu,tree等都有，这已经可以构造一些比较实用的东东了。另一方面我发觉比较好的是，它的数据类型基于json数据格式。这就更另我喜悦，我个人比较喜欢这种格式。
另一方面，官方上提供的是etMVC框架，让人摸不着。这里将用struts2来实现一下。
废话不多说，先说说需要准备的东西吧：
第一步：准备阶段。
1.JQuery EasyUI 1.1.1
2.Jquery 1.4
struts2 jar包
1.****json-lib-2.2.3-jdk15.jar
2.ezmorph-1.0.6.jar
3.commons-httpclient.jar
4.commons-beanutils-1.8.0.jar
****struts2-json-plugin-2.1.8.jar
这里重中之重的是，json-lib 和 struts2-json-plugin，
这些jar包可以在struts 2.1.8 lib中找到。
~1.json-lib 是转换对象与json对象的一些操作，其中包含转换为JSONObject、JSONArray、json字符串等。
~2.struts2-json-plugn 我想很多童鞋们以前用的ajax，是直接由out对象输出json字符串吧。这样做，一则需要Servlet API，二则容易出现乱码错误，三则像datagrid中直接需要json对象，你给个字符串是不能解析的。利用这个包，可以使得action传值的时候以json字符串、JSONObject、JSONArray等多种格式传递，很方便。
第二步：编写代码
test.html
<!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>test</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<table id="test"></table>
</body>
</html>
2.test.js
$(function(){
$('#test').datagrid({
title:'My Title',//表格标题
iconCls:'icon-save',//表格图标
nowrap: false,//是否只显示一行，即文本过多是否省略部分。
striped: true,
url:'funcAction_getFunc.action', //action地址
sortName: 'parentID',
sortOrder: 'desc',
idField:'nodeID',
frozenColumns:[[
]],
columns:[[
{field:'nodeIcon',title:'图标',width:150},
{field:'parentID',title:'父节点编号',width:120},
{field:'nodeID',title:'节点编号',width:120,sortable:true},
{field:'isLeaf',title:'节点类型',width:120},
{field:'nodeText',title:'节点名称',width:120},
{field:'nodeAction',title:'连接程序',width:120},
]],
pagination:true, //包含分页
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
});
这样，在action中返回一个JSONObject，输出格式为：
{"rows":[{"isLeaf":0,"nodeAction":"","nodeID":1,"nodeIcon":"icon-sys","nodeText":"系统管理","parenetID":0},{"isLeaf":1,"nodeAction":"sys/entryM.html","nodeID":2,"nodeIcon":"icon-nav","nodeText":"栏目管理","parenetID":1}],"total":2}
所以在处理中需要这样来写
//Service中代码
public JSONObject getFuncList(){
FunctionVo func = FactoryDAO.getFuncList(); //FuncitonVo 对应功能的各个属性的封装。可以根据json格式确定需要哪些属性。
JSONObject resultObj = JSONObject.fromObject(func);
}
//action 中
public class FuncAction extends ActionSupport{
private JSONObject resultObj = null;
//省去getter setter方法。
public String execute(){
}
public String getFunc(){
this.setResultObj(FactoryService.getFuncInstance().getFuncList());
return SUCCESS;
}
}
最重要的还有一个struts.xml配置
<package name='json' extends="json-default">
...
<action name="funcAction_*" class="com.FuncAction" method="{1}>
<result name="root">resutObj</result>
</action>
...
</package>
注意：
1.extends 是json-default，表示返回json对象格式。
2.result 中name 总是等于root，
3.result包含的那个是设置的那个，action中设置了resultObj，因此这里写resultObj
这样简单的数据表格就出来了。
仅此为学习，有问题请留言。
下一次，讲 如何进行数据分页，排序 查询。