extJs+JSON 动态树

来源：互联网发布：东京学艺大学知乎编辑：程序博客网时间：2024/05/16 08:16

现学现卖，实现从数据库动态加载树结构，不会贴图，抱歉

1，数据库设计

Oracle DDL脚本：create table ORGANIZATION( ORGID NUMBER(10) not null, PARENTID NUMBER(10) not null, ORGNAME VARCHAR2(32) not null, ISAVAILABLE NUMBER(1) default 1 not null);alter table ORGANIZATION add constraint PK_ORGID primary key (ORGID);alter table ORGANIZATION add constraint FK_ORGID_PARENTID foreign key (PARENTID) references ORGANIZATION (ORGID);初始化数据内容（注意第一行数据是必需的）：insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (-100, -100, '组织机构图', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (1, -100, '公司总部1', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (2, -100, '公司总部2', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (3, -100, '公司总部3', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (4, 1, '公司总部1-1', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (5, 1, '公司总部1-2', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (6, 2, '公司总部2-1', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (7, 2, '公司总部2-2', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (8, 3, '公司总部3-1', 1);insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (9, 3, '公司总部3-2', 1);

2，org.jsp

<%@ 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"><title>Org Tree</title><link rel="stylesheet" href="js/resources/css/ext-all.css" mce_href="js/resources/css/ext-all.css" type="text/css"><mce:script type="text/javascript" src="js/adapter/ext/ext-base.js" mce_src="js/adapter/ext/ext-base.js"></mce:script><mce:script type="text/javascript" src="js/ext-all.js" mce_src="js/ext-all.js"></mce:script><mce:script type="text/javascript" src="org.js" mce_src="org.js"></mce:script></head><body><div id="tree-div" align="left"></div></body></html>

org.js

Ext.onReady(function(){var root=new Ext.tree.AsyncTreeNode({text:"组织机构树",id:"-100"//默认的node值});var tree=new Ext.tree.TreePanel({renderTo:'tree-div',root:root,width:200,border:true, //边框 animate:true, //动画效果 autoScroll:true, //自动滚动 enableDD:false, //拖拽节点 containerScroll:true, loader:new Ext.tree.TreeLoader({dataUrl:'/webApp/organizationAction.do?method=showOrganization'//实现动态加载数据//这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的ID})});});

3,organizationAction

package com.tds.struts.action;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import org.apache.struts.actions.DispatchAction;import com.tds.hibernate.dao.OrganizationDao;import com.tds.hibernate.pojo.Organization;import com.tds.util.JSONTreeNode;public class OrganizationAction extends DispatchAction {private OrganizationDao organizationDao;public void setOrganizationDao(OrganizationDao organizationDao) {this.organizationDao = organizationDao;}public ActionForward showOrganization(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {String node=request.getParameter("node");//得到子节点的集合List<Organization> organizationList=organizationDao.getChildNodeById(node);List<JSONTreeNode> treeNodeList=new ArrayList<JSONTreeNode>();for (int i = 0; i < organizationList.size(); i++) {Organization organization=organizationList.get(i);JSONTreeNode treeNode=new JSONTreeNode();treeNode.setId(organization.getOrgId());treeNode.setText(organization.getOrgname());if (organizationDao.hasChildNode(organization.getOrgId())) {treeNode.setLeaf(false);}else{treeNode.setLeaf(true);}treeNodeList.add(treeNode);}JSONArray json=JSONArray.fromObject(treeNodeList);response.setHeader("Cache-Control", "no-cache");response.setContentType("text/json;charset=GBK");PrintWriter writer = response.getWriter();writer.print(json.toString());return null;}}

4,dao

package com.tds.hibernate.dao.impl;import java.util.List;import org.springframework.orm.hibernate3.support.HibernateDaoSupport;import com.tds.hibernate.dao.OrganizationDao;import com.tds.hibernate.pojo.Organization;public class OrganizationDaoImpl extends HibernateDaoSupport implements OrganizationDao {@Overridepublic List<Organization> getChildNodeById(String node) {return getHibernateTemplate().find("from Organization o where o.isAvailable='1' and o.parentId='"+node+"' and o.orgId!='"+node+"'");}@Overridepublic boolean hasChildNode(String orgId) {List list=getHibernateTemplate().find("from Organization o where o.isAvailable='1' and o.parentId='"+orgId+"'");if (list.size()==0) {return false;}return true;}}

5,JSONTreeNode

package com.tds.util;import java.io.Serializable;public class JSONTreeNode implements Serializable {private static final long serialVersionUID = 1L;public static void main(String[] args) {}private String id; // IDprivate String text; // 节点显示private boolean leaf; // 是否叶子private String description; // 描述信息public static long getSerialversionuid() {return serialVersionUID;}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 boolean isLeaf() {return leaf;}public void setLeaf(boolean leaf) {this.leaf = leaf;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public static long getSerialVersionUID() {return serialVersionUID;}}

其他配置文件相信大家都会写的，等完善后传代码