ce code développe un arborescence dans une frame c'est mieux pour quel soit utile ;)vous pouvez l'utilisé de la même manière que l'arborescence de votre système Windows oui un programme comme Windows le fait mais le code aussi :)
Source / Exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>arborecence WINgood</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js -->
<script type="text/javascript" src="js/drag-drop-folder-tree.js">
/************************************************************************************************************
(C) www.micking.1x.fr.com, Mai 2010
Update log:
.
Thank you!
</script>
<link rel="stylesheet" href="css/drag-drop-folder-tree.css" type="text/css"></link>
<link rel="stylesheet" href="css/context-menu.css" type="text/css"></link>
<style type="text/css">
/* CSS for the demo */
img{
border:0px;
}
</style>
<script type="text/javascript">
//--------------------------------
// Save functions
//--------------------------------
var ajaxObjects = new Array();
// Use something like this if you want to save data by Ajax.
function saveMyTree()
{
saveString = treeObj.getNodeOrders();
var ajaxIndex = ajaxObjects.length;
ajaxObjects[ajaxIndex] = new sack();
var url = 'saveNodes.php?saveString=' + saveString;
ajaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get
ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ; // Specify function that will be executed after file has been found
ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function
}
function saveComplete(index)
{
alert(ajaxObjects[index].response);
}
// Call this function if you want to save it by a form.
function saveMyTree_byForm()
{
document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
document.myForm.submit();
}
</script>
</head>
<body>
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">
<li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"><a href="#">Root node</a>
<ul>
<li id="node1"><a href="#">Europe</a>
<ul>
<li id="node2" noDelete="true"><a href="#">Norway</a>
<ul>
<li id="node3" noRename="true"><a href="#">Stavanger</a></li>
<li id="node6"><a href="#">Bergen</a></li>
<li id="node7"><a href="#">Oslo</a></li>
</ul>
</li>
<li id="node8"><a href="#">United Kingdom</a>
<ul>
<li id="node9"><a href="#">London</a></li>
<li id="node10"><a href="#">Manchester</a></li>
</ul>
</li>
<li id="node12"><a href="#">Sweden</a></li>
<li id="node13"><a href="#">Denmark</a></li>
<li id="node14"><a href="#">Germany</a>
<ul>
<li id="node141"><a href="#">Berlin</a>
<li id="node142"><a href="#">Munich</a>
<li id="node143"><a href="#">Stuttgart</a>
</ul>
</li>
</ul>
</li>
<li id="node15"><a href="#">Asia</a>
<ul>
<li id="node151"><a href="#">Japan</a>
<li id="node152"><a href="#">China</a>
<li id="node153"><a href="#">Indonesia</a>
</ul>
</li>
<li id="node16"><a href="#">Africa</a>
<ul>
<li id="node17"><a href="#">Tanzania</a></li>
<li id="node18"><a href="#">Kenya</a></li>
</ul>
</li>
<li id="node19"><a href="#">America</a>
<ul>
<li id="node20"><a href="#">Canada</a></li>
<li id="node21"><a href="#">United States</a></li>
<li id="node22"><a href="#">Mexico</a></li>
<li id="node23"><a href="#">Argentina</a></li>
</ul>
</li>
<li id="node24" noChildren="true"><a href="#">Cannot have children</a></li>
<li id="node25" noDrag="true"><a href="#">Cannot be dragged</a></li>
</ul>
</li>
</ul>
<form>
<input type="button" onclick="saveMyTree()" value="Save">
</Form>
<script type="text/javascript">
treeObj = new JSDragDropTree();
treeObj.setTreeId('dhtmlgoodies_tree2');
treeObj.setMaximumDepth(7);
treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
treeObj.initTree();
treeObj.expandAll();
</script>
<a href="#" onclick="treeObj.collapseAll()">Collapse all</a> |
<a href="#" onclick="treeObj.expandAll()">Expand all</a>
<p style="margin:10px">Good Test Friends</p>
<!-- Form - if you want to save it by form submission and not Ajax -->
<form name="myForm" method="post" action="saveNodes.php">
<input type="hidden" name="saveString">
</form>
</body>
</html>
Conclusion :
ce petit bout de code fonctionne superbement bien et développe une super arborescence
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.