jquery directory tree
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 !='..')
printS开发者_运维百科ubDir($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>
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().
Depending on the functions you want, it could be something like:
function printFile($file, $path)
{
echo "<li class='fileNode'><a href=\"".$path.$file."\">$file</a></li>";
}
function printSubDir($dir, $path)
{
echo "<li class='dirNode'><span class=\"toggle\">$dir</span>";
createDir($path.$dir."/");
echo "</li>";
}
And then in your JavaScript do something like
$(document).ready(function
{
// you should still assign some behaviour probably
$(".fileNode").prepend("<input type='checkbox' />");
});
Or 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/
Check this https://github.com/zTree/zTree_v3 its very easy to use
加载中,请稍侯......
精彩评论