Question

我正在使用jquery列出目录，我想在其中填写删除复选框，并删除树上每个目录的提交按钮。怎么做？我在下面使用此代码。

<!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>

Answer 1

您希望用户能够对树做什么，它应该如何反应？在预感中，我至少看到了两种方法。您可以立即输出复选框和按钮的html，然后使用选择器向它们添加行为，或者您可以先输出树然后输出document.ready通过使用jquery的DOM修改（例如before（））来修改dom。 / p>

根据您想要的功能，它可能是：

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>";
}

然后在你的JavaScript中执行类似

的操作

$(document).ready(function
{
    // you should still assign some behaviour probably
    $(".fileNode").prepend("<input type='checkbox' />");
});

或者你可以确保复选框已经存在，你可以将一些ajax函数绑定到复选框'change（）。 http://api.jquery.com/change/

Answer 2

检查一下 https://github.com/zTree/zTree_v3 它非常易于使用

jquery目录树

2 个答案: