extjs动态树的实现以及节点拖拽

ExtJSHomeHome»02.技术»ExtJSTreeGrid叶子节点拖拽问题和选择框使用方ExtJSTreeGrid叶子节点拖拽问题和选PostedbyLittleHorse2011年1109日-Postedin:02.技术- 1.TreeGrid我使用的是ExtJs3.1版本。ExtJs中默认在树（Ext.tree.TreePanel）的拖动中，境叶子节点是有可能变为父节点的 TreePanel的1 er",varn=3if(n.leaf) n.leaf= 7在上面 处理函数中加打印语句，发现在TreeGrid有叶子节点被drop时 试着调试一下，把页面引入的ext-all.js换成ext-all-debug.js，从触发 er的地方入手逐渐分析，最终发现当TreePanel的拖拽配置为dropConfig:{appendOnly:true}时，nodedra er是不会触发的。这里TreePanel和TreeGrid的区别是，TreePanel如果不设置dropConfig属性，默认appendOnly是false；而TreeGrid如果不设置dropConfig属性，默认appendOnly是true。所以同样的处理到了TreeGrid这里就无效了。明白了原因，只需要在TreeGrid的配 {appendOnly:false}和上面的nodedra 处理函数就能实现TreeGrid的叶子节点drop问题，效果如下：EXTJS一、描述：通过dwr实现JS与的交互，从而实现动态树中叶子节点和 节点下的相关节点的序号，能使得与前台同步。这个序号借助了tree中node的index。1servlet、mysql、dwr、2ExtJs、tree、window以及机3ExtJsExtJsExtJs动态树-右 节点菜ExtJs动态树-选择右 节点菜单的“编辑”选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 }}** * 点* ne 节点移动后的目标父点* 置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 节点 editpage,function()showAddLeafWin {//=+ parentNode.id leaf=1&number=" varwindow= new","新建叶子节点", 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()) 为叶子节点时，点击不进入 ",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: 设 菜if(!dirdir= items text handlerfunction() },"- text handlerfunction() },"- text handlerfunction() },"- text 添 节点 handlerfunction() },"- text handler showTree:function(node,nodeSelected (node.isLeaf()) }{ }firm Ext.Msg.confirm("确认删除",{ { delTreeItem: (nodeSelected!= Node()){removeFlag removeFlag elseExt.Msg.alert("警告",}show //Ext.BLANK_IMAGE_URL="../scripts/ext/resources/Ext.Msg.alert("DWR，并NavigateManager");}dwrXml<?xmlversion=