treepanel,用servlet作为loader的url???

页面:tree3.html

[code="java"]



Reorder TreePanel
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
Ext.onReady(function(){ Ext.QuickTips.init(); var mytree=new Ext.tree.TreePanel({ el:"container", animate:true, title:"简单Extjs动态树", collapsible:true, enableDD:true, enableDrag:true, rootVisible:true, autoScroll:true, autoHeight:true, width:150, lines:true, //这里简简单单的loader的几行代码是取数据的,很经典哦 loader:new Ext.tree.TreeLoader({ dataUrl:"servlet/tree3" }) }); //根节点 var root=new Ext.tree.AsyncTreeNode({ id:"root", text:"控制面板", expanded:true }); mytree.setRootNode(root); mytree.render();//不要忘记render()下,不然不显示哦 })





[/code]

作为loader的url的Servlet:tree3.java

[code="java"]
package com.ext2.test;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

/**
*

  • @author SUJL
  • @version 1.0 Create at:2009-7-15 上午09:45:04
    */
    public class tree3 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();
    
    List<jsondata> jsdata=new ArrayList<jsondata>();
    
    for (int i = 1; i < 5; i++) {
        jsondata jd = new jsondata();
        jd.id="num"+i;
        jd.text = "节点"+i;
        jd.leaf = false;
        for (int j = 1; j < 3; j++) {
            jsondata subjd = new jsondata();
            subjd.id = "sub" + j;
            subjd.text = "子节点" + j;
            subjd.leaf = true;
            jd.children.add(subjd);
        }
        jsdata.add(jd);
    }
    
    JSONArray jsonArray = JSONArray.fromObject(jsdata);
    
    String str = jsonArray.toString();
    
    out.println(jsonArray.toString().replace("\"children\":[],", ""));
    
    out.flush();
    out.close();
    

    }

}
[/code]

jsondata.java:

[code="java"]
package com.ext2.test;

import java.util.ArrayList;
import java.util.List;

/**
*

  • @author SUJL
  • @version 1.0 Create at:2009-7-15 上午09:49:07
    */
    public class jsondata {
    //定义jsondata类,存放节点数据
    public String id;
    public String text;
    public boolean leaf;
    public List children=new ArrayList();//存放子节点

    public List getChildren() {
    return children;
    }
    public void setChildren(List children) {
    this.children = children;
    }
    public String getId() {
    return id;
    }
    public void setId(String id) {
    this.id = id;
    }
    public boolean isLeaf() {
    return leaf;
    }
    public void setLeaf(boolean leaf) {
    this.leaf = leaf;
    }
    public String getText() {
    return text;
    }
    public void setText(String text) {
    this.text = text;
    }

}
[/code]

已确定tree3.java输出的json数据无误,但是页面只显示根节点,各位大哥看看怎么回事。

tree3.java输出的json:

[code="java"][{"children":[{"id":"sub1","leaf":true,"text":"子节点1"},{"id":"sub2","leaf":true,"text":"子节点2"}],"id":"num1","leaf":false,"text":"节点1"},{"children":[{"id":"sub1","leaf":true,"text":"子节点1"},{"id":"sub2","leaf":true,"text":"子节点2"}],"id":"num2","leaf":false,"text":"节点2"},{"children":[{"id":"sub1","leaf":true,"text":"子节点1"},{"id":"sub2","leaf":true,"text":"子节点2"}],"id":"num3","leaf":false,"text":"节点3"},{"children":[{"id":"sub1","leaf":true,"text":"子节点1"},{"id":"sub2","leaf":true,"text":"子节点2"}],"id":"num4","leaf":false,"text":"节点4"}][/code]
[b]问题补充:[/b]
to Rowen: 能否再具体一点呢,我似乎明白你的意思,但还不是很明白。。- -!
[b]问题补充:[/b]
我把servlet改成jsp就没问题了,数据输出还是一样,跟""引好无关,servlet改成jsp是这样,几乎没什么变化哦:

tree3.jsp:

[code="java"]
<%@ page language="java" pageEncoding="utf-8"%>


<%
List jsdata=new ArrayList();

    for (int i = 1; i < 5; i++) {
        jsondata jd = new jsondata();
        jd.id="num"+i;
        jd.text = "节点"+i;
        jd.leaf = false;
        for (int j = 1; j < 3; j++) {
            jsondata subjd = new jsondata();
            subjd.id = "sub" + j;
            subjd.text = "子节点" + j;
            subjd.leaf = true;
            jd.children.add(subjd);
        }
        jsdata.add(jd);
    }

    JSONArray jsonArray = JSONArray.fromObject(jsdata);

    String json = jsonArray.toString().replace("\"children\":[],", "");

%>

<%=json%>
[/code]

你的根结点没有个SERVLET的结点进行绑定,用类似于下面的方法试试..
加个loader.on("beforeload", function(loader, node) {
loader.baseParams.parentid = (node.id == 'root'? "": node.id);
});

"children"等属性名不用加双引号吧

[code="java"]this.organRoot = new Ext.tree.AsyncTreeNode({
id : rootInfo[0].id,
text : rootInfo[0].text, iconCls : 'system_organ'
});
var organLoader = new Ext.tree.TreeLoader({
url : "queryChildUnionOrgan.jsp"//相当你的servlet
});
organLoader.on("beforeload", function(loader, node) {
organLoader.baseParams.parentid = (node.id == 'rootNode'
? ""
: node.id);
});[/code]

----queryChildUnionOrgan.jsp//相当你的servlet----

[code="java"][
<%
for (int i = 0; i < organList.size(); i++)
{
organ = (AdsUnionOrgan)organList.get(i);
if (i > 0)
out.print(",");
%>
{
id:"<%=organ.getId() %>",
text:"<%=organ.getOrganName() %>"
}
<%

}
%>

][/code]

[code="js"]
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel({
    useArrows: true,
    autoScroll: true,
    animate: true,
    enableDD: true,
    containerScroll: true,
    border: false,

    dataUrl: 'servlet/tree3',

    root: {
        nodeType: 'async',
        text: 'Ext JS',
        draggable: false,
        id: 'src'
    }
});

// render the tree
tree.render('tree-div');
tree.getRootNode().expand();

});
[/code]
正确格式应该如下
[code="js"]
[{"text":"core","id":"src\/core","cls":"folder"},{"text":"dd","id":"src\/dd","cls":"folder"},{"text"
:"locale","id":"src\/locale","cls":"folder"},{"text":"widgets","id":"src\/widgets","cls":"folder"},{"text"
:"adapter","id":"src\/adapter","cls":"folder"},{"text":"debug.js","id":"src\/debug.js","leaf":true,"cls"
:"file"},{"text":"data","id":"src\/data","cls":"folder"},{"text":"state","id":"src\/state","cls":"folder"
},{"text":"direct","id":"src\/direct","cls":"folder"},{"text":"util","id":"src\/util","cls":"folder"
}]
[/code]

测了一下的确是数据有问题,我用如下数据测了一下你程序没有问题:

[ {

  "text" : "公司总部1",

  "id" : "1",

  "cls" : "folder"

}, {

  "text" : "公司总部2",

  "id" : "2",

  "cls" : "folder"

}, {

  "text" : "公司总部3",

  "id" : "3",

  "cls" : "folder"

}]

下面是我给你改的数据:把id,leaf,text的双引号去掉就没问题了..
[code="java"][{"children":[{id:"sub1",leaf:true,text:"子节点1"},{id:"sub2",leaf:true,text:"子节点2"}],id:"num1",leaf:false,text:"节点1"},{"children":[{id:"sub1",leaf:true,text:"子节点1"},{id:"sub2",leaf:true,text:"子节点2"}],id:"num2",leaf:false,text:"节点2"},{"children":[{id:"sub1",leaf:true,text:"子节点1"},{id:"sub2",leaf:true,text:"子节点2"}],id:"num3",leaf:false,text:"节点3"},{"children":[{id:"sub1",leaf:true,text:"子节点1"},{id:"sub2",leaf:true,text:"子节点2"}],id:"num4",leaf:false,text:"节点4"}] [/code]