Question

真的很难解释，但我会尽我所能。所以我在JSON上使用了JqTree数据，我正在尝试获取parents和children中的哪些数据并将它们放在小块中。< / p>

我的树：

及其data AKA结构：

var data = [
  {"name":"node1","id":1,"is_open":true,"children":[
    {"name":"child2","id":2},
    {"name":"child2","id":3},
    {"name":"child1","id":4}
  ]},
  {"name":"node1","id":5,"is_open":true,"children":[
    {"name":"child2","id":6}
  ]}
];

我想做的是把它们变成变量，如：

变量dad和son及其id s

dad = 1 son = 2 dad = 2 son = 3等等。

请注意，dad = 2也是son = 2

因此，我的树将是：
的

的 dad = 1 son = 2 dad = 1 son = 3 dad = 1 son = 4 dad = 5 son = 6 的

我需要这样，因为我会使用AJAX发送它，如下所示：
data:dad+"&"+son，如果您检查我的代码，您会注意到当用户使用光标更改结构时会发送此代码所以它总是一个爸爸和一个儿子 ，因此，不需要数组。

的为什么：

我需要以这种方式发送它，因为我在服务器端使用了一种蹩脚且有限的语言（它不是我的）

我的树解释道：

将来这个糟糕的服务器将发送原始数据，如dad = 1 & son = 2，然后我将“简单地”反过来。我的服务器将原始的data与新的服务器进行比较，并给出了我应该再次转换为这种方式并使用ajax发送它的区别。

现在，正如您所看到的，我只发送“差异”POSITIONS 。

$('#tree1').bind(
    'tree.move',
    function(event) {
      data = $(this).tree('toJson');
      event.preventDefault();
      // do the move first, and _then_ POST back.
      event.move_info.do_move();
      console.log("New Structure" + $(this).tree('toJson'));
      POSITIONS = $(this).tree('toJson');

      POSITIONS = getDiff(data, POSITIONS);
      alert("Difference\n\n" + POSITIONS);

      $.post('http://localhost:8080/JqTree/Hello', {
        tree: POSITIONS
      });
      alert("done");
    }
);

非常感谢您阅读此内容。

这是我的代码：

$(document).ready(function() {

  var POSITIONS;
  //Mandar o response aqui no data
  var data = [{
    label: 'node1',
    id: 1,
    children: [{
      label: 'child1',
      id: 2
    }, {
      label: 'child2',
      id: 3
    }, {
      label: 'child2',
      id: 6
    }]
  }, {
    label: 'node2',
    id: 4,
    children: [{
      label: 'child3',
      id: 5
    }]

  }];



  $('#tree1').tree({
    data: data,
    autoOpen: false,
    dragAndDrop: true
  });


  function getDiff(a, b) {
    var diff = (isArray(a) ? [] : {});
    recursiveDiff(a, b, diff);
    return diff;
  }

  function recursiveDiff(a, b, node) {
    var checked = [];

    for (var prop in a) {
      if (typeof b[prop] == 'undefined') {
        addNode(prop, '[[removed]]', node);
      } else if (JSON.stringify(a[prop]) != JSON.stringify(b[prop])) {
        // if value
        if (typeof b[prop] != 'object' || b[prop] == null) {
          addNode(prop, b[prop], node);
        } else {
          // if array
          if (isArray(b[prop])) {
            addNode(prop, [], node);
            recursiveDiff(a[prop], b[prop], node[prop]);
          }
          // if object
          else {
            addNode(prop, {}, node);
            recursiveDiff(a[prop], b[prop], node[prop]);
          }
        }
      }
    }
  }

  function addNode(prop, value, parent) {
    parent[prop] = value;
  }

  function isArray(obj) {
    return (Object.prototype.toString.call(obj) === '[object Array]');
  }

  console.log("Original Structure" + $('#tree1').tree('toJson'));

  $('#tree1').bind(
    'tree.move',
    function(event) {
      data = $(this).tree('toJson');
      event.preventDefault();
      // do the move first, and _then_ POST back.
      event.move_info.do_move();
      console.log("New Structure" + $(this).tree('toJson'));
      POSITIONS = $(this).tree('toJson');

      POSITIONS = getDiff(data, POSITIONS);
      alert("Difference\n\n" + POSITIONS);

      $.post('http://localhost:8080/JqTree/Hello', {
        tree: POSITIONS
      });
      alert("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
  /*#DDEBF7*/
  ;
  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;
  /*border-left:20px solid #DDEBF7;*/
}
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>
<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://sistema.agrosys.com.br/sistema/labs/tree.jquery.js"></script>
  <link rel="stylesheet" href="http://sistema.agrosys.com.br/sistema/labs/jqtree.css">
  <script src="http://sistema.agrosys.com.br/sistema/labs/jquery-cookie/src/jquery.cookie.js"></script>

</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>

如何映射树的json对象并将其设置为单独的变量？

0 个答案: