jquery tree

Question

我现在用,jquery tree,
因为我的树比较大,如果一次全部加载很慢,
我想,在初始化树的时候，只加载前N层的数据，当点层结点的时候，才会去加载下一层的结点
请问,如何实现点击层结点时进行加载,谢谢.

Answer 1

要用到：
<script type="text/javascript" src="../../js/ui/jquery.treeview.js"></script>
<script type="text/javascript" src="../../js/ui/jquery.treeview.async.js"></script>
function initializePage()
{
//初始化树
$("#tree").treeview
(
{
url: "../../servlet/ProductServlet?r=" + (Math.random()*10)
}
)
}
主要是这个serverlet返回json的写法。

Answer 2

我写的SERVLET涉及业务代码太多了，你参考一下下面这个STRUTS2写的。
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;import net.sf.json.JSONArray;import com.opensymphony.xwork2.ActionSupport;
import com.starc.dao.UtilDao;
import com.starc.dao.impl.UtilDaoImpl;
import com.starc.hibernate.Sort;public class TreeAction extends ActionSupport{
private String root;
private String url;
public String getUrl() {
return url;
}public void setUrl(String url) {
this.url = url;
}public String getRoot() {
return root;
}public void setRoot(String root) {
this.root = root;
}@SuppressWarnings("unchecked")
public String comment(String root) {
Collection<Map> jsonArray = new ArrayList<Map>();Collection<Sort> nodes = null;
UtilDao ud = new UtilDaoImpl();
Map<String, Object> map;
Sort parent = new Sort();if ("source".equals(root)) {
nodes = new ArrayList();
Sort sort = (Sort) ud.findById(Sort.class, 1);
nodes.add(sort);
} else {
parent.setId(Integer.valueOf(root));
nodes = (Collection<Sort>) ud.findByAttribute(Sort.class, "parent",
parent);
}Iterator<Sort> iterator = nodes.iterator();
while (iterator.hasNext()) {
Sort node = iterator.next();
map = new HashMap<String, Object>();// "id": "36"
map.put("id", node.getId());// 'expanded': true
map.put("expanded", false);
// 'text': '<a href=?2.1.0.0>Item 2.1.0.0</a>'
String text;
if(null==url){
text =node.getName();
}else{
text = "<a target='right' href="+url+"?sort.id="
+ node.getId() + ">" + node.getName()
+ "</a>";
}map.put("text", text);
if (!node.getIsLeaf()) {// "classes": "important"
map.put("classes", "folder");// "hasChildren": truea
map.put("hasChildren", true);/**
* children": [ { "text": "1.1 The State of the Powerdome (30
* min)" }, { "text": "1.2 The Future of jQuery (30 min)" }, {
* "text": "1.2 jQuery UI - A step to richnessy (60 min)" } ]
*/
// map.put("children", "");
} else {// "classes": "important"
map.put("classes", "file");// "hasChildren": true
map.put("hasChildren", false);/**
* children": [ { "text": "1.1 The State of the Powerdome (30
* min)" }, { "text": "1.2 The Future of jQuery (30 min)" }, {
* "text": "1.2 jQuery UI - A step to richnessy (60 min)" } ]
*/
// map.put("children", "");
}jsonArray.add(map);
}JSONArray json = JSONArray.fromObject(jsonArray);return json.toString();
}@Override
public String execute() throws Exception {
String json = this.comment(root);
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
try {
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}}

Answer 3

我是直接拿他的例子来改的,
<script type="text/javascript">
$(function(){
$('#tt2').tree({
radio: false,
url: '../org/org!createJsonStr.action?pid=96',
onClick:function(node){
$(this).tree('toggle', node.target);
},
onContextMenu: function(e, node){
e.preventDefault();
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
因为我对此也不太熟悉,您能否给个JSP页面的完整代码看看呢,谢谢.

Answer 4

可尝试使用 jQuery easyUI 里面的tree
比ExtJS要轻量级很多。

Answer 5

我现在就是用它jQuery easyUI 

Answer 6

你的树大概可能有多少(全部节点)?我原来也是用jQuery easyUI ,当数的量大于1000的时候,就算异步加载,也很慢,(我当时是通过没点一个节点,预读节点下一层节点)最后,我的解决办法是用了dtree,,,,在说说jQuery easyUI,我用了很久,越来越不满意了,,,,,,
第一:慢(大数据量),数据少的时候还行
第二:提供的功能不能完全满足需要,做扩展又很难

Answer 7

注意生成json的时候;"state":"closed"//state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site