页面: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]