ExtJS树控件，完成机构树的呈现

这里仅仅是一个树控件的展现而已，并没有做其他操作，其目的主要是熟悉使用ExtJS实现树结构数据的展现。里面的一些具体参数的含义参照文档，这里我就把一些需要增加或修改地方的代码贴出来：

组织机构实体类：

@Entity
@Table(name="T_Org")
public class Organization {
	
	@Id
	@GeneratedValue
	private Integer id;
	
	private String name;
	
	@Column(unique=true)
	private String sn;
	
	private String description;
	
	@ManyToOne
	@JoinColumn(name="pid")
	private Organization parent;
	
	//如果使用ExtJS，可以考虑不加载
	@OneToMany(mappedBy="parent")
	@LazyCollection(LazyCollectionOption.EXTRA)
	private Set<Organization> children;
	
	//在界面上显示的文本
	public String getText(){
		return name;
	}
	
	//是否是叶子节点
	public boolean getLeaf(){
		if(getChildren().size() == 0){
			return true;
		}
		return false;
	}
	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSn() {
		return sn;
	}
	public void setSn(String sn) {
		this.sn = sn;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public Organization getParent() {
		return parent;
	}
	public void setParent(Organization parent) {
		this.parent = parent;
	}
	public Set<Organization> getChildren() {
		return children;
	}
	public void setChildren(Set<Organization> children) {
		this.children = children;
	}
}

 下面是请求action类：

@Controller("orgAction")
@Scope("prototype")
public class OrgAction extends BaseAction implements ModelDriven{

	private Organization org;
	
	private int parentId;
	
	@Resource
	private OrgManager orgManager;
	
	//从界面上传递过来的参数
	private String node;
	
	//打开机构树
	public void execute(){
		
		int pid = 0;
		//首次加载node为空，则将异常忽略掉
		try {
			pid = Integer.parseInt(node);
		} catch (Exception e) {
		}
		
		PagerModel pm = orgManager.searchOrgs(pid);
		
		toJSON(pm.getDatas());
		
	}
	public Object getModel() {
		if(org == null){
			org = new Organization();
		}
		return org;
	}

	public Organization getOrg() {
		return org;
	}

	public void setOrg(Organization org) {
		this.org = org;
	}

	public int getParentId() {
		return parentId;
	}

	public void setParentId(int parentId) {
		this.parentId = parentId;
	}
	
}

 

下面贴出js文件：注意这里的nodeType: 'async',//异步请求，参数并未起作用，主要原因是由我们在实体类中设置了双向关联，hibernate加载数据时一块给加载了。

Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';//指定空白图片的位置，不指定会从网上查找
Ext.onReady(function(){
	Ext.QuickTips.init(); 
	
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        rootVisible: false,//是否显示root
        // auto create TreeLoader
        dataUrl: 'org.action',

        root: {
            nodeType: 'async',//异步请求
            text: '机构信息',
            draggable: false,//是否可以拖放
            id: 'src'
        }
    });

    tree.on("click",
    	function(node,e){
    		alert("你点击的机构ID是："+node.id);
    	}
    );
    
    // render the tree
    tree.render('orgtree');
    //tree.getRootNode().expand();	
});

 

页面：

<div id="orgtree"></div>

 下面来看看效果图吧：