Tree builder JS
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
var arr=new Array("Start","Country","State","Sub Location1","Sub Location2","Sub Location3","Sub Location4","Sub Location5","Sub Location6","Postal Code","Longitude","Latitude");
for(var i=0; i<dataObjs.length;i++){
var typ = dataObjs[i].typeId;
var dumm = parseInt(typ);
var titl = dataObjs[i].title+”( “+arr[dumm]+” )”;
var node = dojo.widget.createWidget(“TreeNode”,{
title:titl ,locationName:dataObjs[i].title, locationId:dataObjs[i].locationId , typeId:dataObjs[i].typeId , parentId:dataObjs[i].parentId
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (treeDat){
myTreeWidget = dojo.widget.createWidget(“Tree”,{
widgetId:”myNewTreeWidget”
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById(“myWidgetContainer”);
var placeHolder = document.getElementById(“treePlaceHolder”);
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
DemoTreeManager.init();
}
};
Context menus and its actions
var DemoTreeManager = {
djWdgt: null,
myTreeWidget: null,
addTreeContextMenu: function(){
var ctxMenu = this.djWdgt.createWidget(“TreeContextMenu”,{});
ctxMenu.addChild(this.djWdgt.createWidget(
“TreeMenuItem”,{caption:”Add Location Component”,
widgetId:”ctxAdd”}));
ctxMenu.addChild(this.djWdgt.createWidget(
“TreeMenuItem”,{caption:”Edit Location Component”,
widgetId:”ctxEdit”}));
ctxMenu.addChild(this.djWdgt.createWidget(
“TreeMenuItem”,{caption:”Delete Location Component”,
widgetId:”ctxDelete”}));
document.body.appendChild(ctxMenu.domNode);
/* Bind the context menu to the tree */
ctxMenu.listenTree(this.myTreeWidget);
},
addController: function(){
this.djWdgt.createWidget(
“TreeBasicController”,
{widgetId:”myTreeController”,DNDController:”create”}
);
},
bindEvents: function(){
/* Bind the functions in the TreeActions object to the
context menu entries */
dojo.event.topic.subscribe(“ctxAdd/engage”,
function (menuItem) {
TreeActions.addNewNode(menuItem.getTreeNode(), “myTreeController”); }
);
dojo.event.topic.subscribe(“ctxDelete/engage”,
function (menuItem) { TreeActions.removeNode(menuItem.getTreeNode(),
“myTreeController”); }
);
dojo.event.topic.subscribe(“ctxEdit/engage”,
function (menuItem) { TreeActions.editNode(menuItem.getTreeNode(),
“myTreeController”); }
);
},
init: function(){
/* Initialize this object */
this.djWdgt = dojo.widget;
this.myTreeWidget = this.djWdgt.manager.
getWidgetById(“myNewTreeWidget”);
this.addTreeContextMenu();
this.addController();
this.bindEvents();
}
};
Its actions
var TreeActions = {
addNewNode: function(parent,controllerId){
this.controller = dojo.widget.manager.getWidgetById(controllerId);
if (!parent.isFolder) {
parent.setFolder();
}
var arr=new Array("Country - 1","State - 2","Sub Location1 - 3","Sub Location2 - 4","Sub Location3 - 5","Sub Location4 - 6","Sub Location5 - 7","Sub Location6 - 8","Postal Code - 9","Longitude - 10","Latitude - 11");
var typeid = parent.typeId;
var str="Enter corresponding code for the location type \n";
for(var i=typeid;itypeid){
if(dummy<12){
var titl = prompt("Enter the location name","");
if(titl==""){
alert("Enter valid name");
}
else{
var rad = this.controller;
AddressHierarchy.createLocation(titl,parseInt(dummy)-1,parent.locationId,function(data){
var arr=new Array("Start","Country","State","Sub Location1","Sub Location2","Sub Location3","Sub Location4","Sub Location5","Sub Location6","Postal Code","Longitude","Latitude");
var dumm = parseInt(data[2]);
var titl = data[0]+"( "+arr[dumm]+" )";
var res = rad.createChild(parent, 0, { title: titl,locationName:data[0], locationId : data[1],typeId : data[2], parentId : data[3] });
})
}}
else{
alert(“Invalid location type”);
}
}
else{
alert(“Invalid location type”);
}
},
removeNode: function(node,controllerId){
if(node.title!=”Start”){
if (!node) {
alert(“Nothing selected to delete”);
return false;
}
else{
var name = node.locationName;
var parid = node.parentId;
this.controller = dojo.widget.manager.getWidgetById(controllerId);
var rad = this.controller;
if(!confirm(“Are you sure you want to delete “+name)){
return false;
}
AddressHierarchy.deleteLocation(parid,name,function() {
var res = rad.removeNode(node, dojo.lang.hitch(this));
})
}
}
else{
alert(“Cannot remove”);
}
},
editNode: function(node,controllerId){
if(node.title!=”Start”){
if (!node) {
alert(“Nothing selected to edit”);
return false;
}
else{
var oldname = node.locationName;
var parid = node.parentId;
this.controller = dojo.widget.manager.getWidgetById(controllerId);
var rad = this.controller;
var newname = prompt(“Enter the location name”,oldname);
if(newname!=null){
AddressHierarchy.editLocation(parid,oldname,newname, function(){
var arr=new Array(“Start”,”Country”,”State”,”Sub Location1″,”Sub Location2″,”Sub Location3″,”Sub Location4″,”Sub Location5″,”Sub Location6″,”Postal Code”,”Longitude”,”Latitude”);
var dumm = parseInt(node.typeId);
var titl = newname+”( “+arr[dumm]+” )”;
node.edit({title:titl , locationName:newname});
})}
}
}
else{
alert(“Cannot Edit”);
}
}};
JSON input from servlet
function loadData(){
$.getJSON("${pageContext.request.contextPath}/moduleServlet/addresshierarchy/addressTree",
function(data){
TreeBuilder.buildTree(data);
});
}
HTML code before the tree loads
<div id=”myWidgetContainer”>
<span id=”treePlaceHolder”
style=”background-color:#F00; color:#FFF;”>
Loading…
</span>
</div>
