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

核心提示：下列程序主要是利用EXTJS的tree对LDAP中的数据进行一层层list出现，显示为一个树状，利用EXTJS来显示LDAP的树状结构，有点类似Softerra LDAP的结构，可以添加类似的操作，则不能使用setRootNode()方法，需要在TreePanel中设置root属性，比如：修改、拖拽等等，在这就没列出了

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

树的js代码

Operate.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;
　　　　　　　　　 }