Hi everyone,
I'm new to YUI, JSON, and a fairly novice JavaScripter - I usually deal with the server side of things and am comfortable in CFMX.
I'm re-writing an app, and want to use the (awesome!) drag-and-drop tree control to maintain various hierarchies within the database. I have found a few examples in the forums, and has kludged together something that kind of works (See below...)
Code:
/*
* Ext - JS Library 1.0 Alpha 3 - Rev 4
* Copyright(c) 2006-2007, Jack Slocum.
*/
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'boo.cfm'}),
enableDD:true,
containerScroll: true
});
tree.on("enddrag", function(tree) {
// create a simplified node hierarchy that can be JSONified
function simplifyNodes(node) {
var resultNode = {};
var kids = node.childNodes;
var len = kids.length;
for (var i = 0; i < len; i++) {
resultNode[kids[i].id] = simplifyNodes(kids[i]);
}
return resultNode;
}
// JSON-encode our tree
var encNodes = Ext.encode(simplifyNodes(tree.root));
// send it to the backend to save
YAHOO.util.Connect.asyncRequest(
'POST',
'boo.cfm',
null,
'action=treeUpdate&nodes=' + encodeURIComponent(encNodes)
);
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: '#arguments.nodeTitle#',
draggable:false,
id:'id_#arguments.nodeID#'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
With this I can create the tree I need from my hier, allow the user to assign new parent nodes, and also allow the user to reorder the nodes, then send the current state of the hierarchy back to the server where it waits to be processed if everything checks out and the user completes the process...
My problem starts with the "simplifyNodes()" function - which creates a JSON string that decodes into a structure of nested structures (objects) in CFMX (I'm using jsonDecode() from cflib.org)...
Structure keys in CF are unordered - so while I can determine if a node has a new parent, I can not determine the sort order easily, without custom parsing the JSON string (which does maintain the proper key order as an ordered list of sorts).
My questions are:
1. Is there an easier method to send the current tree state back via JSON string rather than recursive looping over node.childNodes? (I've looked thru the API guide and can not find anything - but it seems almost impossible that it doesn't exist somewhere I can simply "dump" the current data to the JSON encoder before sending it back to my handler...)
2. Barring that, can anyone hold my hand a little and help me with the "simplifyNodes()" function so it returns a JSON string that includes required arrays - to keep the nodes in the proper order when decoded by CFMX jsonDecode()... I'm new to JSON, and unsure of the formatting required. (And I'm too lazy to go learn it right now...)
What I am guessing is that if the JSON is created correctly, it will jsonDecode() into a complex object of nested structures with arrays... I can work with that...
Thanks in advance,
Mike