extjs動(dòng)態(tài)樹的實(shí)現(xiàn)以及節(jié)點(diǎn)拖拽

ExtJSHomeHome?02.技術(shù)?ExtJSTreeGrid葉子節(jié)點(diǎn)拖拽問題和選擇框使用方ExtJSTreeGrid葉子節(jié)點(diǎn)拖拽問題和選PostedbyLittleHorse2011年1109日-Postedin:02.技術(shù)- 1.TreeGrid我使用的是ExtJs3.1版本。ExtJs中默認(rèn)在樹（Ext.tree.TreePanel）的拖動(dòng)中，境葉子節(jié)點(diǎn)是有可能變?yōu)楦腹?jié)點(diǎn)的 TreePanel的1 er",varn=3if(n.leaf) n.leaf= 7在上面 處理函數(shù)中加打印語句，發(fā)現(xiàn)在TreeGrid有葉子節(jié)點(diǎn)被drop時(shí) 試著調(diào)試一下，把頁面引入的ext-all.js換成ext-all-debug.js，從觸發(fā) er的地方入手逐漸分析，最終發(fā)現(xiàn)當(dāng)TreePanel的拖拽配置為dropConfig:{appendOnly:true}時(shí)，nodedra er是不會(huì)觸發(fā)的。這里TreePanel和TreeGrid的區(qū)別是，TreePanel如果不設(shè)置dropConfig屬性，默認(rèn)appendOnly是false；而TreeGrid如果不設(shè)置dropConfig屬性，默認(rèn)appendOnly是true。所以同樣的處理到了TreeGrid這里就無效了。明白了原因，只需要在TreeGrid的配 {appendOnly:false}和上面的nodedra 處理函數(shù)就能實(shí)現(xiàn)TreeGrid的葉子節(jié)點(diǎn)drop問題，效果如下：EXTJS一、描述：通過dwr實(shí)現(xiàn)JS與的交互，從而實(shí)現(xiàn)動(dòng)態(tài)樹中葉子節(jié)點(diǎn)和 節(jié)點(diǎn)下的相關(guān)節(jié)點(diǎn)的序號(hào)，能使得與前臺(tái)同步。這個(gè)序號(hào)借助了tree中node的index。1servlet、mysql、dwr、2ExtJs、tree、window以及機(jī)3ExtJsExtJsExtJs動(dòng)態(tài)樹-右 節(jié)點(diǎn)菜ExtJs動(dòng)態(tài)樹-選擇右 節(jié)點(diǎn)菜單的“編輯”選ExtJs456Javapackageimportimportpublicclass DBConn{ privatestatic url= = = privatestatic driver= public ConnectionConnection =conn= }catch(Exception} }2、daoJavapackageimportimportimportimportimportimportimportimportimportcom.demo.navigate.model.Navigate;public NavigateDaoprivate NavigateDaoprivate}public NavigateDao ==dao new ID @param Navigateget(SerializableConnectionconection Statement ResultSet Navigate conection= stmt StringBuffer new navigate id rs obj ; }catch(Exception { catche) =} { catch} =}(conection null) { catch}conection }}catch(Exception}} } @parampublicList<Navigate>List<Navigate>list= Connectionconection Statement ResultSet conection=stmt StringBuffer navigate =sql.append(" rs obj new ; } {;} {} } null){{} }stmt }(conection { try } ption conection=; }catch(Exception return ** publicvoidsave(NavigateStringBuffersql= newStringBuffer("insert navigate(parentId,title,leaf,number,url)}** publicvoidupdate(NavigateStringBuffersql= newStringBuffer("updatenavigateset");sql.append("parentId=sql.append("title sql.append("leaf sql.append("number sql.append(",url sql.append("'where = ** * *@returntrue-修改成功falsepublicBooleanajaxUpdateTitle(Integerg title){Boolean =Navigate =if(null StringBuffersql= uffer("updatenavigateset");sql.append("title sql.append("where }}** publicvoidremoveById(IntegerStringBuffersql= newStringBuffer("dnavigatewhereid =");}** * publicvoidajaxRemoveNode(IntegerList (Objectobject list);Navigate }}** * 點(diǎn)* ne 節(jié)點(diǎn)移動(dòng)后的目標(biāo)父點(diǎn)* 置publicvoidajaxMoveNode(intid, nerentId,intNavigate = minIndex= maxIndex=if(oldParentId== &&minIndex!= if(minIndex minIndex, if(minIndex } }if(oldParentId ne //1 this.downNode(oldParentId,ex,- this.upNode(nerentId, - obj.setParentId(ne}}** *@param *@param publicvoiddownNode(int StringBuffersql= newStringBuffer("updatenavigateset 1 if(maxIndex!=- <=}if(minIndex!=-sql.append("and }}**@param *@param *@param publicvoidupNode(intparentId, int StringBuffersql new number=number+1 parentId=if(maxIndex!=-<}if(minIndex!=-sql.append("and}}** publicvoidbulkUpdate(StringConnectionconection Statementstmt conection =conection.createStatement}catch(Exception {{{} }stmt }(conection {{{} }conection=}}catch(Exception}} }3、ServiceJavapackageimportimportimportimportpublic NavigateManagerprivateNavigateDao =publicNavigateget(Serializable @parampublicList<Navigate>getChildrenById(Integer @parampublic save(Navigate @parampublic update(Navigate @parampublic removeById(Integer @param @param @returntrue-修改成功falsepublicBoolean ajaxUpdateTitle(Integerid,Stringti dao.ajaxUpdateTitle(id, @parampublic ajaxRemoveNode(IntegerNavigate dao.downNode(obj.getParentId(), - @param @param @param @param publicvoid ajaxMoveNode(intid, intoldParentId,intnerentId,intnodeIndex){dao.ajaxMoveNode(id,oldParentId,ne 4、ServletJavapackageimportimportimportimportimportimportimportimportcom.demo.navigate.service.NavigateManager;public NavigateEditServletextendsHttpServletpublicvoid doGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,{this.doPost(request, publicvoid doPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,{ idstr parentId=request.getParameter("pare leaf number= Navigate !=NavigateManagernavigateManager= obj obj newobj.setParentId(new;obj.setLeaf(newobj.setNumber(new request.setAttribute("obj",RequestDispatcherdispatcher= dispatcher.forward(request, Javapackageimportimportimportimportimportimportimportimportcom.demo.navigate.service.NavigateManager;public NavigateSaveServletextendsHttpServletpublicvoid doGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,{this.doPost(request, publicvoid doPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,{NavigateManagernavigateManager= newNavigNavigate request.setCharacterEncoding("UTF- id number= parentId=request.getParameter("pare leaf title ; url &&= }obj newobj.setLeaf(newobj.setParentId(new;} != && RequestDispatcherdispatcher= dispatcher.forward(request, Javapackageimportimportimportimportimportimportimportcom.demo.navigate.service.NavigateManager;public NavigateJsonServletextendsHttpServletpublicvoid doGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,{this.doPost(request, publicvoid doPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,{NavigateManagernavigateManager= newNavigrequest.setAttribute("list",navigateManager.getChildrenById(newInteger(request.getParameter("id"))));RequestDispatcherdispatcher= dispatcher.forward(request, Html<%@ contentType="text/html;charset=UTF-8"<%@taglib /jsp/jstl/core"prefix="c <%@ <base<title>菜單編輯<linkrel="stylesheet"type="text/css"/ext/resources/css/ext- <scripttype="text/javascript"src="scripts/ext/adapt<scripttype="text/javascript"src="scripts/ext/ext-<scriptfunctionif(form.parentId.value== ||form.leaf.value==""){Ext.Msg.alert(return}if(form.title.value==Ext.Msg.alert(return}}<bodystyle="background-color:<formaction="navigatesave"method="post"onsubmit="returncheckForm(this)"><inputtype="hidden"name="id"value="${obj.<inputtype="hidden"name="parentId"<inputtype="hidden"name="leaf"value="${ob<inputtype="hidden"name="number"value="${<table<tr><tdwidth="60"><td><inputtype="text" title"value="${obj.title}"/></td></tr><c:if<td><inputtype="text" url"value="${obj.url}"/></td></tr><tr><td <input value="&;&<inputtype="reset"ame="reset"value="&;&<input value=" Html<%@page language="java"contentType="text/html;charset=UTpageEncoding="UTF-<!DOCTYPEhtml //W3C//DTDHTML4.01 Transitional//EN""<metahttp-Type"content="text/html;charset=UTF-<title>信息更新成功<script Html<%@ contentType="text/html;charset=UTF-8"<%@taglib /jsp/jstl/core"prefix="c <%@taglib /jsp/jstl/functions"prefix="fn"%><c:setvar="len"value="${fn:length(list)-1}"[<c:forEachitems="${list}"var="obj"{<c:iftest="${obj.leaf==<c:ifHtml<%@ language="java"pageEncoding="UTF-String =StringbasePath= jsJs var ="if(typeof(glbRootPath)!=basePath 5. FormEditWin= return : :showAddDirWin function(parentNode)//顯示添加 窗varnumber= ntNode.lastChild)+ vareditpage parentNode.id leaf=0&number=" varwindow 節(jié)點(diǎn) editpage,function()showAddLeafWin {//=+ parentNode.id leaf=1&number=" varwindow= new","新建葉子節(jié)點(diǎn)", editpage,function(){ showEditDirWin function(node)//顯 編輯窗vareditpage + varwindow= this.createWin("win"+node.id,node.text,editpage,function(){ varnodeparent= vartree nodeparent.on("expand",function(pnode){ this, single showEditLeafWin function(node)//vareditpage + varwindow= this.createWin("win"+node.id,node.text,editpage,function(){ varnodeparent= vartree nodeparent.on("expand",function(pnode){ this, single createWin: function(winId,winTitle,iframePage,closeFun){//var =if win :title - +width height modal+ +=;}curFormWin=returnreloadNavNode function() :function()}}} 96.NavTree ;;varremoveFlag vartitleChangeFlag=varvarreturninit Ext.Msg.alert("NavTree.setMgr() = url loader.on('beforeload',ams= { :method } "text }=new title width autoScroll: animate loader root enableDD: listeners: 'click'function(node,event) (node.isLeaf()) 為葉子節(jié)點(diǎn)時(shí)，點(diǎn)擊不進(jìn)入 ",s.showTree 件 nav.on("textchange",tion(node,newText,oldText) iflag newText oldText) dateTitle(node.id,newText,function(success) (!success)

title: msg: buttons:Ext.Msg.OK,icon titleChangeFlag=titleChangeFlag= 件 nav.on("movenode",on(tree,node,oldParent,nerent,index) ode.id,oldParent.id,nerent.id, 件 nav.on("remove",(tree,parentNode,node) if{ }}navEditor {allowBlank: ignoreNoChange blankText: selectOnFocus this.setLeaf setMgr = getMgr return : = .items text handlerfunction() },"- text handlerfunction() }"- text":t setDir: 設(shè) 菜if(!dirdir= items text handlerfunction() },"- text handlerfunction() },"- text handlerfunction() },"- text 添 節(jié)點(diǎn) handlerfunction() },"- text handler showTree:function(node,nodeSelected (node.isLeaf()) }{ }firm Ext.Msg.confirm("確認(rèn)刪除",{ { delTreeItem: (nodeSelected!= Node()){removeFlag removeFlag elseExt.Msg.alert("警告",}show //Ext.BLANK_IMAGE_URL="../scripts/ext/resources/Ext.Msg.alert("DWR，并NavigateManager");}dwrXml<?xmlversion=