blocks|key|3956717|text|经过多次搜索，我找到了Sven+Fuchs编写的this+online+example，它满足了我90%25的需求。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3956718|entityMap|0|LINK|mutability|MUTABLE|url|http://www.artweb-design.de/2008/5/30/scriptaculous-sortabletree^0|O|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>After much searching I found <a href="http://www.artweb-design.de/2008/5/30/scriptaculous-sortabletree" rel="nofollow noreferrer">this online example</a>, written by Sven Fuchs, which does 90% of what I needed.</p>


blocks|key|689405|text|这可能会有帮助：http://www.justinball.com/2009/01/18/heirarchies-trees-jquery-prototype-scriptaculous-and-acts_as_nested_set/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|689406|entityMap|0|LINK|mutability|MUTABLE|url|http://www.justinball.com/2009/01/18/heirarchies-trees-jquery-prototype-scriptaculous-and-acts_as_nested_set/^0|8|31|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>This might help:
<a href="http://www.justinball.com/2009/01/18/heirarchies-trees-jquery-prototype-scriptaculous-and-acts_as_nested_set/" rel="nofollow noreferrer">http://www.justinball.com/2009/01/18/heirarchies-trees-jquery-prototype-scriptaculous-and-acts_as_nested_set/</a></p>


blocks|key|3956689|text|像这样的东西，你真的不想要一个jquery插件。如果你找不到任何东西，那么是时候给自己做一杯浓缩咖啡了，然后自己开始编写代码吧:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3956690|使用其他--更成熟的--代码作为样本点，但是自己编写它，它将真正适合您的项目。同时寻找前端和后端代码也是非常困难的……除非你想从一篇标题类似于“30jquery+plugins+to+AJAXify+your+website”的博客文章中获得一些东西，或者你想要垃圾的PHP代码。(在本例中，您似乎想要RoR)|3956691|这可能对您没有多大帮助，但这是我会做的。|3956692|不管怎么说，我特别反对jquery插件。即使它能完成你想要的工作。很多这样的代码都是臃肿的。此外，我倾向于不信任其他人:)|3956693|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Something like this you really don't wanna be slapping a jquery plugin for. If you can't find anything out there it's time to make yourself an espresso and dive right into the code yourself :)</p>

<p>Use other -- more mature -- code out there as a sample point, but write it yourself and it will really suit your project the best. Looking for front-end and back-end code together is real tough too... unless you want something from a blog post that might be titled something like "30 jquery plugins to AJAXify your website" and you want crap PHP code. (In this case it appears that you want RoR)</p>

<p>This might not be of much assistance to you, but it's what I would do.</p>

<p>I'm particularly anti-jquery-plugins anyway... even if it does the job you want. A lot of that code is bloat. Plus I tend not to trust other people :)</p>


blocks|key|689388|text|我使用了www.dhtmlgoodies.com的拖放文件夹树来做这件事。它不是最新最新的mootools/jquery/+you+javascript，但你不必去看它，它作为一个组件做得很好，并且有一组很好的图片。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|689389|我创建了一个小的mootools+1.1包装类：|689390|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='%2BsaveString,+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/'%2Bid,+{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/'%2Bthis.currentItem,+{multiple:true}).request();
++++++++++++this.currentItem+=+false;
++++++++}
++++++++}
++++}

});|code-block|syntax|javascript|689391|有一个执行基本设置的PHP类。我为这个例子简化了一些东西，但这应该是您开始的起点。当然，您必须调整它以使用RoR+:-P|689392|/**
+*+
+*+@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%2B%2B)
++++++++{
++++++++++++$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%2B%2B)
++++++++{

++++++++++++$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>
++++++++");
++++}

}|689393|用法：|689394|$tv+=+new+TreeView();
$_TPL['menu']+=+$tv->display();|689395|下面是更改顺序的示例，以及添加、编辑和删除功能的作用(当然是简化的)。JsObject只是一个带有显示函数、__get和__set函数的包装器，它们使用一个json_encoded数组。)|689396|<?
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%2B%2B)
++++++++++++{
++++++++++++++++$tokens+=+explode("%7C",$items[$i]);
++++++++++++++++$db->query("update+menu+set+intParent='{$tokens[1]}',+intOrder='{$i}'+where+ID_Menu='{$tokens[0]}'");
++++++++++++}
++++++++++++die('Saved+the+new+order!');
++++++++break;
++++++++}
++++break;
}

?>|689397|这就是一个教程，其中包含可读的、不言自明的代码。它不是RoR，也不是Prototype，但这应该会让你开始吧？|689398|entityMap|0|LINK|mutability|MUTABLE|url|http://www.dhtmlgoodies.com/^0|4|K|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1F|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1G|8|@]|9|@]|C|$]]|$1|U|3|V|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|W|3|X|5|6|7|1I|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]]]

<p>I have used  <a href="http://www.dhtmlgoodies.com" rel="nofollow noreferrer">www.dhtmlgoodies.com</a> 's drag-drop-folder tree to do this. it's not the latest most up-to-date mootools/jquery/yourfavoriteframework javascript, but you don't have to look at that, it does it's job nicely as a component, and comes with a nice set of images.</p>

<p>I created a little mootools 1.1 wrapper class:</p>

<pre><code>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;
        }
        }
    }

});
</code></pre>

<p>There's a PHP class that does the basic setup. I've simplified some things for the example, but this should get you started. ofcourse you will have to adjust it to use RoR :-P
    

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

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

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

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

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

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


    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 ("&lt;div id='treebuttons'&gt;
            &lt;input type='button' onclick='Treeview.saveValues()' value='Save order'&gt;
            &lt;input type='button' onclick='Treeview.addItem()' value='Add'&gt;
            &lt;input type='button' onclick='Treeview.removeItem()' value='Remove'&gt;
        &lt;/div&gt;
        &lt;ul id='treeview'&gt;{$this-&gt;getTreeInnerHTML()}&lt;/ul&gt;
        &lt;div id='msgDiv'&gt;&lt;/div&gt;

        &lt;div id='editPanel'&gt;&lt;/div&gt;
        ");
    }

}
</code></pre>

<p>usage:</p>

<pre><code>$tv = new TreeView();
$_TPL['menu'] = $tv-&gt;display();
</code></pre>

<p>Here's also the examples for changing the order and what the add and edit and delete functions do (simplified ofcourse). JsObject is just a wrapper with a display function and __get and __set function that die()'s with a json_encoded array. Very handy for ajax requests ;)</p>

<pre><code>&lt;?
global $_URI;

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

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

?&gt;
</code></pre>

<p>There you have it, one tutorial with readable, self-explanatory code. It's not RoR, and not Prototype, but this should get you started right? </p>


<p>Can anyone suggest a tutorial or sample code that implements a nested set (or similar ordered tree structure) with associated Javascript that facilitates drag and drop? I'm looking for both the display code (view) as well as the AJAX backend controller which writes the tree to the database on change.</p>

<p>I want it to represent a multi-layer menu where the ordering and depth of items is important.</p>


Wanted: acts_as_nested_set, AJAX drag and drop tutorial

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

有没有人能推荐一个教程或示例代码，用关联的Javascript实现嵌套集(或类似的有序树结构)，以便于拖放？我正在寻找显示代码(视图)以及AJAX后端控制器，后者在更改时将树写入数据库。我希望它代表一个多层菜单，其中项目的排序和深度是重要的。

问招聘: acts_as_nested_set、AJAX拖放教程
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问招聘: acts_as_nested_set、AJAX拖放教程EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问招聘: acts_as_nested_set、AJAX拖放教程
EN