ExtJS动态创建树结构

最新推荐文章于 2016-06-23 10:29:49 发布

路在脚下2017

最新推荐文章于 2016-06-23 10:29:49 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJS 文章标签： javascript java 大数据 ViewUI

本文链接：https://blog.youkuaiyun.com/steve_19851023/article/details/84122859

ExtJS 专栏收录该内容

2 篇文章

订阅专栏

这两天在研究ExtJS，对其有了深刻的认识。总结如下：

根据显示数据量，决定Ext树的类型。如果是大数据量，一般采用创建Ext.tree.AsyncTreeNode根节点的方式

(即每点击一个树节点后，动态的从后台读取数据。优点：加快显示速度) 。如果数据量小，一般采用Ext.tree.TreeNode

这样的根节点。

第一种代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<title>树结构</title>
<script type="text/javascript">
Ext.onReady(function() {
	var root = new Ext.tree.AsyncTreeNode({
				id : "root",
				text : "树的根"
	});

	var loader = new Ext.tree.TreeLoader({
				url : '<%=request.getContextPath()%>/User_getNodeTree'
	});
	
	loader.on("beforeload", function(loader, node) {
		     alert("---"+node.id);
			loader.baseParams.nodeId = node.id;
	});

	var tree = new Ext.tree.TreePanel({
				renderTo : "tree",
				root : root,
				loader : loader,
				width : 200,
				height : 300
			});
});
</script>
</head>
<body>
 <!-- 要有一定高度Ext2.0,不然看不见 -->
	<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div> 
</body>
</html>

实体描述：构造包括 id,text,cls,leaf,href属性的实体

后台返回数据：

每次点击一个树节点后，从后台读取该节点的子节点的信息。例如：

[{text:'用户',href:'test.jsp',leaf:true},
{text:'管理员',href:'##',leaf:true}]

第二种树：

页面：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<title>树结构</title>
<script type="text/javascript">
Ext.onReady(function() {

var treePanel=new Ext.tree.TreePanel({
           renderTo : "tree",
            useArrows:true,
            autoScroll:true,
            animate:true,
            enableDD:true,
           //是否显示跟节点 
           rootVisible:false,
           frame: true,
           containerScroll: true
           
        });

 var root=new Ext.tree.AsyncTreeNode({
		            id:'4',
		            text:'root',
		            leaf:false,
		            loader:new Ext.tree.TreeLoader({dataUrl:'/User_getNodeTree'})});
			 
            treePanel.setRootNode(root);
           treePanel.getRootNode().expand(true);

});
</script>
</head>
<body>
 <!-- 要有一定高度Ext2.0,不然看不见 -->
	<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div> 
</body>
</html>

实体类：

package com.order.entity;

import java.util.List;


public class TreeModule{
	/*
	* 此bean用于构建树向其中注入有关的信息，将SysModule中的信息拷贝到JsonTreeModule中
	*/
	private String id; //ID 
	private String text; //节点显示 
	private String cls; //图标 
	private boolean leaf; //是否叶子 
	private String href; //链接 
	private String hrefTarget; //链接指向 
	private boolean expandable; //是否展开 
	private String description; //描述信息 
	private List<TreeModule> children;
	
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getCls() {
		return cls;
	}
	public void setCls(String cls) {
		this.cls = cls;
	}
	public boolean isLeaf() {
		return leaf;
	}
	public void setLeaf(boolean leaf) {
		this.leaf = leaf;
	}
	public String getHref() {
		return href;
	}
	public void setHref(String href) {
		this.href = href;
	}
	public String getHrefTarget() {
		return hrefTarget;
	}
	public void setHrefTarget(String hrefTarget) {
		this.hrefTarget = hrefTarget;
	}
	public boolean isExpandable() {
		return expandable;
	}
	public void setExpandable(boolean expandable) {
		this.expandable = expandable;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public List<TreeModule> getChildren() {
		return children;
	}
	public void setChildren(List<TreeModule> children) {
		this.children = children;
	}

}

Struts2：

/**
	 * 创建菜单树结构
	 * @return
	 */
	public String getNodeTree(){
		PrintWriter out=null;
		response.setContentType("text/html;charset=GBK");
		try {
			out=response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		User user=(User)session.getAttribute("user");
		if(user!=null){
			UserService uservice=new UserService();
			String allprivs=user.getPrivs();
			List<String> privsList=Arrays.asList(allprivs.trim().split(","));
			List<MenuPanel> menulist=uservice.getAllNodes();
			List<TreeModule> list=new  ArrayList<TreeModule>();
			for(MenuPanel mp:menulist){
				if(mp.getParantNodeID()==0){
					TreeModule treeNode=new TreeModule();
					treeNode.setId(mp.getNodeId());
					treeNode.setText(mp.getMenuName());
					treeNode.setLeaf(mp.isLeaf());
					treeNode.setHref(mp.getActionPath());
					List<TreeModule> children=new ArrayList<TreeModule>();
					for(MenuPanel menu:menulist){
					    if(menu.getParantNodeID().intValue()==mp.getId().intValue()
					    		&&privsList.contains(menu.getNodeId().trim())){
					    	TreeModule subtreeNode=new TreeModule();
					    	subtreeNode.setId(menu.getNodeId());
					    	subtreeNode.setText(menu.getMenuName());
					    	subtreeNode.setLeaf(menu.isLeaf());
					    	subtreeNode.setHref(menu.getActionPath());
					    	children.add(subtreeNode);
					    }
					}
					if(children.size()>0){
						treeNode.setChildren(children);
						list.add(treeNode);
					}
				}
			}
			JSONArray obj=JSONArray.fromObject(list);
			String res = obj.toString();
			out.println(res);
		}
		return null;
	}

有些地方参考网上的一些代码。