Ext树状结构展示示例代码

以下为项目应用中的一些示例代码，供以后应用参考。

 

一.普通树状结构展示

 

1.前台JS代码

ccs.consultation.deptTreePanel = Ext.extend(Ext.Panel, {	
title:'组织结构',
layout : 'fit',
id:'deptTreePanel',
height : 312,   
border:false,
initComponent : function() {	
	// 组织树
	  var loader = new Ext.tree.DWRTreeLoader({
	            dataUrl: biDeptService.getDeptByUpDeptCode
	     });
	     loader.on('beforeload',function(treeLoader,node){
	        treeLoader.baseParams.id = node.attributes.id;
	     },this);	
	     
	 var root =new  Ext.tree.AsyncTreeNode({
	    id:sessionObj.firstDeptCode,
	    text:sessionObj.firstDeptName,
	    href:'',
		hrefTarget:'_blank'
	 });	
	
	var tree = new Ext.tree.TreePanel({
	        autoScroll: true,
	        border:false,
	        animate: false,
	        enableDD: false,
	        containerScroll: true,
	        root:root,
		    loader:loader,
		    id:'deptTreePanelTree'
		});
		
	tree.addListener('click',function(node,e){
	    var deptCode = node.attributes.id;
	    //查询人员		    
	    var params = {};
	    params.deptCode = deptCode;
	    var store = Ext.getCmp('csPersonViewGrid').getStore();
	    store.baseParams = {};//清空参数
	    Ext.apply(store.baseParams,params); 	
        store.load();	
	});					
	this.items = [tree];		
	this.tbar = [{
				text : '展开',
				handler : function() {
					tree.expandAll();
				}
			}, {
				text : '合拢',
					handler : function() {
						tree.collapseAll();
					}
				}];			
		ccs.consultation.deptTreePanel.superclass.initComponent.call(this);
	}
})

 2.后台Java代码

public List getDeptByUpDeptCode(String id) {
	String upDeptCode = id;
	List list = biDeptDao.getDeptByUpDeptCode(upDeptCode);
	List treeList = new ArrayList();
	for (int i = 0; i < list.size(); i++) {
		BiDept biDept = (BiDept)list.get(i);
		TreeNode node = new TreeNode();
		node.setId(biDept.getDeptCode());
		node.setText(biDept.getDeptName());
		node.setLeaf(false);
		treeList.add(node);
	}
	return treeList;
}

 TreeNode是自己定义的java类，含id,text,leaf等相关属性。

 

二.带选择框的树形结构展示

 

1.带选择框树结构展示代码

Ext.onReady(function(){
    var Tree = Ext.tree;			    
    var tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            dataUrl:'0005_checkbox_reorder_tree.php'
        })
    });
	// 选中父节点的checkbox后，自动选中子节点
	tree.on('checkchange', function(node, checked) {   
		node.expand();   
		node.attributes.checked = checked;   
		node.eachChild(function(child) {   
			child.ui.toggleCheck(checked);   
			child.attributes.checked = checked;   
			child.fireEvent('checkchange', child, checked);   
		});   
	}, tree);  
    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Ext JS',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);
    // render the tree
    tree.render();
    root.expand();
});

 2.显示选中的岗位

buttons : [{
	text : '显示选中的岗位',
	handler : function() {
		var msg = '', selNodes = tree.getChecked();
		Ext.each(selNodes, function(node) {
					if (msg.length > 0) {
						msg += ', ';
					}
					msg += node.text;
				});
		Ext.Msg.show({
					title : '选中岗位：',
					msg : msg.length > 0 ? msg : '无',
						icon : Ext.Msg.INFO,
						minWidth : 200,
						buttons : Ext.Msg.OK
					});
		}
	}]
});

 

要在树上展现checkbox,只需要在返回来的json数据中加上 checked 项（为true/false）。

返回的json数据如下：

[{"cls":"folder","id":10,"leaf":false,checked:false,
			"children":[{"cls":"file","id":11,"leaf":true,
				checked:false,"children":null,"text":"S600"},
			            {"cls":"file","id":12,"leaf":true,
				checked:false,"children":null,"text":"SLK200"}],
 "text":"Benz"}]