MCrosbie Posted February 29, 2008 Share Posted February 29, 2008 Hi there, I'm using this code for the front end of an application which has the following features: - Rename Groups/Categories - Add Groups/Categories - Remove Groups/Categories - Cannot drag and drop certain "leafs" out of one panel - Reorder leafs - Add leafs from one panel to another The problem is however that it didn't come with a backend php/json solution and I know very little about json. Could someone give me some suggestions? Here is the code here: <script type="text/javascript" language="javascript"> var TreePanels = function() { // shorthand var Tree = Ext.tree; return { init : function(){ // yui-ext tree var tree = new Ext.tree.TreePanel('tree-div1', { animate:false, loader: false, enableDD:true, containerScroll: true, rootVisible: false }); // set the root node this.root = new Ext.tree.TreeNode({ text: 'ROOT', allowDrug:false, allowDrop:true, id:'1' }); tree.setRootNode(this.root); buildCategoryTree(this.root, [ {"text":"General","id":"51","cls":"folder","allowDrop":true,"allowDrag":true, "children":[ {"text":"name","id":"96","cls":"system-leaf","allowDrop":false,"allowDrag":false,"leaf":true,"is_user_defined":"0","entity_id":"2078"}, {"text":"model","id":"495","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2087"},{ "text":"computer_manufacturers","id":"510","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2088"}, {"text":"sku","id":"98","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2079"}, {"text":"weight","id":"101","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2080"}, {"text":"color","id":"272","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2082"}, {"text":"status","id":"273","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2083"}, {"text":"tax_class_id","id":"274","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2084"}, {"text":"url_key","id":"481","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2086"}, {"text":"visibility","id":"526","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2089"}, {"text":"gift_message_available","id":"562","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2505"}, {"text":"manufacturer","id":"102","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2543"} ] } ]); // render the tree tree.render(); this.root.expand(false, false); tree.expandAll(); this.ge = new Ext.tree.TreeEditor(tree, { allowBlank:false, blankText:'A name is required', selectOnFocus:true, cls:'folder' }); this.root.addListener('beforeinsert', editSet.leftBeforeInsert); this.root.addListener('beforeappend', editSet.leftBeforeInsert); //this.ge.addListener('beforerender', editSet.editGroup); this.ge.addListener('beforeshow', editSet.editGroup); //this.ge.addListener('startedit', editSet.editGroup); //------------------------------------------------------------- var tree2 = new Ext.tree.TreePanel('tree-div2', { animate:false, loader: false, enableDD:true, containerScroll: true, rootVisible: false, lines:false }); // set the root node this.root2 = new Ext.tree.TreeNode({ text: 'ROOT', draggable:false, id:'free' }); tree2.setRootNode(this.root2); buildCategoryTree(this.root2, [{"text":"activation_information","id":"496","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"country_orgin","id":"507","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"default_category_id","id":"108","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0"},{"text":"finish","id":"509","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"gender","id":"501","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"megapixels","id":"513","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"room","id":"508","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shape","id":"476","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shirt_size","id":"525","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shoe_size","id":"502","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shoe_type","id":"107","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"}]); this.root2.addListener('beforeinsert', editSet.rightBeforeInsert); this.root2.addListener('beforeappend', editSet.rightBeforeAppend); this.root2.addListener('append', editSet.rightAppend); this.root2.addListener('remove', editSet.rightRemove); // render the tree tree2.render(); this.root2.expand(false, false); tree2.expandAll(); }, rebuildTrees : function(){ editSet.req.attributes = new Array(); rootNode = TreePanels.root; var gIterator = 0; for( i in rootNode.childNodes ) { if(rootNode.childNodes[i].id) { var group = rootNode.childNodes[i]; editSet.req.groups[gIterator] = new Array(group.id, group.attributes.text, (gIterator+1)); var iterator = 0 for( j in group.childNodes ) { iterator ++; if( group.childNodes[j].id > 0 ) { editSet.req.attributes[group.childNodes[j].id] = new Array(group.childNodes[j].id, group.id, iterator, group.childNodes[j].attributes.entity_id); } } iterator = 0; } gIterator ++; } editSet.req.not_attributes = new Array(); rootNode = TreePanels.root2; var iterator = 0; for( i in rootNode.childNodes ) { if(rootNode.childNodes[i].id) { if( rootNode.childNodes[i].id > 0 ) { editSet.req.not_attributes[iterator] = rootNode.childNodes[i].attributes.entity_id; } iterator ++; } } } }; }(); function buildCategoryTree(parent, config){ if (!config) return null; if (parent && config && config.length){ for (var i = 0; i < config.length; i++) { var node = new Ext.tree.TreeNode(config[i]); parent.appendChild(node); node.addListener('click', editSet.register); node.addListener('beforemove', editSet.groupBeforeMove); node.addListener('beforeinsert', editSet.groupBeforeInsert); node.addListener('beforeappend', editSet.groupBeforeInsert); if( config[i].children ) { for( j in config[i].children ) { if(config[i].children[j].id) { newNode = new Ext.tree.TreeNode(config[i].children[j]); node.appendChild(newNode); newNode.addListener('click', editSet.unregister); } } } } } } var editSet = function() { return { register : function(node) { editSet.currentNode = node; }, unregister : function() { editSet.currentNode = false; }, submit : function() { if( TreePanels.root.firstChild == TreePanels.root.lastChild ) { return; } if( editSet.SystemNodesExists(editSet.currentNode) ) { alert('This group contains system attributes. Please move system attributes to another group and try again.'); return; } if( editSet.currentNode && editSet.currentNode.attributes.cls == 'folder' ) { TreePanels.root.removeChild(editSet.currentNode); for( i in editSet.currentNode.childNodes ) { if( editSet.currentNode.childNodes[i].id ) { child = editSet.currentNode.childNodes[i]; newNode = new Ext.tree.TreeNode(child.attributes); if( child.attributes.is_user_defined == 1 ) { TreePanels.root2.appendChild(newNode); } } } editSet.req.removeGroups[editSet.currentNode.id] = editSet.currentNode.id; editSet.currentNode = false; } }, SystemNodesExists : function(currentNode) { for( i in currentNode.childNodes ) { if( currentNode.childNodes[i].id ) { child = editSet.currentNode.childNodes[i]; if( child.attributes.is_user_defined != 1 ) { return true; } } } }, rightAppend : function(node) { return; }, addGroup : function() { var group_name = prompt("Please enter a new group name",""); if( group_name == '' ) { this.addGroup(); } else if( group_name != false && group_name != null && group_name != '' ) { var newNode = new Ext.tree.TreeNode({ text : group_name, cls : 'folder', allowDrop : true, allowDrag : true }); TreePanels.root.appendChild(newNode); newNode.addListener('click', editSet.register); } }, editGroup : function(obj) { if( obj.editNode.attributes.cls != 'folder' ) { TreePanels.ge.cancelEdit(); return false; } }, save : function() { TreePanels.rebuildTrees(); var _validator = new Validation('set_prop_form', {onSubmit:false}); if( !_validator.validate() ) { return; } editSet.req.attribute_set_name = $('attribute_set_name').value; var req = {data : Ext.util.JSON.encode(editSet.req)}; var con = new Ext.lib.Ajax.request('POST', '?id=save', {success:editSet.success,failure:editSet.failure}, req); }, success : function(o) { var response = Ext.util.JSON.decode(o.responseText); if( response.error ) { $('messages').innerHTML = response.message; } else if( response.url ){ setLocation(response.url); } else if( response.message ) { alert(response.message); } }, failure : function(o) { alert('Unable to complete request. Please try again later.'); }, groupBeforeMove : function(tree, nodeThis, oldParent, newParent) { if( newParent.attributes.cls == 'folder' && nodeThis.attributes.cls == 'folder' ) { return false; } if( newParent == TreePanels.root && nodeThis.attributes.cls != 'folder' ) { return false; } }, rightBeforeAppend : function(tree, nodeThis, node, newParent) { if( node.attributes.is_user_defined == 1 ) { return true; } else { alert('You cannot remove system attribute from this set.'); return false; } }, rightBeforeInsert : function(tree, nodeThis, node, newParent) { var empty = TreePanels.root2.findChild('id', 'empty'); if( empty ) { return false; } if( node.attributes.is_user_defined == 1 ) { return true; } else { alert('You cannot remove system attribute from this set.'); return false; } }, groupBeforeInsert : function(tree, nodeThis, node, newParent) { if( node.allowChildren ) { return false; } }, rightAppend : function(tree, nodeThis, node) { var empty = TreePanels.root2.findChild('id', 'empty'); if( empty && node.id != 'empty' ) { TreePanels.root2.removeChild(empty); } }, rightRemove : function(tree, nodeThis, node) { if( nodeThis.firstChild == null && node.id != 'empty' ) { var newNode = new Ext.tree.TreeNode({ text : 'Empty', id : 'empty', cls : 'folder', is_user_defined : 1, allowDrop : false, allowDrag : false }); TreePanels.root2.appendChild(newNode); } }, leftBeforeInsert : function(tree, nodeThis, node, newParent) { if( node.allowChildren == false ) { return false; } } } }(); function initVars() { editSet.req = {}; editSet.req.attributes = false; editSet.req.groups = new Array(); editSet.req.not_attributes = false; editSet.req.attribute_set_name = false; editSet.req.removeGroups = new Array(); } initVars(); Ext.EventManager.onDocumentReady(TreePanels.init, TreePanels, true); </script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.