0

我有一个jqtree，我应该发送使用 AJAX 更改了哪些节点，为了做这样的事情，我使用递归函数来读取整个 JSON，问题是，我只想发送受影响的节点。由于树是拖放的，因此用户一次只能更改一项。

澄清：

页面已加载，结构也是如此（检查萤火虫）： 在此处输入图像描述

然后，用户选择并child1拖入node2： 在此处输入图像描述

通过这样做生成新的JSON，然后将其分离并分类为vpais（父母）和vfilhos（孩子） 在此处输入图像描述

但是，正如您所看到的，没有必要全部发送parents，children因为只有一个节点会被更改（而且总是如此，因为一次只能拖动一个项目）。

所以在这里，一个人告诉我mutationObserver，理论上，这很了不起，但后来我意识到，我将如何使用它？！？，它非常复杂，我有理论但使用它是一个不同的故事，你能帮帮我吗？

感谢@Mouser

if (typeof(MutationObserver) != "undefined")
{
    //this is new functionality
    //observer is present in firefox/chrome and IE11+
    // select the target node

        // create an observer instance
        observer = new MutationObserver(observeJSONTree);
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: false, subtree: true };

        // pass in the target node, as well as the observer options
        observer.observe([tree container], config);


}

function observerJSONTree(e)
{

            for (eventObject in e)
            {

                switch(e[eventObject].type)
                {
                    case 'characterData' :
                        //when text is changed
                        //for now do nothing

                    break;

                    case 'childList' :
                        //childs added or removed
                        if (e[eventObject].addedNodes.length > 0)
                        {
                            //childs added
                            //do something
                        }
                        if (e[eventObject].removedNodes.length > 0)
                        {
                            //childs removed

                        }
                    break;

                }
            }
}

谢谢你到目前为止:)

我的代码：

$(document).ready(function() {

  var data = [{
    label: 'node1',
    id: 1,
    children: [{
      label: 'child1',
      id: 2
    }, {
      label: 'child3',
      id: 3
    }, {
      label: 'child2',
      id: 4
    }, {
      label: 'child2',
      id: 5
    }]
  }, {
    label: 'node2',
    id: 6,
    children: [{
      label: 'child3',
      id: 7
    }]

  }];



  $('#tree1').tree({
    data: data,
    autoOpen: false,
    dragAndDrop: true
  });

  console.log("Original Structure" + $('#tree1').tree('toJson'));

  $('#tree1').bind(
    'tree.move',
    function(event) {
      data = $(this).tree('toJson');
      event.preventDefault();
      event.move_info.do_move();
      console.log("New Structure" + $(this).tree('toJson'));

      data = $(this).tree('toJson');
      var dadSon = [];
      var dad = [],
        son = [];
      var group = "";
      var randomic = "";

      (function printDadSon(data, parent) {
        if (!data) return;
        for (var i = 0; i < (data.length); i++) {
          if (parent && parent != 'undefined') {
            dadSon[i] = ('vpai= ' + parent + "&" + 'vfilho= ' + data[i].id + "&");
            group += dadSon[i];
          }
          printDadSon(data[i].children, data[i].id);
        }
      })(JSON.parse(data));


      var temp = group.length;
      group = group.substring(0, temp - 1);

      console.log(dadSon);

      $.ajax({
        type: 'POST',
        url: 'link',
        dataType: 'json',
        data: group
      });
      console.log("Done");
    }
  );

});
#navdata {
  width: auto;
  height: auto;
  flex: 1;
  padding-bottom: 1px;
}
#navgrid {
  width: 50%;
  height: 200px;
  overflow-x: visible;
  overflow-y: scroll;
  border: solid 1px #79B7E7;
  background-color: white;
}
#header {
  background-color: #79B7E7;
  width: 99.6%;
  text-align: center;
  border: 1px solid white;
  margin: 1px;
}
.jqtree-element {
  background-color: white;
  border: 1px solid white;
  height: 23px;
  color: red;
}
.jqtree-tree .jqtree-title {
  color: black;
}
ul.jqtree-tree {
  margin-top: 0px;
  margin-left: 1px;
}
ul.jqtree-tree,
ul.jqtree-tree ul.jqtree_common {
  list-style: none outside;
  margin-bottom: 0;
  padding: 0;
}
ul.jqtree-tree ul.jqtree_common {
  display: block;
  text-align: left;
  padding-left: 0px;
  margin-left: 20px;
  margin-right: 0;
}
ul.jqtree-tree li.jqtree-closed > ul.jqtree_common {
  display: none;
}
ul.jqtree-tree li.jqtree_common {
  clear: both;
  list-style-type: none;
}
ul.jqtree-tree .jqtree-toggler {
  color: #325D8A;
}
ul.jqtree-tree .jqtree-toggler:hover {
  color: #3966df;
  text-decoration: none;
}
.jqtree-tree .jqtree-title.jqtree-title-folder {
  margin-left: 0;
}
span.jqtree-dragging {
  color: #fff;
  background: #79B7E7;
  opacity: 0.8;
  cursor: pointer;
  padding: 2px 8px;
}
ul.jqtree-tree li.jqtree-selected > .jqtree-element,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));
}
<!DOCTYPE html>
<!-- Programa: JqTree | Envia nova estrutura JSON como v pai e vfilho -->
<!--    Autor: Calne Ricardo de Souza -->
<!-- 	 Data: 06/07/2015 -->
<html>

<head>
 <!--Removed due to copyrights-->
</head>

<body>
  <div id="navgrid">
    <div id="header">Header</div>
    <div id="tree1">
      <ul class="jqtree_common jqtree-tree">
        <li class="jqtree_common jqtree-folder">
          <div class="jqtree-element jqtree_common">
            <a class="jqtree_common jqtree-toggler">â–¼&lt;/a>
            <span class="jqtree_common jqtree-title jqtree-title-folder">node1</span>
          </div>
          <ul class="jqtree_common ">
            <li class="jqtree_common">
              <div class="jqtree-element jqtree_common">
                <span class="jqtree-title jqtree_common">child2</span>
              </div>
            </li>
            <li class="jqtree_common">
              <div class="jqtree-element jqtree_common">
                <span class="jqtree-title jqtree_common">child1</span>
              </div>
            </li>
          </ul>
        </li>
        <li class="jqtree_common jqtree-folder">
          <div class="jqtree-element jqtree_common">
            <a class="jqtree_common jqtree-toggler">â–¼&lt;/a>
            <span class="jqtree_common jqtree-title jqtree-title-folder">node2</span>
          </div>
          <ul class="jqtree_common ">
            <li class="jqtree_common">
              <div class="jqtree-element jqtree_common">
                <span class="jqtree-title jqtree_common">child3</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

4

0 回答 0