Ext+Dwr动态树(增删改)
分类:j2ee相关
2011-09-07 18:48
398人阅读
收藏
举报
效果展示:
1.增加节点
2.删除节点
3.修改节点
技术分析:
利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样DWR(根据Java类来动态生成JavaScrip代码).
树是一个我们日常用的组件,EXT给我们提供了一个非常好用的树控件,对于传统HTML页面完全靠手编写代码是非常困难的,因为要编写许多JS代码,还要实现AJAX功能,使用EXT编写树我们的工作将简单方便许多.
Ext.ux.DWRTreeLoader 是对树加载器 Ext.tree.TreeLoader 的扩展,实现了通过DWR直接调用后台JAVA类方法,将树结点返回到前台,除此之外,还支持对树进行查找时,将查找参数直接传给后台JAVA类方法.
具体JS代码实现:
-
- varbasePath="http://localhost:8080/exttree";
- if(typeof(glbRootPath)!="undefined"){
- basePath=glbRootPath;
- }
-
- FormEditWin=function(){
- varcurFormWin;
- return{
- width:600,
- height:400,
- showAddDirWin:function(parentNode){
- //显示添加子目录窗口
- varnumber=parentNode.indexOf(parentNode.lastChild)+1;
- vareditpage=basePath
- +"/navigateedit?parentId="
- +parentNode.id+"&leaf=0&number="+number;
- varwindow=this.createWin("windirnew","新建目录节点",editpage,function(){
- parentNode.reload();
- });
- window.show();
- },108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> showAddLeafWin:function(parentNode){
- //显示添加子叶子节点窗口
- varnumber=parentNode.indexOf(parentNode.lastChild)+1;
- vareditpage=basePath
- +"/navigateedit?parentId="
- +parentNode.id+"&leaf=1&number="+number;
- this.createWin("winleafnew","新建叶子节点",248); line-height:18px"> parentNode.reload();
- });
- window.show();
- },248); line-height:18px"> showEditDirWin:function(node){
- //显示目录编辑窗口
- +"/navigateedit?id="+node.id;
- this.createWin("win"+node.id,node.text,153); background-color:inherit; font-weight:bold">varnodeparent=node.parentNode;
- vartree=node.getOwnerTree();
- nodeparent.on("expand",153); background-color:inherit; font-weight:bold">function(pnode){
- tree.getNodeById(node.id).select();
- this,{
- single:true
- node.parentNode.reload();
- showEditLeafWin://显示叶子节点编辑窗口
- createWin:function(winId,winTitle,iframePage,closeFun){
- //供各类型窗口创建时调用
- varwin=Ext.getCmp(winId);
- if(!win){
- win=newExt.Window({
- id:winId,248); line-height:18px"> title:"菜单编辑窗口-"+winTitle,
- width:this.width,
- height:this.height,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> maximizable:true,248); line-height:18px"> modal: html:"<iframewidth='100%'height='100%'frameborder='0'src='"
- +iframePage+"'></iframe>"
- this.reloadNavNode=closeFun;
- curFormWin=win;
- returnwin;
- reloadNavNode: close:if(curFormWin){
- curFormWin.close();
- }
- }();
-
- //导航树
- NavTree=varnav;
- varnavEditor;
- varleafMenu;
- vardirMenu;
- varloader;
- varroot;
- varremoveFlag=false;
- vartitleChangeFlag=false;
- varnodeSelected;
- varmgr;
- init:if(!mgr){
- Ext.Msg.alert("警告提示","请先通过NavTree.setMgr()设置mgr");
- return;
- if(!loader){
- loader=newExt.tree.TreeLoader({
- url:basePath+'/navigatejson'
- loader.on('beforeload',153); background-color:inherit; font-weight:bold">function(treeloader,node){
- treeloader.baseParams={
- id:node.id,248); line-height:18px"> method:'tree'
- };
- this);
- if(!root){
- root=newExt.tree.AsyncTreeNode({
- id:'0',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> text:"系统菜单"
- if(!nav){
- nav=newExt.tree.TreePanel({
- title:"左部导航",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> width:232,248); line-height:18px"> autoScroll: animate: loader:loader,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> root:root,248); line-height:18px"> enableDD: listeners:{
- 'click':function(node,event){
- if(!node.isLeaf()){
- //为目录节点时,点击不进入链接
- event.stopEvent();
- //事件:添加右键菜单
- nav.on("contextmenu",153); background-color:inherit; font-weight:bold">this.showTreeMenu);
- //事件:当节点文本改变时触发异步更新标题
- nav.on("textchange",newText,oldText){
- if(!titleChangeFlag&&newText!=oldText){
- mgr.ajaxUpdateTitle(node.id,153); background-color:inherit; font-weight:bold">function(success){
- if(!success){
- Ext.Msg.show({
- title:"操作失败!",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> msg:"菜单修改失败!",248); line-height:18px"> buttons:Ext.Msg.OK,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> icon:Ext.MessageBox.ERROR
- titleChangeFlag=true;
- node.setText(oldText);
- //事件:当节点移动时触发
- nav.on("movenode",153); background-color:inherit; font-weight:bold">function(tree,node,oldParent,newParent,index){
- mgr.ajaxMoveNode(node.id,oldParent.id,newParent.id,index);
- //事件:当节点删除时触发
- nav.on("remove",parentNode,153); background-color:inherit; font-weight:bold">if(removeFlag){
- mgr.ajaxRemoveNode(node.id);
- /*事件:节点选中单击编辑
- if(!navEditor){
- navEditor=newExt.tree.TreeEditor(nav,0); background-color:inherit">allowBlank:false,0); background-color:inherit">ignoreNoChange:true,0); background-color:inherit">completeOnEnter:true,0); background-color:inherit">blankText:'标题不能为空',0); background-color:inherit">selectOnFocus:true
- });
- }*/
- this.setLeafMenu();
- this.setDirMenu();
- setMgr:function(manager){
- mgr=manager;
- getMgr:returnmgr;
- //设置叶子菜单
- setLeafMenu:if(!leafMenu){
- leafMenu=newExt.menu.Menu({
- items:[{
- text:"修改标题",248); line-height:18px"> handler: navEditor=newExt.tree.TreeEditor(nav,248); line-height:18px"> allowBlank:false,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> ignoreNoChange: completeOnEnter: blankText:'标题不能为空',248); line-height:18px"> selectOnFocus: navEditor.triggerEdit(nodeSelected);
- "-",{
- text:"编辑",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> FormEditWin.showEditLeafWin(nodeSelected);
- text:"删除",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> handler:this.delTreeItemComfirm
- }]
- setDirMenu:if(!dirMenu){
- dirMenu= FormEditWin.showEditDirWin(nodeSelected);
- text:"添加叶子节点",248); line-height:18px"> FormEditWin.showAddLeafWin(nodeSelected);
- text:"添加目录节点",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> FormEditWin.showAddDirWin(nodeSelected);
- showTreeMenu: nodeSelected=node;
- nodeSelected.select();
- if(node.isLeaf()){
- //显示叶子节点菜单
- leafMenu.showAt(e.getPoint());
- }else{
- //显示目录节点菜单
- dirMenu.showAt(e.getPoint());
- delTreeItemComfirm: Ext.Msg.confirm("确认删除","确定要删除所选节点吗?",153); background-color:inherit; font-weight:bold">function(btn){
- if(btn=="yes"){
- NavTree.delTreeItem();
- delTreeItem:if(nodeSelected!=nav.getRootNode()){
- removeFlag=true;
- nodeSelected.remove();
- }else{
- Ext.Msg.alert("警告","不能删除树的根节点!");
- show: nav.render(Ext.getBody());
- nav.getRootNode().toggle();
- }();
-
- //文档加载完毕执行
- Ext.onReady( Ext.BLANK_IMAGE_URL="../scripts/ext/resources/images/default/s.gif";
- typeof(NavigateManager)=="undefined"){
- "请先设置DWR,并实例化NavigateManager");
- NavTree.setMgr(NavigateManager);
- NavTree.init();
- NavTree.show();
- });
servlet 配置:
<?xmlversion="1.0"encoding="UTF-8"?>
- <web-appversion="2.4"
- xmlns="http://java.sun.com/xml/ns/j2ee"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
- http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
- servlet>
- servlet-name>navigatejson</servlet-class com.demo.navigate.web.NavigateJsonServlet
- >navigateedit com.demo.navigate.web.NavigateEditServlet
- >navigatesave com.demo.navigate.web.NavigateSaveServlet
- servlet-mappingurl-pattern>/navigatejson>/navigateedit>/navigatesave>dwr-invoker>uk.ltd.getahead.dwr.DWRServletinit-paramparam-name>debugparam-value>true allowGetForSafariButMakeForgeryEasier
- load-on-startup>1>/dwr/*welcome-file-listwelcome-file>index.jspweb-app>
DWR配置:
<!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting2.0//EN""http://www.getahead.ltd.uk/dwr//dwr20.dtd"dwrallowcreatejavascript="NavigateManager"creator="new"paramname="class"
- value="com.demo.navigate.service.NavigateManager"paramincludemethod="ajaxUpdateTitle"/>
- includemethod="ajaxRemoveNode"/>
- includemethod="ajaxMoveNode"create>
servlet程序:
packagecom.demo.navigate.web;
- importjava.io.IOException;
- importjavax.servlet.RequestDispatcher;
- importjavax.servlet.ServletException;
- importjavax.servlet.http.HttpServlet;
- importjavax.servlet.http.HttpServletRequest;
- importjavax.servlet.http.HttpServletResponse;
- importcom.demo.navigate.model.Navigate;
- importcom.demo.navigate.service.NavigateManager;
- @SuppressWarnings("serial")
- publicclassNavigateSaveServletextendsHttpServlet{
- voiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
- throwsServletException,IOException{
- this.doPost(request,response);
- voiddoPost(HttpServletRequestrequest,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> NavigateManagernavigateManager=newNavigateManager();
- Navigateobj=null;
- request.setCharacterEncoding("UTF-8");
- Stringid=request.getParameter("id");
- Stringnumber=request.getParameter("number");
- StringparentId=request.getParameter("parentId");
- Stringleaf=request.getParameter("leaf");
- Stringtitle=request.getParameter("title");
- Stringurl=request.getParameter("url");
- null!=id&&!"".equals(id)){
- obj=navigateManager.get(id);
- if(obj==null){
- RequestDispatcherdispatcher=request.getRequestDispatcher("/navigate/error.jsp");
- dispatcher.forward(request,response);
- return;
- obj=newNavigate();
- obj.setLeaf(newInteger(leaf));
- obj.setParentId(newInteger(parentId));
- obj.setNumber(newInteger(number));
- obj.setTitle(title);
- obj.setUrl(url);
- null!=id&&!"".equals(id)){
- navigateManager.update(obj);
- navigateManager.save(obj);
- RequestDispatcherdispatcher=request.getRequestDispatcher("/navigate/success.jsp");
- dispatcher.forward(request,response);
- }
importcom.demo.navigate.service.NavigateManager;
- @SuppressWarnings("serial")
- classNavigateJsonServletextendsHttpServlet{
- NavigateManagernavigateManager=newNavigateManager();
- request.setAttribute("list",navigateManager.getChildrenById(newInteger(request.getParameter("id"))));
- RequestDispatcherdispatcher=request.getRequestDispatcher("/navigate/console-json.jsp");
- }
classNavigateEditServlet Stringidstr=request.getParameter("id");
- Stringnumber=request.getParameter("number");
- Navigateobj=null;
- null
!=idstr){
- obj=navigateManager.get(idstr);
- obj=newNavigate();
- request.setAttribute("obj",obj);
- RequestDispatcherdispatcher=request.getRequestDispatcher("/navigate/console-edit.jsp");
- }
service程序:
packagecom.demo.navigate.service;
- importjava.io.Serializable;
- importjava.util.List;
- importcom.demo.navigate.dao.NavigateDao;
- classNavigateManager{
- privateNavigateDaodao=NavigateDao.getInstanece();
- publicNavigateget(Serializableid){
- returndao.get(id);
- /**
- *获得指定节点的所有儿子节点
- *@paramid
- */
- @SuppressWarnings("unchecked")
- publicList<Navigate>getChildrenById(Integerid){
- returndao.getChildrenById(id);
- *保存数据
- *@paramobj
- voidsave(Navigateobj){
- dao.save(obj);
- /**
- *更新数据
- *@paramobj
- */
- voidupdate(Navigateobj){
- dao.update(obj);
- *删除指定的一条数据
- voidremoveById(Integerid){
- dao.removeById(id);
- *异步更新标题
- *@paramid
- *@paramtitle
- *@returntrue-修改成功false-修改失败
- publicBooleanajaxUpdateTitle(Integerid,Stringtitle){
- returndao.ajaxUpdateTitle(id,title);
- *异步删除数据,包括其子孙节点
- *@paramtitle
- voidajaxRemoveNode(Integerid){
- Navigateobj=dao.get(id);
- dao.downNode(obj.getParentId(),obj.getNumber(),-1);
- dao.ajaxRemoveNode(id);
- *异步移动指定节点
- *@paramid指定的节点的id
- *@paramoldParentId节点移动前所在的父节点
- *@paramnewParentId节点移动后的目标父节点
- *@paramnodeIndex节点移动后的目标位置
- voidajaxMoveNode(intid,153); background-color:inherit; font-weight:bold">intoldParentId,153); background-color:inherit; font-weight:bold">intnewParentId,153); background-color:inherit; font-weight:bold">intnodeIndex){
- dao.ajaxMoveNode(id,oldParentId,newParentId,nodeIndex);
- }
model程序:
packagecom.demo.navigate.model;
- classNavigate{
- privateIntegerid;
- privateIntegerparentId;
- privateStringtitle;
- privateIntegernumber;
- privateIntegerleaf;
- privateStringurl;
- publicIntegergetId(){
- returnid;
- voidsetId(Integerid){
- this.id=id;
- publicIntegergetParentId(){
- returnparentId;
- voidsetParentId(IntegerparentId){
- this.parentId=parentId;
- publicStringgetTitle(){
- returntitle;
- voidsetTitle(Stringtitle){
- this.title=title;
- publicIntegergetNumber(){
- returnnumber;
- voidsetNumber(Integernumber){
- this.number=number;
- publicIntegergetLeaf(){
- returnleaf;
- voidsetLeaf(Integerleaf){
- this.leaf=leaf;
- publicStringgetUrl(){
- returnurl;
- voidsetUrl(Stringurl){
- this.url=url;
- }
Dao程序:
packagecom.demo.navigate.dao;
- importjava.sql.Connection;
- importjava.sql.ResultSet;
- importjava.sql.SQLException;
- importjava.sql.Statement;
- importjava.util.ArrayList;
- importjava.util.List;
- importcom.demo.core.dao.DBConn;
- importcom.demo.navigate.model.Navigate;
- classNavigateDao{
- privatestaticNavigateDaodao;
- privateNavigateDao(){
- staticNavigateDaogetInstanece(){
- null==dao){
- dao=newNavigateDao();
- returndao;
- *获得指定ID的数据
- *@return
- Connectionconection= Statementstmt= ResultSetrs=try{
- conection=DBConn.getConnection();
- stmt=conection.createStatement();
- StringBuffersql=newStringBuffer("select*fromnavigatewhereid=");
- sql.append(id);
- rs=stmt.executeQuery(sql.toString());
- if(rs.next())
- {
- obj.setId(rs.getInt("id"));
- obj.setLeaf(rs.getInt("leaf"));
- obj.setNumber(rs.getInt("number"));
- obj.setParentId(rs.getInt("parentId"));
- obj.setTitle(rs.getString("title"));
- obj.setUrl(rs.getString("url"));
- catch(Exceptione){
- e.printStackTrace();
- finally{
- try{
- if(rs!=null){
- rs.close();
- catch(SQLExceptione){
- rs=if(stmt!= stmt.close();
- catch(SQLExceptionsqlex){
- stmt=if(conection!= conection.close();
- catch(SQLExceptionsqlex){
- conection=catch(Exceptione){
- e.printStackTrace();
- returnobj;
- List<Navigate>list=newArrayList<Navigate>();
- Connectionconection= Statementstmt= ResultSetrs=newStringBuffer("select*fromnavigatewhereparentId=");
- sql.append("orderbynumber,id");
- System.out.println("首页加载树SQL=="+sql.toString());
- while(rs.next())
- list.add(obj);
- finally{
- rs.close();
- catch(SQLExceptione){
- rs= stmt.close();
- stmt= conection.close();
- conection=returnlist;
- *保存数据
- voidsave(Navigateobj){
- StringBuffersql=newStringBuffer("insertintonavigate(parentId,title,leaf,number,url)values(");
- sql.append(obj.getParentId());
- sql.append(",'");
- sql.append(obj.getTitle());
- sql.append("',");
- sql.append(obj.getLeaf());
- sql.append(obj.getNumber());
- sql.append(obj.getUrl());
- sql.append("')");
- this.bulkUpdate(sql.toString());
- *更新数据
- voidupdate(Navigateobj){
- newStringBuffer("updatenavigateset");
- sql.append("parentId=");
- sql.append("title='");
- sql.append(obj.getTitle());
- sql.append("',");
- sql.append("leaf=");
- sql.append("number=");
- sql.append(obj.getNumber());
- sql.append(",url='");
- sql.append(obj.getUrl());
- sql.append("'whereid=");
- sql.append(obj.getId());
- *异步更新标题
- *@returntrue-修改成功false-修改失败
- Booleanflag=this.get(id);
- null!=obj){
- newStringBuffer("updatenavigateset");
- sql.append(title);
- sql.append("'");
- sql.append("whereid=");
- sql.append(id);
- this.bulkUpdate(sql.toString());
- flag=returnflag;
- newStringBuffer("deletefromnavigatewhereid=");
- @SuppressWarnings("unchecked")
- voidajaxRemoveNode(Integerid){
- Listlist=this.getChildrenById(id);
- for(Objectobject:list){
- Navigateobj=(Navigate)object;
- ajaxRemoveNode(obj.getId());
- this.removeById(id);
- *移动指定节点
- *@paramid指定的节点的id
- *@paramoldParentId节点移动前所在的父节点
- *@paramnewParentId节点移动后的目标父节点
- *@paramnodeIndex节点移动后的目标位置
- intnodeIndex){
- this.get(id);
- intminIndex=obj.getNumber().intValue();
- intmaxIndex=nodeIndex;
- if(oldParentId==newParentId&&minIndex!=maxIndex){
- //在同一个父节点下发生移动
- if(minIndex<maxIndex){
- //当要移动的节点的序号小于要移动到的目标序号,则下移
- this.downNode(oldParentId,minIndex,maxIndex);
- elseif(minIndex>maxIndex){
- //当要移动的节点的序号大于要移动到的目标序号,则上移
- maxIndex=minIndex;
- minIndex=nodeIndex;
- this.upNode(oldParentId,maxIndex);
- //节点本身的序号设置成要移动到的目标序号
- obj.setNumber(nodeIndex);
- this.update(obj);
- if(oldParentId!=newParentId){
- //在不同父节点下发生移动
- //1、相当于要移动的节点在原父节点下下移到最后再删除掉,因此要指定移动发生时节点所在的位置
- 1);
- //2、相当于要移动的节点在新父节点下上移到指定的位置,因此需要指定要移动到的位置
- this.upNode(newParentId,maxIndex,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> obj.setParentId(newParentId);
- this.update(obj);
- *指定的节点下移
- *@paramparentId指定范围内要移动的节点的父节点
- *@paramminIndex指定节点移动发生时所在的位置
- *@parammaxIndex指定节点要移动到的目标位置
- voiddownNode(intparentId,153); background-color:inherit; font-weight:bold">intminIndex,153); background-color:inherit; font-weight:bold">intmaxIndex){
- //指定的节点下移,意味着其范围内的节点各自减1
- newStringBuffer("updatenavigatesetnumber=number-1whereparentId=");
- sql.append(parentId);
- if(maxIndex!=-1){
- sql.append("andnumber<=");
- sql.append(maxIndex);
- if(minIndex!=- sql.append("andnumber>");
- sql.append(minIndex);
- *指定的节点上移
- *@paramparentId指定范围内要移动的节点的父节点
- *@paramminIndex指定节点要移动到的目标位置
- *@parammaxIndex指定节点移动发生时所在的位置
- voidupNode(intmaxIndex){
- //指定的节点上移,意味着其范围内的节点各自加1
- newStringBuffer("updatenavigatesetnumber=number+1whereparentId=");
- sql.append(parentId);
- 1){
- sql.append("andnumber<");
- sql.append(maxIndex);
- sql.append("andnumber>=");
- sql.append(minIndex);
- *批量更新或删除操作
- *@paramsql
- voidbulkUpdate(Stringsql){
- stmt.executeUpdate(sql);
- copy
packagecom.demo.core.dao;
- importjava.sql.Connection;
- importjava.sql.DriverManager;
- classDBConn{
- staticStringurl="jdbc:mysql://localhost:3306/langsin";
- staticStringusername="root";
- staticStringpassword="tiger";
- staticStringdriver="com.mysql.jdbc.Driver";
- staticConnectiongetConnection(){
- Connectionconn= Class.forName(driver);
- conn=DriverManager.getConnection(url,username,password);
- returnconn;
- }
数据库脚本:
createtablenavigate(
- idintprimarykeyauto_increment,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> leafintnotnull,248); line-height:18px"> number parentId titlevarchar(50) urlvarchar(200)null
- );
页面:
<%@pagecontentType="text/html;charset=UTF-8"%<%
- Stringpath=request.getContextPath();
- StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>htmlheadtitle>导航控制linkrel="stylesheet"type="text/css"href="../scripts/ext/resources/css/ext-all.css"scripttype="text/javascript"src="<%=basePath%>/scripts/ext/adapter/ext/ext-base.js"scriptscripttype="text/javascript"src="<%=basePath%>/scripts/ext/ext-all.js"scripttype="text/javascript"src="<%=basePath%>/dwr/engine.js"scripttype="text/javascript"src="<%=basePath%>/dwr/util.js"scripttype="text/javascript"src="<%=basePath%>/dwr/interface/NavigateManager.js"scripttype="text/javascript" varglbRootPath="<%=basePath%>";
- scripttype="text/javascript"src="<%=basePath%>/scripts/navigate/console-index.js"body>
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|