Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【二】
2013-06-13 13:36
435 查看
三、加入Struts2框架
1、准备工作添加jar文件如下:
org.springframework.web-3.0.5.RELEASE.jar
org.springframework.aop-3.0.5.RELEASE.jar
这2个jar包是spring的context所依赖的jar包
struts2-spring-plugin-2.2.3.jar是struts整合spring的jar包
2、在web.xml加入struts2的控制器
<filter>
<filter-name>struts2filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcherfilter-class>
filter>
<filter-mapping>
<filter-name>struts2filter-name>
<url-pattern>/*url-pattern>
filter-mapping>
3、在src目录添加struts.xml
xmlversion="1.0"encoding="UTF-8"?>
DOCTYPEstrutsPUBLIC
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constantname="struts.i18n.encoding"value="UTF-8"/>
<packagename="ssMyBatis"extends="struts-default">
package>
struts>
启动后,可以看到首页index的页面就基本整合完成。
4、首先看看Action代码,代码如下:
packagecom.hoo.action;
importjava.util.ArrayList;
importjava.util.List;
importjavax.inject.Inject;
importjavax.inject.Named;
importorg.springframework.stereotype.Component;
importcom.hoo.biz.AccountBiz;
importcom.hoo.entity.Account;
importcom.opensymphony.xwork2.ActionSupport;
/**
*function:AccountAction
*@authorhoojo
*@createDate2011-5-11下午12:03:05
*@fileAccountAction.java
*@packagecom.hoo.action
*@projectS2SMyBatis
*@blog'target='_blank'>http://blog.csdn.net/IBM_hoojo[/code] *@emailhoojo_@126.com*@version1.0*/@ComponentpublicclassAccountActionextendsActionSupport{/***@authorHoojo*/privatestaticfinallongserialVersionUID=-973535478139284399L;@Inject@Named("accountBiz")privateAccountBiz<Account>biz;privateAccountacc;privateList<Account>results=newArrayList<Account>();publicList<Account>getResults(){returnresults;}publicAccountgetAcc(){returnacc;}publicvoidsetAcc(Accountacc){this.acc=acc;}publicStringadd()throwsException{if(!biz.addAccount(acc)){this.addActionMessage("添加数据失败");returnERROR;}returnSUCCESS;}publicStringshow()throwsException{results=biz.getList();return"show";}publicStringremove()throwsException{returnSUCCESS;}publicStringedit()throwsException{returnSUCCESS;}publicStringtreeData()throwsException{results=biz.getList();return"tree";}}
这个Action被注解成Component,那么在spring的applicationContext配置文件中就不需要进行标签的配置了。上面注入了AccountDao,完成相关操作。
5、由于Struts2要和Spring进行整合,所以struts的配置会有点不同<actionname="account"class="accountAction"><resulttype="redirect">account!show.actionresult><resultname="show">/show.jspresult>action>
上面的class不再是AccountAction的classpath,而是spring容器中配置的bean。就是通过@Component注解过的AccountAction,被注解注释过后它的id默认是类名称首字母小写。所以上面的action的配置是accountAction。
6、由于要整合ExtJS,所以这里用到struts2-json-plugin-2.2.3.jar这个插件,将其加入到lib库中,struts.xml更改成:xmlversion="1.0"encoding="UTF-8"?>DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN""http://struts.apache.org/dtds/struts-2.0.dtd"><struts><constantname="struts.i18n.encoding"value="UTF-8"/><packagename="ssMyBatis"extends="json-default"><global-results><resultname="error">/error.jspresult>global-results><actionname="account"class="accountAction"><resulttype="redirect">account!show.actionresult><resultname="show">/show.jspresult><resultname="tree"type="json"><paramname="excludeProperties">accparam>result>action>package>struts>
AccountAction中的treeData方法返回的tree,在account这个action配置中找到tree的result,将result的type配置成json。表示该result的数据以json的方式展示。tree这个result还配置了一个param,名称为excludeProperties表示排除的属性。这个参数将排除当前Action中的acc属性。也就是说这个属性将不会得到json的转换。其他属性将会被转换成json。
7、前台页面
index.jsp<body><ahref="account!show.action">显示所有a><br><ahref="add.jsp">添加数据a><br/><ahref="account!treeData.action">JSONa><br/>body>
show.jsp<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%@taglibprefix="s"uri="/struts-tags"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><basehref="<%=basePath%>"><title>showalldata</title><metahttp-equiv="pragma"content="no-cache"><metahttp-equiv="cache-control"content="no-cache"><metahttp-equiv="expires"content="0"></head><body><s:iteratorvalue="results"status="s"var="data">${data}<===><s:propertyvalue="#data.accountId"/>#<s:propertyvalue="#data.username"/>#<s:propertyvalue="#data.password"/>#<s:propertyvalue="#data.createTime"/>#<s:datename="#data.createTime"format="yyyy-MM-dd"/>#<ahref="account!remove.action">删除</a>|<ahref="account!edit.action">修改</a><br/></s:iterator></body></html>
Struts标签和OGNL表达式显示数据
add.jsp<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%@taglibprefix="s"uri="/struts-tags"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><basehref="<%=basePath%>"><title>add</title><metahttp-equiv="pragma"content="no-cache"><metahttp-equiv="cache-control"content="no-cache"><metahttp-equiv="expires"content="0"></head><body><s:formaction="account!add.action"method="post"><s:textfieldname="acc.username"/><s:passwordname="acc.password"/><s:submitvalue="提交"></s:submit></s:form></body></html>1、添加ext的库,版本是2.2.2
四、整合ExtJS
需要添加column-tree.css/**ExtJSLibrary2.2.1*Copyright(c)2006-2009,ExtJS,LLC.*licensing@extjs.com**'target='_blank'>http://extjs.com/license[/code] */.x-column-tree.x-tree-node{zoom:1;}.x-column-tree.x-tree-node-el{/*border-bottom:1pxsolid#eee;borders?*/zoom:1;}.x-column-tree.x-tree-selected{background:#d9e8fb;}.x-column-tree.x-tree-nodea{line-height:18px;vertical-align:middle;}.x-column-tree.x-tree-nodeaspan{}.x-column-tree.x-tree-node.x-tree-selectedaspan{background:transparent;color:#000;}.x-tree-col{float:left;overflow:hidden;padding:01px;zoom:1;}.x-tree-col-text,.x-tree-hd-text{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;padding:3px3px3px5px;white-space:nowrap;font:normal11pxarial,tahoma,helvetica,sans-serif;}.x-tree-headers{background:#f9f9f9url(../ext2/resources/images/default/grid/grid3-hrow.gif)repeat-x0bottom;cursor:default;zoom:1;}.x-tree-hd{float:left;overflow:hidden;border-left:1pxsolid#eee;border-right:1pxsolid#d0d0d0;}.task{background-image:url(../shared/icons/fam/cog.png)!important;}.task-folder{background-image:url(../shared/icons/fam/folder_go.png)!important;}
Ext.tree.ColumnTree.js/**ExtJSLibrary2.2.1*Copyright(c)2006-2009,ExtJS,LLC.*licensing@extjs.com**'target='_blank'>http://extjs.com/license[/code] */Ext.tree.ColumnTree=Ext.extend(Ext.tree.TreePanel,{lines:false,borderWidth:Ext.isBorderBox?0:2,//thecombinedleft/rightborderforeachcellcls:'x-column-tree',onRender:function(){Ext.tree.ColumnTree.superclass.onRender.apply(this,arguments);this.headers=this.body.createChild({cls:'x-tree-headers'},this.innerCt.dom);varcols=this.columns,c;vartotalWidth=0;for(vari=0,len=cols.length;i<len;i++){c=cols[i];totalWidth+=c.width;this.headers.createChild({cls:'x-tree-hd'+(c.cls?c.cls+'-hd':''),cn:{cls:'x-tree-hd-text',html:c.header},style:'width:'+(c.width-this.borderWidth)+'px;'});}this.headers.createChild({cls:'x-clear'});//preventfloatsfromwrappingwhenclippedthis.headers.setWidth(totalWidth);this.innerCt.setWidth(totalWidth);}});Ext.tree.ColumnNodeUI=Ext.extend(Ext.tree.TreeNodeUI,{focus:Ext.emptyFn,//preventoddscrollingbehaviorrenderElements:function(n,a,targetNode,bulkRender){this.indentMarkup=n.parentNode?n.parentNode.ui.getChildIndent():'';vart=n.getOwnerTree();varcols=t.columns;varbw=t.borderWidth;varc=cols[0];varbuf=['<liclass="x-tree-node"><divext:tree-node-id="',n.id,'"class="x-tree-node-elx-tree-node-leaf',a.cls,'">','<divclass="x-tree-col"style="width:',c.width-bw,'px;">','<spanclass="x-tree-node-indent">',this.indentMarkup,"</span>",'<imgsrc="',this.emptyIcon,'"class="x-tree-ec-iconx-tree-elbow">','<imgsrc="',a.icon||this.emptyIcon,'"class="x-tree-node-icon',(a.icon?"x-tree-node-inline-icon":""),(a.iconCls?""+a.iconCls:""),'"unselectable="on">','<ahidefocus="on"class="x-tree-node-anchor"href="',a.href?a.href:"#",'"tabIndex="1"',a.hrefTarget?'target="'+a.hrefTarget+'"':"",'>','<spanunselectable="on">',n.text||(c.renderer?c.renderer(a[c.dataIndex],n,a):a[c.dataIndex]),"</span></a>","</div>"];for(vari=1,len=cols.length;i<len;i++){c=cols[i];buf.push('<divclass="x-tree-col',(c.cls?c.cls:''),'"style="width:',c.width-bw,'px;">','<divclass="x-tree-col-text">',(c.renderer?c.renderer(a[c.dataIndex],n,a):a[c.dataIndex]),"</div>","</div>");}buf.push('<divclass="x-clear"></div></div>','<ulclass="x-tree-node-ct"style="display:none;"></ul>',"</li>");if(bulkRender!==true&&n.nextSibling&&n.nextSibling.ui.getEl()){this.wrap=Ext.DomHelper.insertHtml("beforeBegin",n.nextSibling.ui.getEl(),buf.join(""));}else{this.wrap=Ext.DomHelper.insertHtml("beforeEnd",targetNode,buf.join(""));}this.elNode=this.wrap.childNodes[0];this.ctNode=this.wrap.childNodes[1];varcs=this.elNode.firstChild.childNodes;this.indentNode=cs[0];this.ecNode=cs[1];this.iconNode=cs[2];this.anchor=cs[3];this.textNode=cs[3].firstChild;}});
2、编写静态ColumnTree/***@functioncolumntreecolumntree多列信息的tree*@auhor:hoojo*@createDate:Aug29,201010:39:02PM*@blog:blog.csdn.net/IBM_hoojo*@email:hoojo_@126.com*/Ext.ns("Ext.hoo.tree");Ext.hoo.tree.UserColumnTree=Ext.extend(Ext.tree.ColumnTree,{constructor:function(){Ext.hoo.tree.UserColumnTree.superclass.constructor.call(this,{renderTo:"show",title:"用户信息columntree",width:450,hieght:400,autoScroll:true,rootVisible:true,columns:[{header:"名称",width:100,dataIndex:"name"},{header:"性别",width:100,dataIndex:"sex"},{header:"年龄",width:100,dataIndex:"age"},{header:"班级",width:100,dataIndex:"classes"}],loader:newExt.tree.TreeLoader({baseAttrs:{uiProvider:Ext.tree.ColumnNodeUI}}),root:newExt.tree.AsyncTreeNode({text:"用户基本信息",children:[{name:"大二一班",classes:"二(1)班",children:[{name:"微微",sex:"女",age:20,classes:"二(1)班",leaf:true},{name:"筱筱",sex:"女",age:22,classes:"二(1)班",leaf:true},{name:"珠珠",sex:"女",age:19,classes:"二(1)班",leaf:true},{name:"拉拉",sex:"女",age:19,classes:"二(1)班",leaf:true}]},{name:"二二班",classes:"二(2)班",children:[{name:"放放",sex:"男",age:22,classes:"二(2)班",leaf:true},{name:"枫枫",sex:"男",age:22,classes:"二(2)班",leaf:true}]},{name:"未成立",sex:"",age:0,classes:"二(3)班",leaf:true}]})});this.on("click",this.onNodeClick,this);},onNodeClick:function(node,e){alert(Ext.encode(node.attributes)+"###"+node.leaf+"###"+Ext.encode(e.getPoint())+"##"+e.getXY());}});Ext.onReady(function(){Ext.BLANK_IMAGE_URL="ext2/resources/images/default/s.gif";newExt.hoo.tree.UserColumnTree();});
上面的就是一个静态的ColumnTree,在Ext的onReady函数中运行它。
3、、需要在页面中导入ext库、css、即我们编写的js<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>TreePanel示例</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><metahttp-equiv="author"content="hoojo"/><metahttp-equiv="email"content="hoojo_@126.com"/><metahttp-equiv="ext-lib"content="version2.2"/><metahttp-equiv="blog"content="http://blog.csdn.net/IBM_hoojo"/><metahttp-equiv="blog"content="http://hoojo.cnblogs.com"/><linkrel="stylesheet"type="text/css"href="ext2/resources/css/ext-all.css"/><linkrel="stylesheet"type="text/css"href="jslib/column-tree.css"/><scripttype="text/javascript"src="ext2/adapter/ext/ext-base.js"></script><scripttype="text/javascript"src="ext2/ext-all.js"></script><scripttype="text/javascript"src="ext2/build/locale/ext-lang-zh_CN-min.js"></script><scripttype="text/javascript"src="jslib/Ext.tree.ColumnTree.js"></script><scripttype="text/javascript"src="jslib/Ext.hoo.tree.UserColumnTree.js"></script></head><body><divid="show"style="margin-left:200px;"></div><divid="showBasic"style="margin-left:200px;margin-top:50px;"></div></body></html>
在浏览器中请求http://localhost:8080/S2SMyBatis/columnTree.htm
结果如下
4、下面编写远程数据的ColumnTree,代码如下:Ext.ns("Ext.hoo.tree");Ext.hoo.tree.UserBasicColumnTree=Ext.extend(Ext.tree.ColumnTree,{constructor:function(){Ext.hoo.tree.UserBasicColumnTree.superclass.constructor.call(this,{renderTo:"showBasic",title:"远程数据",width:550,hieght:400,autoScroll:true,rootVisible:true,columns:[{header:"编号",width:100,dataIndex:"accountId"},{header:"用户名称",width:100,dataIndex:"username"},{header:"密码",width:100,dataIndex:"password"},{header:"创建时间",width:150,dataIndex:"createTime"}],loader:newExt.tree.TreeLoader({baseAttrs:{uiProvider:Ext.tree.ColumnNodeUI}}),root:newExt.tree.AsyncTreeNode({text:"用户基本信息",children:[]}),listeners:{expandnode:{fn:this.onExpandNode,scope:this}}});},onExpandNode:function(node){//只对未加载过的添加子结点,加载后不在重复加载;避免增加请求,浪费资源if(!node.attributes.isLoad){Ext.Ajax.request({url:Ext.hoo.tree.UserBasicColumnTree.TREE_DATA_URL,success:function(response,options){node.attributes.isLoad=true;//设置加载标识varnodes=Ext.decode(response.responseText);//将json的text转换成js对象node.appendChild(nodes.results);},failure:function(response){Ext.Msg.alert("程序异常",response.responseText);}});}}});Ext.hoo.tree.UserBasicColumnTree.TREE_DATA_URL="account!treeData.action";
由于服务器端返回来的数据是一个对象,而不是一个Array。所以客户端要将数据稍作处理,然后再添加到columnTree的children中。
5、在上面的onReady中创建这个对象就可以了运行Ext.onReady(function(){Ext.BLANK_IMAGE_URL="ext2/resources/images/default/s.gif";newExt.hoo.tree.UserColumnTree();newExt.hoo.tree.UserBasicColumnTree();});
同样在浏览器中请求http://localhost:8080/S2SMyBatis/columnTree.htm
可以看到
由于Account对象的数据形式不是一个完整的tree形态。所以展示效果就是上面的样子。正确的数据的格式的话,Account中至少包含以下属性:
Booleanleaf;Listchildren;这样就知道当前节点是否是叶子节点,并且知道其子元素。
相关文章推荐
- Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS,完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS,完成CheckNodeColumnTree
- Struts2、Spring3、MyBatis3整合ExtJS,完成CheckNodeColumnTree
- Struts2、Spring3、MyBatis3整合ExtJS,完成CheckNodeColumnTree
- Struts2、Spring3、MyBatis3整合ExtJS,完成CheckNodeColumnTree
- 整合Spring Struts2 mybatis 所需要的架包
- 一步一步完成SSM框架整合(Spring+Spring MVC + Mybatis)
- 使用Spring插件完成Spring和Struts2的整合
- 10-MyBatis_spring与struts2的整合
- SpringBoot整合Mybatis完成增删改查功能
- Struts2 Spring3 Mybatis 3 整合 相关配置文件
- Struts2、Spring3.2.4、Mybatis和Mysql数据库整合开发
- 利用Intellij+MAVEN完成Spring整合Mybatis项目详解
- struts2、spring和mybatis整合理解
- MyBatis_spring与struts2的整合