jstree 節點拖拽保存數據庫

須要jstree具備拖拽功能須要在加載jstree時添加dnd插件，具體看代碼：

$('**').jstree({

//plugins-各類jstree的插件引入，展現樹的多樣性
'plugins' : [ "dnd", "types", "wholerow" ],
'core' : {
     "check_callback" : true,//在對樹進行改變時，check_callback是必須設置爲true；
     'data' :{
　　    'url' : 'modulemng/list',
　　    dataType:'json'
     }
},
//types-對樹的節點進行設置，包括子節點type、個數
'types' : {
　　"#" : {
　　　　"max_children" : 1
　　}
} 
});

使用dnd插件後，你們估計都在想其回調函數是dnd插件中的，就會去找jstree API中的dnd插件事件，而後發現怎麼綁定到tree都綁定不上。仔細看API才發現，dnd插件的回調事件是綁定到document上的：

$(document).on('dnd_stop.vakata',function(e,data){
     
});

這樣，當節點拖拽後就能觸發此方法，但仔細一看data傳回來的參數，暈了。

正在抓狂的時候發現有個move_node.jstree回調函數，這個函數是綁定在jstree上的，並且返回來的data參數：

 

這些參數已足夠咱們進行數據庫操做了，並且簡單明瞭。

個人代碼是：

                        $( "#module_tree" )                  
                        .on('move_node.jstree', function(e,data){
                             console.info(data);
                             jQuery.post("modulemng/dndmodule",
                                           {                    
                                            id : data.node.id, 
                                            parent : data.parent,
                                            position:data.position
                                            },
                                            function(data,status){                                        
                                                alert("Data: " + data + "\nStatus: " + status);
                                            }, 'json');
                             
                        })
                        .jstree({
                            //plugins-各類jstree的插件引入，展現樹的多樣性
                            'plugins' : [ "dnd", "types", "wholerow" ],
                            'core' : {
                                "check_callback" : true,//在對樹進行改變時，check_callback是必須設置爲true；
                                'data' :{
                                    'url' : 'modulemng/list',
                                    dataType:'json'
                                }
                            },
                            //types-對樹的節點進行設置，包括子節點type、個數
                            'types' : {
                                "#" : {
                                      "max_children" : 1
                                    }
                            } 
                        });
                });

傳回當前節點ID,父節點ID和相應的位置position便可。