如何使用花式树js拖放后生成json?

时间:2014-12-30 08:42:01

标签: javascript html json fancytree

我正在使用FancyTree js来维护我的用户级结构。但是在提交按钮后我无法获得整个json。这是我的代码:

    <script>
$("#user_tree").fancytree({
            extensions: ["dnd"],
            source: {
              url: "/assets/json/ajax-tree-fs.json"
            },
            dnd: {
              autoExpandMS: 400,
              focusOnClick: true,
              preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
              preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
              dragStart: function(node, data) {

                return true;
              },
              dragEnter: function(node, data) {

                 return true;
              },
              dragDrop: function(node, data) {
                data.otherNode.moveTo(node, data.hitMode);
              }
            },
            activate: function(event, data) {

            },
            lazyLoad: function(event, data) {
              data.result = {url: "/assets/json/ajax-sub2.json"}
            }
          });
</script>
<input type="button" class="submit_user" />

一切都很好。但是,当我试图在拖放之后获取生成的元素时,它就不起作用了。

$(document.body).on('click','.submit_user',function(){

        console.log($("#user_tree").fancytree("getTree").data);


      });

我从以下链接尝试了这个:

http://wwwendt.de/tech/fancytree/demo/#sample-multi-ext.html

1 个答案:

答案 0 :(得分:2)

您可以将树检索为嵌套对象列表,如下所示:

var tree = $("#tree").fancytree("getTree");
data = tree.toDict()

详情请见此处:http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html#toDict