gpt4 book ai didi

javascript - 如何保存树的顺序?

转载 作者:行者123 更新时间:2023-11-30 12:21:28 24 4
gpt4 key购买 nike

解释起来有点复杂。我想保存树被重新定位的位置,然后当用户再次打开页面时,它会以用户离开它的方式出现(我这样做不想只为一个用户制作它,而是为所有用户制作它,因为无论如何只有管理员才能访问它)。这听起来难以理解,这就是为什么我在下面做了一个例子:

简化:

1 - 获取用户离开的树元素的顺序

2 - 将它作为文本文件发送到我的服务器(可能是 Ajax)

enter image description here

因此,当我重新加载页面或/和清理缓存时,它仍将位于我离开的那个位置。我希望使用 ajax 将“位置”作为文本文件发送到我的服务器。有办法吗?

提前致谢。

<!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="./tree.jquery.js"></script>
<link rel="stylesheet" href="./jqtree.css">
<script src="./jquery-cookie/src/jquery.cookie.js"></script>



<style>
body{overflow-x:hidden}
#navdata{width:auto; height:auto; flex:1; padding-bottom:1px;}
#navgrid{width:50%; height:200px; overflow-x:hidden; overflow-y:scroll; border:solid 1px #79B7E7; background-color:white;}
#header{background-color: #79B7E7; width:100%; text-align: center;border: 1px solid white;}
.jqtree-element{background-color:#DDEBF7;border: 1px solid white;height:23px;color:red;}
.jqtree-tree .jqtree-title {color: black;}
ul.jqtree-tree ul.jqtree_common {margin-left: 0px;}
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 {background: #79B7E7;}
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));}
</style>


</head>
<body>
<div id="navgrid">
<div id="header">Header</div>
<div id="tree1"></div>
</div>
</body>


<script type="text/javascript">
var ExampleData = {};
ExampleData.data = [
{
label: 'node1', id: 1,
children: [
{ label: 'child1', id: 2 },
{ label: 'child2', id: 3 }
]
},
{
label: 'node2', id: 4,
children: [
{ label: 'child3', id: 5 }
]
}
];

ExampleData.getFirstLevelData = function(nodes) {
if (! nodes) {
nodes = ExampleData.example_data;
}

var data = [];

$.each(nodes, function() {
var node = {
label: this.label,
id: this.id
};

if (this.children) {
node.load_on_demand = true;
}

data.push(node);
});

return data;
}

ExampleData.getChildrenOfNode = function(node_id) {
var result = null;

function iterate(nodes) {
$.each(nodes, function() {
if (result) {
return;
}
else {
if (this.id == node_id) {
result = this;
}

if (this.children) {
iterate(this.children);
}
}
});
}

iterate(ExampleData.example_data);

return ExampleData.getFirstLevelData(result.children);
}

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

});

</script>

</html>

最佳答案

我想之前我把你的问题弄错了。这就是您的答案。

$(document).ready(function(){

//var data is a dynamic json file that should be created in the backend.
var data = [
{
label: 'node1', id: 1,
children: [
{ label: 'child1', id: 2 },
{ label: 'child2', id: 3 }
]
},
{
label: 'node2', id: 4,
children: [
{ label: 'child3', id: 5 }
]
}
];
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});


console.log($('#tree1').tree('toJson')); //This will give you the loading jqtree structure.

$('#tree1').bind(
'tree.move',
function(event) {
event.preventDefault();
// do the move first, and _then_ POST back.
event.move_info.do_move();
console.log($(this).tree('toJson')); //this will give you the latest tree.
// $.post('your_url', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
}
);


});

关于javascript - 如何保存树的顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30894169/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com