利用EXTJS来显示LDAP的树状结构

下列程序主要是利用EXTJS的tree对LDAP中的数据进行一层层list出现，显示为一个树状。有点类似Softerra LDAP的结构。可以添加类似的操作，比如：修改、拖拽等等。在这就没列出了。程序用到了Spring-Ldap 所以需要相应的包。extjs用的是2.3.0；


树的js代码

buildUnitTree=function(){

   //定义根节点的Loader
//   var treeloader=new Tree.TreeLoader({dataUrl:'unit.do?m=unitTree'});

   //异步加载根节点
    var rootnode=new Ext.tree.AsyncTreeNode({
        id:'',
        text:'目录树根节点',
        expandable :true
                });
    
   var treepanel = new Ext.tree.TreePanel({
                //renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
                el:'unit_tree',        //填充区域
                rootVisible:true,     //隐藏根节点
                border:true,          //边框
                animate:false,         //动画效果
                autoScroll:true,      //自动滚动
                enableDD:false,       //拖拽节点     
                checkModel: 'cascade',   //对树的级联多选  
                onlyLeafCheckable: false,//对树所有结点都可选          
                containerScroll:true,
                rootVisible : false,    
                root: rootnode,
                loader:
                    new Ext.tree.TreeLoader({
                        dataUrl:"tree.jsp",
                        baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }
                    })           
            });

   //设置根节点
    treepanel.setRootNode(rootnode);

   //响应事件，传递node参数
       treepanel.on('beforeload',
                function(node){
                   treepanel.loader.dataUrl='unit.do?m=unitTree&parentId='+node.id;    //定义子节点的Loader   
                });
    treepanel.on('beforeexpandnode',function(node){//展开时在gird加载对应的数据数据
            buildUnitGrid(node.id);
    });
    treepanel.on('beforecollapsenode',function(node){//当点击收起来的时候在grid加载上一层的数据
            buildUnitGrid(node.parentNode.id);        
    });
     treepanel.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件  
     treepanel.on('checkchange', function(node, checked) {  
                      //Ext.MessageBox.alert(buildUnitGrid(node.id));
                        
                    node.expand();  
                     node.attributes.checked = checked;  
                     node.eachChild(function(child) {  
                         child.ui.toggleCheck(checked);  
                         child.attributes.checked = checked;  
                        child.fireEvent('checkchange', child, checked);  
                     });
                 });  
     treepanel.on('click',function(node){//单击树的一个节点 grid显示该节点的单位信息
         gridPanel.store.proxy=new Ext.data.HttpProxy({url:"unit.do?m=viewUnit&id="+node.id});
         gridPanel.store.load();
         gridPanel.render();
     });            
      treepanel.render();           
      treepanel.getRootNode().expand();

}
var gridPanel;

buildUnitGrid=function(parentId){
    var cbsm=new Ext.grid.CheckboxSelectionModel({dataIndex:"id"});//定义复选框
    var store=new Ext.data.Store({
             proxy:new Ext.data.HttpProxy({url:"unit.do?m=unitList&parentId="+(parentId==undefined?null:parentId)}),
             reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root"},
             ["id",
             "name",
             "address",
             "phone", 
             {name : 'createDate', type : 'date', mapping : 'createDate.time', dateFormat : 'time' } ,
             "comm"])
         });//定义数据源
     store.load();//加载数据
     var colm=new Ext.grid.ColumnModel([//定义列
             new Ext.grid.RowNumberer(),
             cbsm,
             { id:'id',header: "id", sortable: true, dataIndex: 'id',hidden:true},
             {header:"单位名",sortable:false,dataIndex:"name"},
            {header: "单位地址",sortable: false, dataIndex: 'address'},
            {header: "单位电话",sortable: false, dataIndex: 'phone'},
            {header: "创建时间", sortable: true, dataIndex: 'createDate',renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
            {header: "备注",  sortable:false, renderer: Ext.util.Format.ellipsis(".",30), dataIndex: 'comm'},
              {header:"操作",dataIndex:'id',renderer:operation}
         ]);
//     var pageBar=new Ext.PagingToolbar({    //定义分页条
//                pageSize: 10,    
//                store: store,
//                displayInfo: true,    
//                displayMsg: '第{0} 到 {1} 条数据 共{2}条',    
//                emptyMsg: "没有数据"    
//            });
       
    gridPanel=new Ext.grid.GridPanel({
         store:store,
         cm:colm,
         sm:cbsm,
         width:'60%',
        autoHeight:true,
     //   bbar:pageBar,
       // frame:false,
        title:'单位列表',
       // iconCls:'icon-grid',
        autoHeight: true,
        el: "unit_grid"
         
     });
     gridPanel.render();
}

 function operation(value){
              var _context='<a onclick="updateUnit('+value+')" style="text-decoration: underline">修改</a>&nbsp;&nbsp;';
              _context+='<a onclick="deleteUnit('+value+')" style="text-decoration: underline">删除</a>';
              return _context;
          }

用的是jsp来创建json

<%@ page language="java" 
	import="java.util.*" 
	import="ldap.connect.*"
	import="org.springframework.context.ApplicationContext"
	import="org.springframework.context.support.ClassPathXmlApplicationContext"
	pageEncoding="utf-8"%>
<% 
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	
	String node = request.getParameter("node");
	//System.out.println(node);
	
	ApplicationContext ac = 
			new ClassPathXmlApplicationContext(
					"applicationContext.xml");
		LdapConnect ldapConnect = (LdapConnect)ac.getBean("userDao"); 
		
	String json = "";
	String id = "";
	List list = ldapConnect.getList(node);
	
	if(list.size()==0)	
		response.getWriter().print(json);
		
	json += "[";
	for(int i=0;i<list.size();i++){
		//System.out.println(list.get(i));
		if(node.length()>1 || !" ".equals(node)){
			id = list.get(i)+","+node;
		}
		else {
			id = (String)list.get(i);
		}
		//System.out.println(id);
		json += "{id:'"+id+"',text:'"+list.get(i)+"',qtip:'"+id+"'}";
		if(i+1 < list.size())
			json += ",";
	}
	json += "]";	
	response.getWriter().print(json);
	
%>

public List getList(String path) {
		DistinguishedName dn = null;
		if ("".equals(path) || path ==null)
			dn = new DistinguishedName();
		else
			dn = new DistinguishedName(path);
		return ldapTemplate.list(dn);
		
	}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">

<beans>
	<bean id="ldapSource" class="org.springframework.ldap.core.support.LdapContextSource">
		<property name="url" value="ldap://localhost:389" />
		<property name="base" value="DC=cz8,DC=net" />
		<property name="userDn" value="cn=manager,DC=cz8,DC=net" />
		<property name="password" value="password" />
	</bean>
	
	<bean id="ldapTemplate" class="org.springframework.ldap.core.LdapTemplate">
		<constructor-arg ref="ldapSource" />
	</bean>
	
	<bean id="userDao" class="ldap.connect.LdapConnect">
		<property name="ldapTemplate"><ref bean="ldapTemplate"/></property>
	</bean>
</beans>

HTML页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Example</title>
<link rel="stylesheet" type="text/css" href="ext-2.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.3.0/ext-all.js"></script>
<script type="text/javascript" src="ext-2.3.0/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="operate.js"></script>

</head>
<body>
<div id="layout"></div>
</body>
</html>