如何在拖放后保存dynatree结构

时间:2012-03-13 14:04:59

标签: dynatree

我无法弄清楚如何在将节点拖放到它之后保存新的dynatree。

我有2个dynatree,我从一个拖到另一个,但我不知道我是否可以得到新树的结构信息。  我的第一棵树:

$("#tree1").dynatree({

                title: "tree",
                children: [{ title: "tree1", isFolder: true}],
                dnd: {
                    onDragStart: function (node) {

                        logMsg("tree.onDragStart(%o)", node);
                        return true;
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {

                        logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
                        sourceNode.move(node, hitMode);
                    }
                }


            });

和第二个:

$("#Tree2").dynatree({
                title: "Tree",

                children: [{ title: "MyTree", isFolder: true}],


                isLazy: true,

                dnd: {
                    onDragStart: function (node) {

                        logMsg("tree.onDragStart(%o)", node);
                        return true;
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {

                        logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
                        sourceNode.move(node, hitMode);
                    },
                    onDragEnter: function (node, sourceNode) {

                        logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
                        return true;
                    },
                    onDragOver: function (node, sourceNode, hitMode) {

                        logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
                    },

                    onDragLeave: function (node, sourceNode) {

                        logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {

                        logMsg("tree.onDrop(%o, %o)", node, sourceNode);
                        var copynode;
                        var rootNode = $("#OrganizationTree").dynatree("getRoot");
                        if (sourceNode && (node.data.title === 'Organization' || node !== rootNode)) {
                            copynode = sourceNode.toDict(true, function (dict) {
                                dict.title = dict.title;
                                dict.key = sourceNode.data.key;
                                node.data.isFolder = true;

                            });
                        } else {
                            alert(" please drop your node into the organization");
                        }
                        if (hitMode == "over") {
                            // Append as child node
                            node.addChild(copynode);
                            sourceNode.remove();       
                        }
                    }
                }

            });

如何保存tree2结构? 提前谢谢

2 个答案:

答案 0 :(得分:4)

您可以使用以下内容:

  dnd: {
          onDrop: function(node, sourceNode, hitMode, ui, draggable) {
            /** This function MUST be defined to enable dropping of items on
             *  the tree.
             */
            sourceNode.move(node, hitMode);
            var currentTree = $("#tree").dynatree("getTree").toDict();
            $.post("forajax.php", { recieved: currentTree},
               function(data) {
                 $("#output").html(data);
             });
          }
        }

forajax.php

的来源
<?
function noFalseMulti($var) 
/*
*This function will remove from array key containing 'false' of 'null'  (empty keys)
*
*I have realized, if there are this data it shows error-I don't know why
*/
  {
  $var=array_filter($var, 'noFalse');
  foreach($var as $key => $value)
    {
    if(is_array($var[$key]))
      {
      $var[$key]=noFalseMulti($var[$key]);
      }
    }
  return $var;
  }

$dataToSave=serialize(noFalseMulti($_POST['recieved']));
?>

您可以将数据保存到任何地方。当你再次需要它们时,请使用:

$("#tree").dynatree({
        initAjax: {url: "createTree.php",
                   data: {//key: "root", 
                          // Optional arguments to append to the url
                          //mode: "all"
                          }
                   },

蚂蚁 createTree.php 来源

<?
$yourSavedData=''; //place here the data you have saved before
$array=unserialize($yourSavedData);
echo json_encode($array);
?>

我不确定我是否足够好解释 - 如果不是在这里回复。

希望它能帮助你或其他人。

答案 1 :(得分:-1)

只需使用toDict()函数。

来自文档:

// Get a JavaScript object copy of the tree
var dict = $("#tree").dynatree("getTree").toDict();
// ... then use Ajax to send this to your server...