jquery directory tree

Ask Time：2011-09-02T00:38:15 Author：Blue

I'm using jquery for listing directory's and I would like to inplement delete check box in it and delete submit buton by every directory on the tree . How to do that? I'm using this code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>jQuery Drop Down Menu</title> 

<!-- CSS For The Menu --> 
<link rel="stylesheet" href="stylee.css" /> 

</head> 
<body> 

<!-- Menu Start --> 
<div id="jQ-menu"> 

<?php
error_reporting(0);
    $path = "store/".$diro."/";

    function createDir($path = '.')
    {   
        if ($handle = opendir($path)) 
        {
            echo "<ul>";

            while (false !== ($file = readdir($handle))) 
            {
                if (is_dir($path.$file) && $file != '.' && $file !='..')
                    printSubDir($file, $path, $queue);
                else if ($file != '.' && $file !='..')
                    $queue[] = $file;
            }

            printQueue($queue, $path);
            echo "</ul>";
        }
    }

    function printQueue($queue, $path)
    {
        foreach ($queue as $file) 
        {
            printFile($file, $path);
        } 
    }

    function printFile($file, $path)
    {
        echo "<li><a href=\"".$path.$file."\">$file</a></li>";
    }

    function printSubDir($dir, $path)
    {
        echo "<li><span class=\"toggle\">$dir</span>";
        createDir($path.$dir."/");
        echo "</li>";
    }

    createDir($path);
?>

</div> 
<!-- End Menu --> 


<!-- Add jQuery From the Google AJAX Libraries --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>


<!-- jQuery Color Plugin --> 
<script type="text/javascript" src="jquery.color.js"></script> 

<!-- Import The jQuery Script --> 
<script type="text/javascript" src="jMenu.js"></script> 

</body> 
</html>

Author:Blue，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/7273477/jquery-directory-tree

M. Meiboom :

What is it exactly you want the user to be able to do with the tree, and how should it react? On a hunch, I see at least two ways you could go. You could output the html for the checkboxes and buttons straight away, and later add behaviour to them using selectors, or you could output the tree first and then after document.ready modify the dom by using jquery's DOM modification such as before().\n\nDepending on the functions you want, it could be something like:\n\nfunction printFile($file, $path)\n{\n echo \"<li class='fileNode'><a href=\\\"\".$path.$file.\"\\\">$file</a></li>\";\n}\nfunction printSubDir($dir, $path)\n{\n echo \"<li class='dirNode'><span class=\\\"toggle\\\">$dir</span>\";\n createDir($path.$dir.\"/\");\n echo \"</li>\";\n}\n\n\nAnd then in your JavaScript do something like\n\n$(document).ready(function\n{\n // you should still assign some behaviour probably\n $(\".fileNode\").prepend(\"<input type='checkbox' />\");\n});\n\n\nOr you could just make sure that the checkboxes are already present and you could bind some ajax function to the checkbox' change(). http://api.jquery.com/change/",

2011-09-06T11:59:31

jquery directory tree