Ext.tree.TreePanel
转载：http://blog.csdn.net/tinyyys/archive/2009/03/2**027142.aspx
个人只是进行了测试，理解而已。原文中使用的数据库是SQL 2000的，而本人使用的是mysql，故做了一点点的更改。
【注意】：以下所有引用资源的路径都是根据自己的资源位置来配置的。
第一步：创建treePanel.html
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
- <title>测试Ext.tree.TreePanel</title>
- <linkrel="stylesheet"type="text/css"href="../static/lib/ext/resources/css/ext-all.css"/>
- <scripttype="text/javascript"src="../static/lib/ext/adapter/ext/ext-base.js"></script>
- <scripttype="text/javascript"src="../static/lib/ext/ext-all.js"></script>
- <linkrel="stylesheet"type="text/css"href="../style/comment.css"/>
- <scripttype="text/javascript"src="../js/treePanel.js"charset="utf-8"></script>
- <linkrel="shortcuticon"href="x.ico"/>
- </head>
- <body>
- <divid="tree-panel"style="overflow:auto;height:600px;width:200px;border:2pxsolid#c3daf9;"></div>
- </body>
- </html>
第二步：创建含Ext.onRready函数的treePanel.js文件
- Ext.onReady(function(){
- Ext.QuickTips.init();//浮动信息提示
- Ext.BLANK_IMAGE_URL='../static/lib/ext/resources/images/default/s.gif';//替换图片文件地址为本地
- //创建一个简写
- var_Tree=Ext.tree;
- //定义根节点的Loader
- var_treeloader=new_Tree.TreeLoader({
- //dataUrl:'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置
- });
- //添加一个树形面板
- var_treepanel=new_Tree.TreePanel({
- //renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
- el:'tree-panel',//将树形添加到一个指定的div中,非常重要！
- region:'west',
- title:'功能菜单',
- width:200,//面板宽度
- minSize:180,
- maxSize:250,
- split:true,
- autoHeight:false,
- frame:true,//美化界面
- //title:'可编辑和拖动的异步树',//标题
- //autoScroll:true,//自动滚动
- enableDD:true,//是否支持拖拽效果
- containerScroll:true,//是否支持滚动条
- rootVisible:true,//是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性
- border:true,//边框
- animate:true,//动画效果
- loader:_treeloader//树加载
- });
- //异步加载根节点
- var_rootnode=new_Tree.AsyncTreeNode({
- id:'0',
- text:'家电品牌总类',
- draggable:false,//根节点不容许拖动
- expanded:true
- });
- //为tree设置根节点
- _treepanel.setRootNode(_rootnode);
- //响应加载前事件，传递node参数
- _treepanel.on('beforeload',function(node){
- _treepanel.loader.dataUrl='tree.jsp?parentId='+node.id;//定义子节点的Loader
- });
- //渲染树形
- _treepanel.render();
- //展开节点,第一个参数表示是否级联展开子节点
- _rootnode.expand(false);
- //设置树的点击事件【测试点击事件不影响树的其他效果】
- var_treeClick=function(node,e){//contentPanel为定义的TabPanel
- if(node.isLeaf()){
- e.stopEvent();
- varn=contentPanel.getComponent(node.id);//通过node的id获取组件
- if(!n){//如果不存在则new一个出来
- varn=contentPanel.add({
- 'id':node.id,
- 'title':node.text,
- closable:true,
- autoLoad:{
- url:'tabFrame.jsp?url=grid.html',
- scripts:true
- }//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
- });
- }
- contentPanel.setActiveTab(n);
- }
- }
- //增加鼠标单击事件
- _treepanel.on('click',_treeClick);
- //定义右键菜单
- varrightClick=newExt.menu.Menu({
- id:'rightClickCont',
- items:[{
- id:'rMenu1',
- text:'添加节点',
- //增加菜单点击事件
- handler:function(){
- alert('添加节点的实现！');
- }
- },{
- id:'rMenu2',
- text:'编辑节点'
- },{
- id:'rMenu3',
- text:'删除节点'
- }]
- });
- //增加右键点击事件
- _treepanel.on('contextmenu',function(node,event){//声明菜单类型
- event.preventDefault();//阻止浏览器默认右键菜单显示
- rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
- });
- /*
- *设置tree的节点放置函数此函数有一个很重要的参数对象ee对象有三个重要的属性，分别为dropNode,target,point
- *1.dropNode为在拖动时鼠标抓住的节点2.target为将要放置在某处的节点
- *3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。
- *
- */
- _treepanel.on('nodedrop',function(e){
- if(e.point=='append'){
- alert('当前"'+e.dropNode.text+'"划到"'+e.target.text+'"里面！');
- }elseif(e.point=='above'){
- alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');
- }elseif(e.point=='below'){
- alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');
- }
- });
- //在原有的树形添加一个TreeEditor
- var_treeEditer=new_Tree.TreeEditor(_treepanel,{
- allowBlank:false
- });
- /*
- *为创建的treeEditer添加事件有两个事件最为常用，一个为beforestartedit另一个为complete
- *从名字就可以看出，beforestartedit事件是在编辑前的事件，因此可以通过它来判断那些节点可以编辑那些不可以。
- *complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。
- */
- _treeEditer.on("beforestartedit",function(_treeEditer){
- var_tempNode=_treeEditer.editNode;//将要编辑的节点
- if(_tempNode.isLeaf()){//这里设定叶子节点才容许编辑
- returntrue;
- }else{
- returnfalse;
- }
- });
- _treeEditer.on("complete",function(_treeEditer){
- Ext.Msg.alert("被修改为"+_treeEditer.editNode.text);
- });
- //（1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用
- //html属性中包含<iframe>的语法来调用另一个页面，具体见代码。
- //（2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，
- //其中有两个比较重要，url表示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，
- //如果在新的页面中要创建Ext控件，必须指定该参数。该方法实现较前一个复杂，因为引入的文件不是一个完整的html文件，
- //有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示）
- //添加第一个节点(html)
- _treepanel.root.appendChild(newExt.tree.TreeNode({
- id:'htmlPanel',
- text:'通过html打开',
- listeners:{
- 'click':function(node,event){
- event.stopEvent();
- varn=contentPanel.getComponent(node.id);
- if(!n){//判断是否已经打开该面板
- n=contentPanel.add({
- 'id':node.id,
- 'title':node.text,
- closable:true,//通过html载入目标页
- html:'<iframescrolling="auto"frameborder="0"width="100%"height="100%"src="grid.html"></iframe>'
- });
- }
- contentPanel.setActiveTab(n);
- }
- }
- }));
- //添加第二个节点(autoLoad)
- _treepanel.root.appendChild(newExt.tree.TreeNode({
- id:'autoLoadPanel',
- text:'通过autoLoad打开',
- listeners:{
- 'click':function(node,event){
- event.stopEvent();
- varn=contentPanel.getComponent(node.id);
- if(!n){////判断是否已经打开该面板
- n=contentPanel.add({
- 'id':node.id,
- 'title':node.text,
- closable:true,
- autoLoad:{
- url:'tabFrame.jsp?url=grid.html',
- scripts:true
- }//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
- });
- }
- contentPanel.setActiveTab(n);
- }
- }
- }));
- //右边具体功能面板区
- varcontentPanel=newExt.TabPanel({
- region:'center',
- enableTabScroll:true,
- activeTab:0,
- items:[{
- id:'homePage',
- title:'首页',
- autoScroll:true,
- //closable:true,
- html:'<divclass="tabPanel-treePanel">Tree控件和TabPanel控件结合功能演示</div>'
- }]
- });
- newExt.Viewport({
- layout:'border',//使用border布局
- defaults:{
- activeItem:0
- },
- items:[_treepanel,contentPanel]
- });
- });
其实这样子就可以运行了，只是动态加载的数据无法加载进去而已。以下是从后台数据库获取json格式数据的操作。
1)建立一个树节点的bean，封装一个树节点。
2)连接数据库，做相关操作之后，以json格式数据传回_treepanel.loader.dataUrl='tree.jsp?parentId='+node.id;//定义子节点的Loader。【实际上，就是一个字符串】
3)tree.jsp
- <%@pagelanguage="java"pageEncoding="utf-8"%>
- <jsp:useBeanclass="com.xxx.javabean.JSONTree"id="JSONTree"></jsp:useBean>
- <%
- StringparentId="";
- if(request.getParameter("parentId")!=null){
- parentId=request.getParameter("parentId").toString();
- }
- JSONTree.setparentId(parentId);
- %>
- <%=JSONTree.getJSONString()%>
- packagecom.xxx.javabean;
- /**
- *@authornothing2012
- *定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。
- */
- publicclassJSONTreeNode{
- privateStringid;//ID
- privateStringtext;//节点显示
- privateStringcls;//图标
- privatebooleanleaf;//是否叶子
- privateStringhref;//链接
- privateStringhrefTarget;//链接指向
- privatebooleanexpandable;//是否展开
- privateStringdescription;//描述信息
- publicStringgetId(){
- returnid;
- }
- publicvoidsetId(Stringid){
- this.id=id;
- }
- publicStringgetText(){
- returntext;
- }
- publicvoidsetText(Stringtext){
- this.text=text;
- }
- publicStringgetCls(){
- returncls;
- }
- publicvoidsetCls(Stringcls){
- this.cls=cls;
- }
- publicbooleanisLeaf(){
- returnleaf;
- }
- publicvoidsetLeaf(booleanleaf){
- this.leaf=leaf;
- }
- publicStringgetHref(){
- returnhref;
- }
- publicvoidsetHref(Stringhref){
- this.href=href;
- }
- publicStringgetHrefTarget(){
- returnhrefTarget;
- }
- publicvoidsetHrefTarget(StringhrefTarget){
- this.hrefTarget=hrefTarget;
- }
- publicbooleanisExpandable(){
- returnexpandable;
- }
- publicvoidsetExpandable(booleanexpandable){
- this.expandable=expandable;
- }
- publicStringgetDescription(){
- returndescription;
- }
- publicvoidsetDescription(Stringdescription){
- this.description=description;
- }
- }
- packagecom.xxx.javabean;
- importjava.sql.Connection;
- importjava.sql.DriverManager;
- importjava.sql.ResultSet;
- importjava.sql.SQLException;
- importjava.sql.Statement;
- importjava.util.ArrayList;
- importjava.util.List;
- importnet.sf.json.JSONArray;
- /*
- *@createbynothing2012
- */
- publicclassJSONTree{
- privateStringparentId;
- publicStringgetJSONString(){
- Connectioncon=null;
- Statementst=null;
- ResultSetrs=null;
- List<JSONTreeNode>treeNodeArray=null;
- //传一个父节点的ID过来
- StringSQLString="SELECT*FROMCategoriesWHEREparentId="
- +this.parentId+"ORDERBYcategoryId";
- try{
- Class.forName("com.mysql.jdbc.Driver");
- DriverManager.registerDriver(newcom.mysql.jdbc.Driver());
- StringDbConn="jdbc:mysql://localhost:3306/extjs";
- StringDbPass="root";
- con=DriverManager.getConnection(DbConn,"root",DbPass);
- st=con.createStatement();
- //查找所有拥有下级类别的类别ID//不同的记录属于同一个parentID，故使用groupby
- rs=st
- .executeQuery("SELECTparentIdFROMCategoriesWHEREparentId>0GroupByparentIdOrderByparentId");
- StringBufferparentIDBuffer=newStringBuffer();
- parentIDBuffer.append("|");
- while(rs.next()){
- parentIDBuffer.append(rs.getString("parentId"));
- parentIDBuffer.append("|");
- }
- //得到所有的parentcategoryId列表
- StringparentIDString=parentIDBuffer.toString();
- System.out.println(parentIDString);//测试|1|2|3|4|5|6|7|8|
- rs=st.executeQuery(SQLString);//第一次传进来的parentID是0
- treeNodeArray=newArrayList<JSONTreeNode>();
- while(rs.next()){
- JSONTreeNodetreeNode=newJSONTreeNode();
- StringcategoryId=rs.getString("categoryId");
- treeNode.setId(categoryId);
- treeNode.setText(rs.getString("categoryName"));
- treeNode.setDescription(rs.getString("description"));
- //treeNode.setHref("rightframe.jsp?categoryId="
- //+rs.getString("categoryId").toString());
- //treeNode.setHrefTarget("rightFrame");
- System.out.println(parentIDString.indexOf("|"+categoryId+"|"));//测试
- if(parentIDString.indexOf("|"+categoryId+"|")>=0)//父节点如果大于0说它在父节点中存在
- {
- treeNode.setCls("folder");
- treeNode.setLeaf(false);
- treeNode.setExpandable(false);
- }else//子节点
- {
- treeNode.setCls("file");
- treeNode.setLeaf(true);
- treeNode.setExpandable(false);
- }
- treeNodeArray.add(treeNode);
- }
- JSONArrayJsonArray=JSONArray.fromObject(treeNodeArray);//得到JSON数组
- System.out.println("返回的数据是："+JsonArray.toString());
- returnJsonArray.toString();//返回JSON数据
- }catch(Exceptione){
- System.out.println("getJSONString()ofJSONTree.javathrows:"
- +e.toString());
- return"";
- }finally{
- try{
- if(con!=null&&!con.isClosed()){
- con.close();
- }
- }catch(SQLExceptione){
- //TODOAuto-generatedcatchblock
- e.printStackTrace();
- }
- }
- }
- publicStringgetparentId(){
- returnparentId;
- }
- publicvoidsetparentId(StringparentId){
- this.parentId=parentId;
- }
- }
效果图：
//需要导入的json-lib 包及其他包自行下载。测试完毕。