[code="java"]
<!-- 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]
[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;
/**
*
@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]
[code="java"]
package com.ext2.test;
import java.util.ArrayList;
import java.util.List;
/**
*
@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数据无误,但是页面只显示根节点,各位大哥看看怎么回事。
[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是这样,几乎没什么变化哦:
[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]