Question

任何人都可以建议实现嵌套集（或类似的有序树结构）的教程或示例代码以及相关的Javascript，以便于拖放吗？我正在寻找显示代码（视图）以及在更改时将树写入数据库的AJAX后端控制器。

我希望它代表一个多层菜单，其中项目的排序和深度非常重要。

Answer 1

经过多次搜索后，我找到了由{Sven Fuchs写的this online example，它完成了我所需要的90％。

Answer 2

这可能会有所帮助： http://www.justinball.com/2009/01/18/heirarchies-trees-jquery-prototype-scriptaculous-and-acts_as_nested_set/

Answer 3

像这样的东西，你真的不想拍打jquery插件。如果你在那里找不到任何东西，那么就该自己做一杯意式浓缩咖啡并自己潜入代码：）

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

这可能对你没什么帮助，但这就是我要做的。

无论如何，我特别反jquery-plugins ......即使它能完成你想要的工作。很多代码都很臃肿。另外，我倾向于不相信其他人：）

Answer 4

我使用了www.dhtmlgoodies.com的拖放文件夹树来执行此操作。它不是最新的最新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>
        ");
    }

}

用法：

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

这里还有用于更改顺序以及添加和编辑和删除功能的示例（简化课程）。 JsObject只是一个带有显示函数和__get和__set函数的包装器，die（）带有一个json_encoded数组。非常方便的ajax请求;）

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

?>

你有它，一个带有可读，自解释代码的教程。它不是RoR，也不是Prototype，但这应该让你开始吧？

通缉：acts_as_nested_set，AJAX拖放教程

4 个答案: