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
- "-//W3C//DTD HTML 4.01 Transitional//EN" "" >
-
-
- "Content-Type" content="text/html; charset=UTF-8" >
- test
- "keywords" content="keyword1,keyword2,keyword3" >
- "description" content="this is my page" >
- "content-type" content="text/html; charset=UTF-8" >
- "stylesheet" type="text/css" href="../js/themes/default/easyui.css" >
- "stylesheet" type="text/css" href="../js/themes/icon.css" >
-
-
-
-
-
-
-
-
-
- "-//W3C//DTD HTML 4.01 Transitional//EN" "">
-
-
- "Content-Type" content="text/html; charset=UTF-8">
- test
- "keywords" content="keyword1,keyword2,keyword3">
- "description" content="this is my page">
- "content-type" content="text/html; charset=UTF-8">
- "stylesheet" type="text/css" href="../js/themes/default/easyui.css">
- "stylesheet" type="text/css" href="../js/themes/icon.css">
-
-
-
-
-
-
-
-
-
test
2.test.js
- $(function(){
- $('#test' ).datagrid({
- title:'My Title' ,
- iconCls:'icon-save' ,
- nowrap: false ,
- striped: true ,
- url:'funcAction_getFunc.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' )
- }
- }]
- });
- });
- $(function(){
- $('#test').datagrid({
- title:'My Title',
- iconCls:'icon-save',
- nowrap: false,
- striped: true,
- url:'funcAction_getFunc.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')
- }
- }]
- });
- });
$(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 }
- {"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}
{"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}
所以在处理中需要这样来写
-
- public JSONObject getFuncList(){
- FunctionVo func = FactoryDAO.getFuncList();
- JSONObject resultObj = JSONObject.fromObject(func);
- }
-
-
- public class FuncAction extends ActionSupport{
- private JSONObject resultObj = null ;
-
- public String execute(){
- }
-
- public String getFunc(){
- this .setResultObj(FactoryService.getFuncInstance().getFuncList());
- return SUCCESS;
- }
-
- }
-
- public JSONObject getFuncList(){
- FunctionVo func = FactoryDAO.getFuncList();
- JSONObject resultObj = JSONObject.fromObject(func);
- }
-
-
- public class FuncAction extends ActionSupport{
- private JSONObject resultObj = null;
-
- public String execute(){
- }
-
- public String getFunc(){
- this.setResultObj(FactoryService.getFuncInstance().getFuncList());
- return SUCCESS;
- }
-
- }
//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" >
-
- ...
- "funcAction_*" class ="com.FuncAction" method="{1 }>
- "root" >resutObj
-
-
- ...
- package >
- <package name='json' extends="json-default">
-
- ...
- "funcAction_*" class="com.FuncAction" method="{1}>
- "root">resutObj
-
-
- ...
- package>
...
resutObj
...
注意:
1.extends 是json-default,表示返回json对象格式。
2.result 中name 总是等于root,
3.result包含的那个是设置的那个,action中设置了resultObj,因此这里写resultObj
这样简单的数据表格就出来了。
仅此为学习,有问题请留言。