Chinaunix首页 | 论坛 | 博客

大道至简 万法归宗self2012.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

keepAction

  • 博客访问： 239202
  • 博文数量： 22
  • 博客积分： 512
  • 博客等级： 下士
  • 技术积分： 242
  • 用 户 组： 普通用户
  • 注册时间： 2012-02-17 09:48
文章分类

全部博文（22）

文章存档

2013年（1）

2012年（21）

我的朋友
最近访客
推荐博文
相关博文
JQuery EasyUI 的datagrid 整合Struts2的实现一 （基本实现）

分类： 系统运维

2012-08-26 19:32:39

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

Java代码
  1. "-//W3C//DTD HTML 4.01 Transitional//EN"  "" >  
  2.   
  3.   
  4.     "Content-Type"  content="text/html; charset=UTF-8" >  
  5.     test   
  6.     "keywords"  content="keyword1,keyword2,keyword3" >  
  7.     "description"  content="this is my page" >  
  8.     "content-type"  content="text/html; charset=UTF-8" >    
  9.     "stylesheet"  type="text/css"  href="../js/themes/default/easyui.css" >  
  10.     "stylesheet"  type="text/css"  href="../js/themes/icon.css" >  
  11.       
  12.         "text/javascript"  src="../js/jquery-1.4.2.min.js" >  
  13.     "text/javascript"  src="../js/jquery.easyui.min.js" >  
  14.     "text/javascript"  src="test.js" >  
  15.       
  16.     
  17.     "test" >  
  18.      
  19.   
[java]
  1. "-//W3C//DTD HTML 4.01 Transitional//EN" "">  
  2.   
  3.   
  4.     "Content-Type" content="text/html; charset=UTF-8">  
  5.     test   
  6.     "keywords" content="keyword1,keyword2,keyword3">  
  7.     "description" content="this is my page">  
  8.     "content-type" content="text/html; charset=UTF-8">    
  9.     "stylesheet" type="text/css" href="../js/themes/default/easyui.css">  
  10.     "stylesheet" type="text/css" href="../js/themes/icon.css">  
  11.       
  12.         "text/javascript" src="../js/jquery-1.4.2.min.js">  
  13.     "text/javascript" src="../js/jquery.easyui.min.js">  
  14.     "text/javascript" src="test.js">  
  15.       
  16.     
  17.     "test">  
  18.     
  19.   
test

 2.test.js

Java代码
  1. $(function(){     
  2.             $('#test' ).datagrid({  
  3.                  title:'My Title' ,//表格标题   
  4.                  iconCls:'icon-save' ,// 表格图标   
  5.                  nowrap: false ,//是否只显示一行，即文本过多是否省略部分。   
  6.                  striped: true ,  
  7.                  url:'funcAction_getFunc.action' , //action地址   
  8.                 sortName: 'parentID' ,  
  9.                 sortOrder: 'desc' ,  
  10.                 idField:'nodeID' ,  
  11.                 frozenColumns:[[  
  12.                 ]],  
  13.                 columns:[[  
  14.                     {field:'nodeIcon' ,title:'图标' ,width:150 },  
  15.                     {field:'parentID' ,title:'父节点编号' ,width:120 },  
  16.                     {field:'nodeID' ,title:' 节点编号' ,width:120 ,sortable:true },  
  17.                     {field:'isLeaf' ,title:' 节点类型' ,width:120 },  
  18.                     {field:'nodeText' ,title:'节点名称' ,width:120 },  
  19.                     {field:'nodeAction' ,title:'连接程序' ,width:120 },  
  20.                       
  21.                 ]],  
  22.                 pagination:true , //包含分页   
  23.                 rownumbers:true ,  
  24.                 singleSelect:true ,  
  25.                 toolbar:[{  
  26.                     text:'Add' ,  
  27.                     iconCls:'icon-add' ,  
  28.                     handler:function(){  
  29.                         alert('add' )  
  30.                     }  
  31.                 },{  
  32.                     text:'Cut' ,  
  33.                     iconCls:'icon-cut' ,  
  34.                     handler:function(){  
  35.                         alert('cut' )  
  36.                     }  
  37.                 },'-' ,{  
  38.                     text:'Save' ,  
  39.                     iconCls:'icon-save' ,  
  40.                     handler:function(){  
  41.                         alert('save' )  
  42.                     }  
  43.                 }]  
  44.             });  
  45.             });  
[java]
  1. $(function(){     
  2.             $('#test').datagrid({  
  3.                  title:'My Title',//表格标题   
  4.                  iconCls:'icon-save',//表格图标   
  5.                  nowrap: false,//是否只显示一行，即文本过多是否省略部分。   
  6.                  striped: true,  
  7.                  url:'funcAction_getFunc.action', //action地址   
  8.                 sortName: 'parentID',  
  9.                 sortOrder: 'desc',  
  10.                 idField:'nodeID',  
  11.                 frozenColumns:[[  
  12.                 ]],  
  13.                 columns:[[  
  14.                     {field:'nodeIcon',title:'图标',width:150},  
  15.                     {field:'parentID',title:'父节点编号',width:120},  
  16.                     {field:'nodeID',title:'节点编号',width:120,sortable:true},  
  17.                     {field:'isLeaf',title:'节点类型',width:120},  
  18.                     {field:'nodeText',title:'节点名称',width:120},  
  19.                     {field:'nodeAction',title:'连接程序',width:120},  
  20.                       
  21.                 ]],  
  22.                 pagination:true, //包含分页   
  23.                 rownumbers:true,  
  24.                 singleSelect:true,  
  25.                 toolbar:[{  
  26.                     text:'Add',  
  27.                     iconCls:'icon-add',  
  28.                     handler:function(){  
  29.                         alert('add')  
  30.                     }  
  31.                 },{  
  32.                     text:'Cut',  
  33.                     iconCls:'icon-cut',  
  34.                     handler:function(){  
  35.                         alert('cut')  
  36.                     }  
  37.                 },'-',{  
  38.                     text:'Save',  
  39.                     iconCls:'icon-save',  
  40.                     handler:function(){  
  41.                         alert('save')  
  42.                     }  
  43.                 }]  
  44.             });  
  45.             });  
$(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，输出格式为：

Java代码
  1. {"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 }  
[java]
  1. {"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}


所以在处理中需要这样来写

Java代码
  1. //Service中代码   
  2. public  JSONObject getFuncList(){  
  3. FunctionVo func = FactoryDAO.getFuncList(); //FuncitonVo 对应功能的各个属性的封装。可以根据json格式确定需要哪些属性。   
  4. JSONObject resultObj = JSONObject.fromObject(func);  
  5. }  
  6.   
  7. //action 中   
  8. public  class  FuncAction extends  ActionSupport{  
  9. private  JSONObject resultObj = null ;  
  10. //省去getter setter方法。   
  11. public  String execute(){  
  12. }  
  13.   
  14. public  String getFunc(){  
  15.    this .setResultObj(FactoryService.getFuncInstance().getFuncList());    
  16.    return  SUCCESS;  
  17. }  
  18.    
  19. }  
[java]
  1. //Service中代码   
  2. public JSONObject getFuncList(){  
  3. FunctionVo func = FactoryDAO.getFuncList(); //FuncitonVo 对应功能的各个属性的封装。可以根据json格式确定需要哪些属性。   
  4. JSONObject resultObj = JSONObject.fromObject(func);  
  5. }  
  6.   
  7. //action 中   
  8. public class FuncAction extends ActionSupport{  
  9. private JSONObject resultObj = null;  
  10. //省去getter setter方法。   
  11. public String execute(){  
  12. }  
  13.   
  14. public String getFunc(){  
  15.    this.setResultObj(FactoryService.getFuncInstance().getFuncList());    
  16.    return SUCCESS;  
  17. }  
  18.    
  19. }  
//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配置


Java代码
  1. <package  name='json'  extends ="json-default" >  
  2.   
  3. ...  
  4. "funcAction_*"  class ="com.FuncAction"  method="{1 }>  
  5.     "root" >resutObj  
  6.   
  7.   
  8. ...  
  9. package >  
[java]
  1. <package name='json' extends="json-default">  
  2.   
  3. ...  
  4. "funcAction_*" class="com.FuncAction" method="{1}>  
  5.     "root">resutObj  
  6.   
  7.   
  8. ...  
  9. package>  
... resutObj ...

 

注意：

1.extends 是json-default，表示返回json对象格式。

2.result 中name 总是等于root，

3.result包含的那个是设置的那个，action中设置了resultObj，因此这里写resultObj

 

这样简单的数据表格就出来了。

 

仅此为学习，有问题请留言。

阅读(8253) | 评论(1) | 转发(0) |
0

上一篇：使用HttpClient发送GET、POST请求

下一篇：linux下启动MYSQL服务器以及配置自启动命令

给主人留下些什么吧！~~

qqqwz2015-05-02 20:00:01

这个不完整，看了浪费时间，建议不要看

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6