extjs 加上dwr tree-优快云博客

本文介绍如何使用ExtJS构建树形组件，并通过DWR技术与Java后端交互，实现动态加载组织结构数据。文章详细展示了所需JavaScript代码及JavaBean的设计方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里是js类创建一个树。。

从java 类中直接返回一个 bean 的集合（List ,Set）都行。。。

Ext.BLANK_IMAGE_URL='js/resources/images/vista/s.gif';

Ext.onReady(function()...{

vari=20;

//从DWR中加载数据自动转换成json格式

vartreeLoader=newExt.tree.DWRTreeLoader(...{

dwrCall:CheckBean.getTreeNode//调用java方法

});

//定义树

varTree=Ext.tree;

vartree=newTree.TreePanel(...{

el:'tree-div',//目标div容器

animate:true,

enableDD:true,

containerScroll:true,

loader:treeLoader

});

//树中加入一个右键菜单事件

tree.on('contextmenu',onContextMenu);

functiononContextMenu(node,e)...{

varmenu;

if(!menu)...{

menu=newExt.menu.Menu([...{

id:node.id+'add',

text:'添加一个文件',

handler:function()...{

node.appendChild(newTree.AsyncTreeNode(...{

text:node.childNodes.length.toString(),

id:i+++'',

expanded:true

}));

}

},...{

id:node.id+'del',

text:'删除接点',

handler:function()...{

if(node.id!=-1)...{

node.remove();

}else...{

Ext.Msg.alert('错误','根结点不能删除');

}

}]);

}

menu.showAt(e.getPoint());

node.on('append',onAppend);

functiononAppend(tree,thisNode,newNode,index)...{

alert();

}

//定义根节点

varroot=newExt.tree.AsyncTreeNode(...{

text:'组织机构图',

draggable:false,

id:'-1'//默认的node值：?node=-1

});

tree.setRootNode(root);

tree.render();

root.expand();

});

bean 的命名必须遵守规范

所有字段必须遵守命名规范

如何不想使用这样的命名就要修改 Ext.tree.DWRTreeloader.js这个类

packagecom;

importjava.util.List;

publicclassOrgBean...{

//是否加载字节点下的所有节点

privatebooleanchildrenLoaded=false;

//是否用子节点

privatebooleanhasChildren=true;

//是否加载时候展开

privatebooleanexpanded=false;

//tree的id属性

privateStringid;

//tree的name属性

privateStringtext;

//当前类的集合

privateList<OrgBean>children;

publicList<OrgBean>getChildren()...{

returnchildren;

}

publicvoidsetChildren(List<OrgBean>children)...{

this.children=children;

}

publicStringgetId()...{

returnid;

}

publicvoidsetId(Stringid)...{

this.id=id;

}

publicStringgetText()...{

returntext;

}

publicvoidsetText(Stringtext)...{

this.text=text;

}

publicbooleanisChildrenLoaded()...{

returnchildrenLoaded;

}

publicvoidsetChildrenLoaded(booleanchildrenLoaded)...{

this.childrenLoaded=childrenLoaded;

}

publicbooleanisExpanded()...{

returnexpanded;

}

publicvoidsetExpanded(booleanexpanded)...{

this.expanded=expanded;

}

publicbooleanisHasChildren()...{

returnhasChildren;

}

publicvoidsetHasChildren(booleanhasChildren)...{

this.hasChildren=hasChildren;

}

OrgDwr.java

没什么好说的一个递归加载数据

packagecom;

importjava.util.List;

publicclassOrgDwr...{

privateOrgDAOorgDAO=newOrgDAO();

publicList<OrgBean>getTreeNode(StringtreeId)...{

System.out.println(treeId);

List<OrgBean>list=orgDAO.findByParentID(Integer.parseInt(treeId));

returnget(list);

}

privateList<OrgBean>get(List<OrgBean>list)...{

for(OrgBeanbean:list)...{

System.out.println(bean.getText());

List<OrgBean>list2=orgDAO.findByParentID(Integer.parseInt(bean.getId()));

if(list2.size()>0)...{

bean.setChildren(list2);

get(list2);

break;

}

bean.setHasChildren(false);

}

returnlist;

}

html 如何引用超级简单把几个 js 加载进去就ok了

<%...@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>

<%...

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'org.jsp'startingpage</title>

<linkrel="stylesheet"type="text/css"

href="js/resources/css/ext-all.css"/>

<scripttype="text/javascript"src="js/ext-base.js"></script>

<scripttype="text/javascript"src="js/ext-all.js"></script>

<scripttype="text/javascript"src="js/MyAsynTreeNode.js"></script>

<scripttype="text/javascript"src="js/DWRTreeLoder.js"></script>

<scripttype='text/javascript'

src='/ExtTree/dwr/interface/CheckBean.js'></script>

<scripttype='text/javascript'src='/ExtTree/dwr/engine.js'></script>

<scripttype='text/javascript'src='/ExtTree/dwr/util.js'></script>

<scripttype="text/javascript"src="js/extdwr.js"></script>

</head>

<body>

<divid="tree-div"

style="overflow:auto;height:300px;width:200px;border:2pxsolid#c3daf9;"></div>

</body>

</html>

用需要源码的话把邮箱留下来我给你们传过去