程序博客网 > ifconfig 查看mac

JQuery EasyUI 的datagrid 整合Struts2的实现一 （基本实现）

来源：互联网 发布：ifconfig 查看mac 编辑：程序博客网 时间：2024/06/05 03:01

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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd" >  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type"  content="text/html; charset=UTF-8" >  
  5.     <title>test</title>   
  6.     <meta http-equiv="keywords"  content="keyword1,keyword2,keyword3" >  
  7.     <meta http-equiv="description"  content="this is my page" >  
  8.     <meta http-equiv="content-type"  content="text/html; charset=UTF-8" >    
  9.     <link rel="stylesheet"  type="text/css"  href="../js/themes/default/easyui.css" >  
  10.     <link rel="stylesheet"  type="text/css"  href="../js/themes/icon.css" >  
  11.       
  12.         <script type="text/javascript"  src="../js/jquery-1.4.2.min.js" ></script>  
  13.     <script type="text/javascript"  src="../js/jquery.easyui.min.js" ></script>  
  14.     <script type="text/javascript"  src="test.js" ></script>  
  15.   </head>    
  16.   <body>  
  17.     <table id="test" ></table>  
  18.   </body>  
  19. </html>  

 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.             });  



这样，在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. //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. }  


 最重要的还有一个struts.xml配置


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

 

注意：

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

2.result 中name 总是等于root，

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

 

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

 

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

 

 

ifconfig 查看mac ifconfig 查看mac
原创粉丝点击
热门IT博客
淘宝特百惠是正品吗淘宝特百惠是正品吗
2016阿里巴巴刷单软件2016阿里巴巴刷单软件
vb 大规模数组赋值
服装销售软件排行
二维变换矩阵
小乃海苔便当知乎
无间道天台对白 知乎
淘宝店级别怎么分
boundgods能从淘宝买吗
如何预防不良网络借贷
金山数据大师破解版
淘宝店怎样认证
mac设置桌面应用
耳机频响测试软件
java培训一般价格
青柠软件密码
房子装修软件app
尼泊尔 知乎
仿58同城网微招聘源码
windows的运行在哪里
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 肉夹馍烤炉 火锅烤炉桌 叫花鸡烤炉 烤炉价格 烤炉机 气烤炉 大型烤炉 电子烤炉 烤炉图片及价格 羊肉串电烤炉价格 烤炉箱哪个牌子好 户外燃气烤炉 无烟碳烤炉图片 kaolu 烤箱价格及图片 美的烤箱价格 格兰仕电烤箱 考箱多少钱 格兰仕电烤箱价格表 烤箱排名 电烤箱怎么用 烤箱哪个牌子的好 烤红薯 烤箱 什么烤箱好 烤箱排行榜 烤箱价格 烤箱的价格 烤箱价格表 烤箱什么品牌好 电烤箱品牌 面包机哪个牌子好 烤箱菜谱 烤箱哪种牌子好 电烤箱的价格 工业烤箱价格 烤箱 九阳电烤箱 家用电烤箱价格 电烤箱价格 大型电烤箱 烤箱哪个品牌好

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里