私はjqtreeを持っており、 AJAXを使用して変更されたノードを送信する必要があります。そのためには、再帰関数を使用してJSON全体を読み取りました。問題は、影響を受けたノードを送信したいだけです。ツリーはドラッグ アンド ドロップであるため、ユーザーは一度に 1 つの項目しか変更できません。
明確化:
ページが読み込まれ、構造も同様です (firebug を確認してください)。
次に、ユーザーは次のものを選択してドラッグchild1しnode2ます。
vpaisそうすることで新しいJSONが生成され、 (親)とvfilhos(子)に分離・分類されます
ただし、ご覧のとおり、変更されるノードは 1 つだけなので、すべてを送信する必要はありませんparents(children一度に 1 つのアイテムしかドラッグできないため、常に送信されます)。
ここで SO で男が MutationObserver について教えてくれました。理論的には素晴らしいですが、F をどのように使用するのか?!?、それは非常に複雑です。理論はわかっていますが、それを使用していますは別の話ですが、私を助けてくれますか?
@マウザーに感謝
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>