Question

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

澄清：

页面已加载，结构也是如此（检查firebug）：

然后，用户选择child1并将其拖至node2：

通过这样做生成新的JSON，然后，它被分离并分类为vpais（父母）和vfilhos（孩子）

但是，正如您所看到的，没有必要发送所有parents和children，因为只会更改一个节点（并且它将始终是，因为只有一个项目可以被拖动一次）。

所以在这里，一个人告诉我关于mutationObserver的事情，从理论上说，这是惊人的，但后来我意识到，我将如何使用它？！？，它是超级复杂的，我有理论，但使用它是一个不同的故事，你能帮助我吗？

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">â–¼</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">â–¼</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>

如何在jqtree中使用MutationObserver？

0 个答案: