Javascript 通缉：充当嵌套集，AJAX拖放教程

有人能推荐一个教程或示例代码来实现嵌套集（或类似的有序树结构）和相关的Javascript，以方便拖放吗？我正在寻找显示代码（视图）和AJAX后端控制器，后者在更改时将树写入数据库

---

我想让它代表一个多层菜单，其中项目的顺序和深度很重要。

类似这样的东西你真的不想为了它而使用jquery插件。如果你在那里找不到任何东西，那么是时候自己做一杯浓缩咖啡，然后自己直接进入代码：）

使用其他更成熟的代码作为示例点，但是自己编写，它将真正最适合您的项目。同时寻找前端和后端代码也是非常困难的。。。除非你想从一篇可能标题为“30个jquery插件来AJAXify你的网站”的博客文章中得到一些东西，并且你想要垃圾PHP代码。（在这种情况下，您似乎需要RoR）

这可能对你没有多大帮助，但我会这么做

我特别喜欢反jquery插件。。。即使它能做你想要的工作。很多代码都是膨胀的。另外，我倾向于不信任其他人：）

我使用的是的拖放文件夹树。它不是最新的mootools/jquery/yourfavoriteframework javascript，但您不必看它，它作为一个组件很好地完成了它的工作，并附带了一组漂亮的图像

我创建了一个小型mootools 1.1包装类：

window.addEvent('domready', function()
    {
        document.Treeview = new TreeView();
    });


TreeView = new Class({

    initialize: function()
    {
        treeObj = new JSDragDropTree();
        treeObj.setTreeId('treeview');
        treeObj.initTree();
        treeObj.showHideNode(true, 'node0');
        $$('.hiddennode').each(function(elm) { elm.setStyle('display','none'); });
        this.currentItem = false;
    },

    saveValues: function() 
    {
        saveString = treeObj.getNodeOrders();
        new Ajax('./menuitem/save', {postBody: 'order='+saveString, onComplete:function(){window.Growl(this.transport.responseText)}, multiple:false}).request();
    },

    addItem: function()
    {
        new Ajax('./menuitem/add', {update:'editPanel'}).request();     
    },

    loadMenuItem: function(id)
    {
        this.currentItem = id;
        new Ajax('./menuitem/edit/'+id, {update:'editPanel', onComplete:function(){new ScrollDing('editPanel');}}).request();
    },

    removeItem: function()
    {
        if(!this.currentItem)
        {
            alert('please select a menu item to delete.');
        }
        else
        {
        if(confirm('Are you sure you want to delete this menu item?'))
        { 
            // multiple: true is my little extension to mootools's Ajax class. 
        // It expects a JSON object with keys corresponding to element ID's
        // and updates their innerHTML
            new Ajax('./menuitem/delete/'+this.currentItem, {multiple:true}).request();
            this.currentItem = false;
        }
        }
    }

});

有一个PHP类可以进行基本设置。我已经简化了示例中的一些内容，但这应该可以让您开始。当然，您必须调整它以使用RoR:-P

/**
 * 
 * @package Pork
 * @author SchizoDuckie
 * @copyright SchizoDuckie 2008
 */
class TreeMenu
{
    private  $menuItems, $output;
    function __construct()
    {
        global $db;

        $input =  $db->fetchAll("SELECT * FROM menu ORDER BY intparent, intOrder");
        for ($i=0; $i<sizeof($input); $i++)
        {
            $array = $input[$i];
            $this->menuItems[ $array->intParent ][ ] = $array;
        }
    }

    function hasSubItems($node)
    {
        return (array_key_exists($node, $this->menuItems) && sizeof($this->menuItems[$node]) > 0) ? true : false;
    } 

    function displaytree($start=0, $noSiblings=false)
    {
        $output .= "<ul>";
        for ($i=0; $i<sizeof($this->menuItems[$start]); $i++)
        {

            $item = $this->menuItems[$start][$i];
            $siblings = ($noSiblings) ? "  " : '';
            $output .=  "<li id='node{$item->ID_Menu}'{$siblings}><a href='#' onclick='Treeview.loadMenuItem({$item->ID_Menu});return false;'>{$item->strMenuItem}</a>";
            if ($this->hasSubItems($item->ID_Menu))
            {
                $output .= $this->displayTree($item->ID_Menu, $noSiblings);
            }
            $output .=  "</li>";
        }       
       $output .=   "</ul>";
       return($output);
    }

    function getTreeInnerHTML()
    {
        return("<li id='node0' noDrag='true' noSiblings='true'><a href='#' onclick='return false'>Root</a>{$this->displaytree()}</li>");


    function display()
    {
        global $_TPL;

        $_TPL['styles'][] = './includes/drag-drop-folder-tree.css';
        $_TPL['scripts'][]= './includes/drag-drop-folder-tree.js';
        $_TPL['scripts'][]= './includes/pork.foldertree.js';

        return ("<div id='treebuttons'>
            <input type='button' onclick='Treeview.saveValues()' value='Save order'>
            <input type='button' onclick='Treeview.addItem()' value='Add'>
            <input type='button' onclick='Treeview.removeItem()' value='Remove'>
        </div>
        <ul id='treeview'>{$this->getTreeInnerHTML()}</ul>
        <div id='msgDiv'></div>

        <div id='editPanel'></div>
        ");
    }

}

这里还有更改顺序的示例，以及添加、编辑和删除函数的作用（当然是简化的）。JsObject只是一个包装器，包含一个display函数和_get和_set函数，该函数使用json编码的数组die（）。对于ajax请求非常方便；）

---

这是一个教程，其中包含可读的、自解释的代码。这不是RoR，也不是原型，但这应该让你开始吧

经过大量搜索，我找到了由Sven Fuchs编写的，它完成了我需要的90%。

这可能会有帮助：

$tv = new TreeView();
$_TPL['menu'] = $tv->display();

<?
global $_URI;

switch ($_URI[0])
{
    case 'menuitem':
        switch ($_URI[1])
        {
            case 'add':
                $item = new menuItem();
                die($item->displayEditor('Add Menu Item', "multiple:true"));
            break;
            case 'edit':
                $item = new menuItem($_URI[2]);
                $_SESSION['currentMenuItem'] = $_URI[2];
                die($item->displayEditor('Edit MenuItem', 'multiple:true'));
            break;
            case 'delete':
                $item = new menuItem($_URI[2]);
                $item->deleteYourSelf();
                $js = new jsObject();
                $js->editPanel = 'Menu Item '.$item->menuItem.' has been deleted.';

                $menu = new Menu();
                $js->treeview = $menu->getTreeInnerHTML();
                $js->script = "document.Treeview = new TreeView();";    
                $js->display();
            break;
            case 'save':
            $items = explode(",",$_POST['order']);
            for($i=0;$i<sizeof($items);$i++)
            {
                $tokens = explode("|",$items[$i]);
                $db->query("update menu set intParent='{$tokens[1]}', intOrder='{$i}' where ID_Menu='{$tokens[0]}'");
            }
            die('Saved the new order!');
        break;
        }
    break;
}

?>