तलाश है: acts_as_nested_set, AJAX खींचें और ड्रॉप ट्यूटोरियल

वोट
0

किसी को भी एक ट्यूटोरियल या नमूना कोड है कि जुड़े जावास्क्रिप्ट के साथ एक नेस्टेड सेट (या इसी तरह का आदेश दिया वृक्ष संरचना) कि ड्रैग और ड्रॉप की सुविधा को लागू करता है सुझाव है कि कर सकते हैं? मैं दोनों प्रदर्शन कोड (देखें) के साथ-साथ AJAX के बैकएंड नियंत्रक जो परिवर्तन पर डेटाबेस के लिए पेड़ लिखते हैं की तलाश में हूँ।

मैं इसे एक बहु परत मेनू प्रतिनिधित्व करने के लिए जहां आदेश और मदों की गहराई महत्वपूर्ण है चाहता हूँ।

13/10/2008 को 14:47
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
-2

कुछ इस तरह तुम सच में करना चाहते हैं के लिए एक jQuery प्लगइन थप्पड़ मारने न हों। तुम वहाँ बाहर कुछ भी नहीं मिल सकता है, तो यह अपने आप को सही कोड अपने आप में एक एस्प्रेसो और गोता बनाने के लिए समय आ गया है :)

एक नमूना बिंदु के रूप में वहाँ कोड है, लेकिन यह अपने आप को लिख सकते हैं और यह वास्तव में अपनी परियोजना के लिए सबसे अच्छा सूट करेगा - अधिक परिपक्व - अन्य का प्रयोग करें। सामने के अंत और बैक-एंड कोड के लिए एक साथ देख रहे हैं भी असली मुश्किल है ... जब तक आप एक ब्लॉग पोस्ट है कि "अपनी वेबसाइट AJAXify करने के लिए 30 jQuery प्लग इन" की तरह कुछ शीर्षक से किया जा सकता है से कुछ चाहते हैं और आप बकवास PHP कोड चाहते हैं। (इस मामले में ऐसा लगता है कि आप आतंक विरोधी चाहते हैं कि)

यह आप के लिए बहुत सहायता के नहीं हो सकता है, लेकिन यह मैं क्या कर सकता है।

मैं विशेष रूप से विरोधी jQuery-प्लगइन्स वैसे भी हूँ ... भले ही यह काम आप चाहते हैं करता है। कि कोड का एक बहुत ब्लोट है। प्लस मैं अन्य लोगों पर विश्वास करने के लिए नहीं करते :)

13/10/2008 को 17:59
का स्रोत उपयोगकर्ता

वोट
-2

मैं का इस्तेमाल किया है www.dhtmlgoodies.com यह करने के लिए के लिए ड्रैग-ड्रॉप-फ़ोल्डर ट्री। यह नवीनतम सबसे अप-टू-डेट mootools / jQuery / yourfavoriteframework जावास्क्रिप्ट नहीं है, लेकिन आपको लगता है कि को देखने के लिए नहीं है, यह एक घटक के रूप में अच्छी तरह से काम है करता है, और छवियों का एक अच्छा सेट के साथ आता है।

मैं एक छोटे से 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 वर्ग है कि बुनियादी सेटअप करता है। मैं उदाहरण के लिए कुछ चीजें आसान बना दिया है, लेकिन यह आप आरंभ करना चाहिए। बिल्कुल आप आतंक विरोधी :-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 समारोह है कि मरने () का एक 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;
}

?>

वहाँ तुम्हारे पास है, पठनीय, आत्म व्याख्यात्मक कोड के साथ एक ट्यूटोरियल। यह आतंक विरोधी नहीं है, और प्रोटोटाइप नहीं है, लेकिन यह आप सही शुरू कर दिया जाना चाहिए?

13/10/2008 को 22:46
का स्रोत उपयोगकर्ता

वोट
2

बहुत खोज के बाद मैंने पाया इस ऑनलाइन उदाहरण , स्वेन फुच्स, जो मैं क्या जरूरत का 90% होता है ने लिखा है।

23/10/2008 को 07:03
का स्रोत उपयोगकर्ता

07/07/2009 को 05:43
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more