Yahoo UI: Ordner auslesen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Yahoo UI: Ordner auslesen

    Hi Leute,

    ich hab auf der easy coding Site das PHP Script zum auslesen von Ordner gefunden. Ist ja genial.

    Nun will ich realisieren, dass das Ergebnis in einer ausklappbaren Baumstruktur (guggst du)angelegt wird. Das dazugehörtige script sieht so aus:

    Quellcode

    1. <script type="text/javascript">
    3. var tree;
    4. var nodes = new Array();
    5. var nodeIndex;
    7. function treeInit() {
    8. buildRandomTextNodeTree();
    9. }
    11. function buildRandomTextNodeTree() {
    12. tree = new YAHOO.widget.TreeView("treeDiv1");
    13. tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
    14. tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
    16. for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
    17. var tmpNode = new YAHOO.widget.TextNode("label-" + var file, tree.getRoot(), false);
    18. buildRandomTextBranch(tmpNode);
    19. }
    21. tree.draw();
    22. }
    24. var callback = null;
    26. function buildRandomTextBranch(node) {
    27. if (node.depth < 6) {
    28. YAHOO.log("buildRandomTextBranch: " + node.index);
    29. for ( var i = 0; i < Math.floor(Math.random() * 6) ; i++ ) {
    30. var tmpNode = new YAHOO.widget.TextNode(node.label + "*" + i, node, false);
    31. buildRandomTextBranch(tmpNode);
    32. }
    33. }
    34. }
    35. </script>
    Alles anzeigen


    folgendes funktioniert leider nicht:

    Quellcode

    1. var tmpNode = new YAHOO.widget.TextNode(node.label + "*" +<?=$var?>, node, false);


    oder

    Quellcode

    1. var tmpNode = new YAHOO.widget.TextNode(node.label + <?php echo '$folderArray' ?>, node, false, node, false);


    Jmd ne Idee?

  • das zweite kann nicht funktionieren, da variablen zwischen einfachen anführungszeichen nicht interpretiert werden

    hab dir hier mal was runtergetippt
    ist ungetestet - außerdem ist die ajax funktion nicht implementiert, stattdessen wird standardinhalt für die unterordner geladen - bin sicher, du kennst die Yahoo API besser als ich und kannst das schneller umsetzen

    Quellcode

    1. function buildRandomTextNodeTree() {
    2. tree = new YAHOO.widget.TreeView("treeDiv1");
    3. tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
    4. tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
    6. var arr = new Array(<?php
    7. $handle = opendir('.');
    8. while ($file = readdir ($handle)) {
    9. echo (++$i>1?',':'')."'$file'";
    10. }
    11. closedir($handle);
    12. ?>);
    14. for (var i = 0; i < arr.length; i++) {
    15. var tmpNode = new YAHOO.widget.TextNode(arr[i], tree.getRoot(), false);
    16. buildRandomTextBranch(tmpNode);
    17. }
    19. tree.draw();
    20. }
    22. function buildRandomTextBranch(node) {
    23. if (node.depth < 6) {
    24. YAHOO.log("buildRandomTextBranch: " + node.index);
    26. //lade ordnerinhalt aus ajax datei
    27. //Beispielinhalt START
    28. var response = "unterordner1;unterordner2;unterordner3";
    29. //Beispielinhalt END
    31. var arr = new Array();
    32. arr = response.split(';');
    33. for (var i = 0; i < arr.length; i++) {
    34. var tmpNode = new YAHOO.widget.TextNode(arr[i], node, false);
    35. buildRandomTextBranch(tmpNode);
    36. }
    37. }
    38. }
    Alles anzeigen

  • also wenn ich den Code verwende, bring ich den Prozessor zum glühen (100% Auslastung IExplorer)

    Der ganze (ursprüngliche) Code sieht so aus: (aus Gründen der Übersicht aheb ich style Anweisungen entfernt)

    Quellcode

    1. <html>
    2. <body onLoad="treeInit()">
    3. <link rel="stylesheet" type="text/css" href="css/local/tree.css">
    4. <script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
    5. <!-- The following are required for the logger -->
    6. <script type="text/javascript" src="../../build/event/event.js"></script>
    7. <script type="text/javascript" src="../../build/dom/dom.js"></script>
    8. <script type="text/javascript" src="../../build/logger/logger.js"></script>
    9. <!-- End logger reqs -->
    11. <script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
    12. <script type="text/javascript" src="../../build/animation/animation.js"></script>
    14. <?
    15. function ordnerinhalt($ordner='img')
    16. {
    17. $handle = opendir($ordner);
    18. while ($file = readdir ($handle)) {
    19. if($file{0} != '.') { //Versteckte Dateien nicht anzeigen
    20. if(is_dir($ordner.'/'.$file)) {
    21. $folderArray[] = $file;
    22. } else {
    23. $fileArray[] = $file;
    24. }
    25. }
    26. }
    27. closedir($handle);
    28. //Erst die Ordner ausgeben
    29. if(isset($folderArray)) {
    30. asort($folderArray);
    31. foreach($folderArray as $row) {
    32. echo '<div class="main" /><b>'.$row.'</b></div><br />';
    33. //echo '<div class="tabelle" />'; //Unterordner nach Rechts einrücken
    34. //ordnerinhalt($ordner.'/'.$row); //rekursive Funktion
    35. //echo '</div>';
    36. }
    37. }
    38. //Dann die Dateien ausgeben
    39. if(isset($fileArray)) {
    40. asort($fileArray);
    41. foreach($fileArray as $row) {
    42. // echo '<div class="link" /><a href="'.$ordner.'/'.$row.'">'.$row.'</a></div><br />'; //Dateien verlinken
    43. }
    44. }
    45. }
    47. ordnerinhalt();
    49. ?> <div id="content">
    50. <form name="mainForm" action="javscript:;">
    53. <div id="expandcontractdiv">
    54. <a href="javascript:tree.expandAll()">Expand all</a>
    55. <a href="javascript:tree.collapseAll()">Collapse all</a>
    56. </div>
    58. </form>
    59. </div>
    62. <script type="text/javascript">
    64. var tree;
    65. var nodes = new Array();
    66. var nodeIndex;
    67. var file = "<?php echo '$folderArray' ?>";
    70. function treeInit() {
    71. buildRandomTextNodeTree();
    72. }
    74. function buildRandomTextNodeTree() {
    75. tree = new YAHOO.widget.TreeView("treeDiv1");
    76. tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
    77. tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
    79. for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
    80. var tmpNode = new YAHOO.widget.TextNode("label-" + <?php echo '$folderArray' ?>, tree.getRoot(), false);
    81. buildRandomTextBranch(tmpNode);
    82. }
    84. tree.draw();
    85. }
    87. var callback = null;
    89. function buildRandomTextBranch(node) {
    90. if (node.depth < 6) {
    91. YAHOO.log("buildRandomTextBranch: " + node.index);
    92. for ( var i = 0; i < Math.floor(Math.random() * 6) ; i++ ) {
    93. var tmpNode = new YAHOO.widget.TextNode(node.label + <?php echo '$folderArray' ?>, node, false, node, false);
    94. buildRandomTextBranch(tmpNode);
    95. }
    96. }
    97. }
    98. </script>
    99. </body>
    100. </html>
    Alles anzeigen


    Ich muss dazu sagen, ich bin auf beiden gebieten der tiefgehende Spezialist... :oops:

  • prozessorauslastung 90% ?
    hast du auch ne .php datei erstellt? ansonsten wird die php while-schleife vllt falsch interpretiert und von javascrit verarbeitet..

    arbeite mal mit meinem code weiter, der ist schon ziemlich nah dran.
    fehlen nur ein paar yahoo api spezifische funktionen

    hier noch eine kleine optimierung:

    Quellcode

    1. <?php
    2. $handle = opendir('.');
    3. while ($file = readdir ($handle)) {
    4. if(++$i > 2)
    5. echo ($i>3?',':'')."'$file'";
    6. }
    7. closedir($handle);
    8. ?>

  • Zumindest die Auslastung tut jetzt. Das Ergebnis im Browser sieht so aus:

    'menu','default','check','bullet.gif','qbottom.png','folders','greybg.png','qmiddle.png','qtop.png','logo.gif','navHover2.png','header.gif' Expand all Collapse all
    hintereinander, nichtmehr untereinander

    Ich habe jetzt noch folgende Änderungen gemacht:

    Quellcode

    1. <body onLoad="treeInit()">

    habe ich vor Beginn des PHP, nach Ende der Scriptaufzählung gebracht

    zusätzlich habe ich noch:

    Quellcode

    1. function buildRandomTextNodeTree() {
    2. var tree = new YAHOO.widget.TreeView("treeDiv1");
    3. tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
    4. tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
    6. var arr = new Array(<?php
    7. $handle = opendir('img');
    8. while ($file = readdir ($handle)) {
    9. echo (++$i>1?',':'')."'$file'";
    10. }
    11. closedir($handle);
    12. ?>);
    14. for (var i = 0; i < arr.length; i++) {
    15. var tmpNode = new YAHOO.widget.TextNode(arr[i], tree.getRoot(), false);
    16. buildRandomTextBranch(tmpNode);
    17. }
    19. tree.draw();
    20. }
    22. function buildRandomTextBranch(node) {
    23. if (node.depth < 6) {
    24. YAHOO.log("buildRandomTextBranch: " + node.index);
    26. //lade ordnerinhalt aus ajax datei
    27. //Beispielinhalt START
    28. var response = $arr;
    29. //Beispielinhalt END
    31. var arr = new Array(<?php
    32. $handle = opendir('img');
    33. while ($file = readdir ($handle)) {
    34. echo (++$i>1?',':'')."'$file'";
    35. }
    36. closedir($handle);
    37. ?>);
    38. for (var i = 0; i < arr.length; i++) {
    39. var tmpNode = new YAHOO.widget.TextNode(arr[i], node, false);
    40. buildRandomTextBranch(tmpNode);
    41. }
    42. }
    43. }
    Alles anzeigen
    an der 2. Funktion geändert

  • du vermischst hier 2 programmiersprachen..
    vergess deinen ansatz mal und nimm nochmal meinen code

    hab mir grad extra die mühe gemacht und die Yahoo UI Library runtergeladen
    den code, den ich erstellt habe habe ich 1:1 kopiert und ich kriege den ordnerinhalt des hauptordners problemlos angezeigt
    als unterordner wird natürlich nur der beispielinhalt geladen

    aber das kannst du auch mit einer eigenen ajax funktion nachrüsten
    z.B. nach diesem Wiki Eintrag
    [coderwiki]HowTos/Ajax-Bild-bei-Aenderung-nachladen[/coderwiki]

    in etwa könnte die fertige funktion dann so aussehen:

    Quellcode

    1. function buildRandomTextBranch(node) {
    2. if (node.depth < 6) {
    3. YAHOO.log("buildRandomTextBranch: " + node.index);
    5. //lade ordnerinhalt aus ajax datei
    6. //Beispielinhalt START
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. req.onreadystatechange = function() {
    15. if ((req.readyState == 4) && (req.status == 200)) {
    16. var response = req.responseText;
    17. var arr = new Array();
    18. arr = response.split(';');
    19. for (var i = 0; i < arr.length; i++) {
    20. var tmpNode = new YAHOO.widget.TextNode(arr[i], node, false);
    21. buildRandomTextBranch(tmpNode);
    22. }
    23. }
    24. }
    25. req.open("GET", 'folder.php?s='+ node.label);
    26. req.send(null);
    28. }
    29. }
    Alles anzeigen

  • update...

    die vorherige lösung hat die yahoo UI funktionen natürlich nicht genutzt
    fürs wiki habe ich nun einen code erstellt, der alle Yahoo UI Funktionen nutzt und die Ordnerstruktur darstellt

    Dynamisches Ordner auslesen mit AJAX und der Yahoo UI

    :arrow: [coderwiki]HowTos/Ajax-YUI-Ordner-auslesen[/coderwiki]
    den derzeitigen Code findet ihr außerdem hier im Anhang

    Falls ihr Fragen dazu habt, erstellt bitte einen neuen Thread
    Dateien

    • treeview.zip

      (62,13 kB, 342 mal heruntergeladen, zuletzt: )