Using ExtJS to display the tree structure of LDAP

The following program mainly uses the ExtJS tree to make a layer list of the data in the LDAP to appear as one of the trees. Somewhat similar to the structure of Softerra LDAP. You can add similar actions, such as: Modify, drag, and so on. It's not listed here. The program uses the SPRING-LDAP so it needs the appropriate package. The ExtJS used is 2.3.0;

The JS code of the tree

Operate.js Code

Buildunittree=function () {

Defines the loader of the root node
var treeloader=new tree.treeloader ({dataurl: ' Unit.do?m=unittree '});

To load the root node asynchronously
var rootnode=new Ext.tree.AsyncTreeNode ({
ID: ',
Text: ' Directory root node ',
Expandable:true
});

var treepanel = new Ext.tree.TreePanel ({
Renderto: "Tree_div",//If you use Renderto, you cannot use the Setrootnode () method, you need to set the root property in Treepanel.
El: ' Unit_tree ',//filling area
Rootvisible:true,//Hide root node
Border:true,//Border
Animate:false,//animation effect
Autoscroll:true,//automatic scrolling
Enabledd:false,//dragging nodes
Checkmodel: ' Cascade ',//cascade multiple selection of trees
onlyleafcheckable:false,//is optional for all nodes of the tree.
Containerscroll:true,
Rootvisible:false,
Root:rootnode,
Loader
New Ext.tree.TreeLoader ({
Dataurl: "Tree.jsp",
Baseattrs: {UiProvider:Ext.tree.TreeCheckNodeUI}
})
});

Setting the root node
Treepanel.setrootnode (RootNode);

Responding to events, passing node parameters
Treepanel.on (' Beforeload ',
function (node) {
Treepanel.loader.dataurl= ' unit.do?m=unittree&parentid= ' +node.id; Loader to define child nodes
});
Treepanel.on (' Beforeexpandnode ', function (node) {//expand to load the corresponding data data in Gird
Buildunitgrid (node.id);
});
Treepanel.on (' Beforecollapsenode ', function (node) {//loading the upper layer of data in the grid when clicked
Buildunitgrid (node.parentNode.id);
});
Treepanel.on ("Check", function (node,checked) {alert (node.text+ "=" +checked)}); Registering the Check Event
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) {//Click a node in the tree to display the unit information for that node
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"});//define check box
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"])
});//define Data source
Store.load ()//Loading data
var colm=new Ext.grid.ColumnModel ([//Definition column
New Ext.grid.RowNumberer (),
CBSM,
{ID: ' id ', header: ' id ', sortable:true, dataindex: ' ID ', hidden:true},
{header: ' unit name ', Sortable:false,dataindex: ' Name '},
{header: "unit Address", Sortable:false, Dataindex: ' Adress '},
{header: "unit Phone", Sortable:false, Dataindex: ' Phone '},
{header: "Create Time", Sortable:true, Dataindex: ' CreateDate ', renderer:Ext.util.Format.dateRenderer (' Y-month D-Day ')},
{header: "Remarks", Sortable:false, Renderer:Ext.util.Format.ellipsis ("."), Dataindex: ' Comm '},
{header: Action, Dataindex: ' ID ', renderer:operation}
]);
var pagebar=new ext.pagingtoolbar ({//Definition paging bar
Pagesize:10,
Store:store,
Displayinfo:true,
Displaymsg: ' {0} to {1} piece of data total {2} ',
Emptymsg: "No Data"
});

Gridpanel=new Ext.grid.GridPanel ({
Store:store,
Cm:colm,
SM:CBSM,
Width: ' 60% ',
Autoheight:true,
Bbar:pagebar,
Frame:false,
Title: ' Unit list ',
Iconcls: ' Icon-grid ',
Autoheight:true,
El: "Unit_grid"

});
Gridpanel.render ();
}

function operation (value) {
var _context= ' <a onclick= "updateunit (' +value+ ')" style= "Text-decoration:underline" > Modify </a>&nbsp; &nbsp; ';
_context+= ' <a onclick= ' deleteunit (' +value+ ') ' style= ' text-decoration:underline ' > Delete </a> ';
return _context;
}