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

smallun

下列程序主要是利用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  style="text-decoration: underline">修改</a>  ';              _context+='<a  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();elsedn = 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>