EXT 动态加载部门及员工的TREE

此DEMO 建立在 Struts +Hibernate

建立2张表 person ,department

 

 

 

 

定义2个类 person.java ,department.java

建立person.hbm.xml , department.hbm.xml

 

department.hbm.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- 
    Mapping file autogenerated by MyEclipse Persistence Tools
-->
<hibernate-mapping>
    <class name="com.bkx.oa.vo.Department" table="department" catalog="bkxoa">
        <id name="deptid" type="java.lang.Integer">
            <column name="deptid" />
            <generator class="native"></generator>
        </id>
        <property name="dparentid" type="java.lang.Integer">
            <column name="dparentid" />
        </property>
        <property name="dleaf" type="java.lang.Integer">
            <column name="dleaf" />
        </property>
        <property name="dchild" type="java.lang.Integer">
            <column name="dchild" />
        </property>
        <property name="dname" type="java.lang.String">
            <column name="dname" length="32" />
        </property>
        <property name="dloc" type="java.lang.String">
            <column name="dloc" length="32" />
        </property>
        <property name="dbusiness" type="java.lang.String">
            <column name="dbusiness" length="32" />
        </property>
        <set name="persons" inverse="true" cascade="all" lazy="false">
        	<key>
        		<column name="deptid" />
        	</key>
        	<one-to-many class="com.bkx.oa.vo.Person" />
        </set>
    </class>
</hibernate-mapping>

 

 person

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- 
    Mapping file autogenerated by MyEclipse Persistence Tools
-->
<hibernate-mapping>
    <class name="com.bkx.oa.vo.Person" table="person" catalog="bkxoa">
        <id name="pid" type="java.lang.String">
            <column name="pid" length="32" />
            <generator class="assigned"></generator>
        </id>
        <many-to-one name="department" class="com.bkx.oa.vo.Department">
            <column name="deptid" />
        </many-to-one>
        <property name="pname" type="java.lang.String">
            <column name="pname" length="32" />
        </property>
        <property name="page" type="java.lang.Integer">
            <column name="page" />
        </property>
        <property name="psex" type="java.lang.String">
            <column name="psex" length="4" />
        </property>
    </class>
</hibernate-mapping>

 

 

 

 建立一个Action OrgTreeJsonDataAction

/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package com.bkx.oa.struts.action;

import java.util.Iterator;
import java.util.List;
import java.util.Set;

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

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.bkx.oa.factory.DaoFactory;
import com.bkx.oa.vo.Department;
import com.bkx.oa.vo.Person;

/** 
 * MyEclipse Struts
 * Creation date: 11-01-2008
 * 
 * XDoclet definition:
 * @struts.action validate="true"
 */
public class OrgTreeJsonDataAction extends Action {
	/*
	 * Generated Methods
	 */

	/** 
	 * Method execute
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return ActionForward
	 */
	private String JosnString;
	private String person;
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		// TODO Auto-generated method stub
		int parentid = Integer.parseInt(request.getParameter("parentid"));
		try {
			if(parentid==-100){
				parentid=0;
			}
			List<Department> list = DaoFactory.getDepartmentInstance().queryByDeptid(parentid);
			Iterator<Department> iter = list.iterator();
			if (list != null && !list.isEmpty()) {
				int i = 0;
				int last = list.size();
				String person = "";
				while (iter.hasNext()) {
					Department de = new Department();
					de = iter.next();
					if(de.getPersons().size()>0){
						person=" ,"+this.getPersonname(de.getPersons());
					}
					//如果只有一行
					if(last==1){
						this.setJosnString("[{\"text\" :\""
								+ de.getDname().toString()
								+ "\" ,\"id\" :\"" + de.getDeptid()
								+ "\" ,\"cls\" :\"folder\"" +
								person+		"}] ");
					//如果有多行显示第一行
					}else if (i == 0) {
						this.setJosnString("[{\"text\" :\""
								+ de.getDname().toString()
								+ "\" ,\"id\" :\"" + de.getDeptid()
								+ "\" ,\"cls\" :\"folder\"" +
								person+		"} ");
					//判断是不是最后一行	
					} else if (i == (last - 1)) {

						this.setJosnString(this.getJosnString()
								+ ",{\"text\" :\""
								+ de.getDname().toString()
								+ "\" ,\"id\" :\""
								+ de.getDeptid() + "\" ,\"cls\" :\"folder\"" +
								person+		"}]");
					//显示中间部分	
					} else {

						this.setJosnString(this.getJosnString()
								+ ",{\"text\" :\""
								+ de.getDname().toString()
								+ "\" ,\"id\" :\""

								+ de.getDeptid() + "\" ,\"cls\" :\"folder\"" +
								person+		"}");
					}

					i++;

				}

			} else {

				this.setJosnString("");

			}
			
			//System.out.print(this.getJosnString());

		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.print(this.getJosnString());
		request.setAttribute("treenote", this.getJosnString());
		return mapping.findForward("tree");
	}
	public String getPersonname(Set<Person> p){
		this.setPerson(" ");
		if(p!=null&& !p.isEmpty()){
			Iterator<Person> iter = p.iterator();
			int i=0;
			int last = p.size();
			while(iter.hasNext()){
				Person person = new Person();
				person =iter.next();
				if(last==1){
					this.setPerson(this.getPerson()+"\"children\" :[{\"text\" :\""+person.getPname()+"\" ,\"id\" :\""+person.getPid()+"\" ,\"leaf\" :\"true\"}] ");
				}else if(i==0){
					this.setPerson(this.getPerson()+"\"children\" :[{\"text\" :\""+person.getPname()+"\" ,\"id\" :\""+person.getPid()+"\" ,\"leaf\" :\"true\"}");
				}else if(i==last-1){
					this.setPerson(this.getPerson()+",{\"text\" :\""+person.getPname()+"\" ,\"id\" :\""+person.getPid()+"\" ,\"leaf\" :\"true\"}] ");
				}else {
					this.setPerson(this.getPerson()+",{\"text\" :\""+person.getPname()+"\" ,\"id\" :\""+person.getPid()+"\" ,\"leaf\" :\"true\"}");
				}
				i++;
			}
		}else{
			this.setPerson("");
		}
		return this.getPerson();
	}
	
	
	public String getJosnString() {
		return JosnString;
	}
	public void setJosnString(String josnString) {
		JosnString = josnString;
	}
	public String getPerson() {
		return person;
	}
	public void setPerson(String person) {
		this.person = person;
	}
}

 

 

建立一个JS文件

Ext.onReady(function() {

      var Tree = Ext.tree;

      var tree = new Tree.TreePanel( {

            el : 'tree-div',//目标div容器

            autoScroll : true,

            animate : true,

            enableDD : true,

            containerScroll : true,

            loader : new Tree.TreeLoader( {

                  dataUrl : 'orgTreeJsonData.do'// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值

            })

      });

      var root = new Tree.AsyncTreeNode( {

            text : '组织机构树',

            draggable : false,

            id : '-100'//默认的node值：?node=-100

      });


      tree.setRootNode(root);
	  tree.on('beforeload', function(node){    
      tree.loader.dataUrl = 'orgTreeJsonData.do?parentid='+node.id;    
      }); 
	   tree.setRootNode(root);
	   //为树上的节点添加事件
	   tree.on('click',function(node){
		 Ext.Msg.alert('             您点击的是:           ',node.text);
	   });

      tree.render();

      root.expand();
	
});

 Struts-config.xml

 

建立一个HTML页面

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/js/ext-all.js"></script>
	<script type="text/javascript" src="org.js"></script>
 </HEAD>

 <BODY>

 <div id="tree-div" style="overflow:auto; height:350px;width:300px;border:2px solid #c3daf9;"></div> 

 </BODY>


</HTML>

 

 最后结果