Question

解释起来有点复杂。我想保存树重新定位的位置，然后当用户再次打开页面时，它会以用户离开的方式显示（我做不想只为一个用户而是为了所有用户，因为只有管理员才能访问它。这听起来是不可理解的，这就是为什么我在下面做了一个例子：

简化：

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

2 - 将其作为文本文件（可能是Ajax）发送到我的服务器

enter image description here

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

提前致谢。

acquire(long time, TimeUnit unit)

Answer 1

我想早些时候我的问题出错了。这将是你的答案。

$(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.
    }
);


});

Answer 2

使用HTML / JS / PHP使用

更新代码

文件夹结构

Root Folder
      stackoverflow-2.html
      libs/jquery/jquery.js
      libs/jqtree/tree.jquery.js
      libs/jqtree/jqtree.css
      scripts/stackoverflow-2.js //custom script created by me
      json/stackoverflow-2.json //json file output to create the nodes and children.
      php/stackoverflow-2.php //php commands to write.

stackoverflow-2.html //与您的参考相同。仅更改了库文件的映射。

<head>
    <script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
    <script src="libs/jqtree/tree.jquery.js"></script>
    <link rel="stylesheet" href="libs/jqtree/jqtree.css">
    <script src="scripts/stackoverflow-2.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>

<强>计算器-2.js

$(document).ready(function(){
$.ajax({                            /*Makes a ajax call and gets the contents from the json file*/
    method:"get",
    url:"json/stackoverflow-2.json"
}).success(function(data){

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

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

    });

初始stackoverflow-2.json

{
    "tree": [
        {
            "label": "node1",
            "id": 1,
            "children": [
                {
                    "label": "child1",
                    "id": 2
                },
                {
                    "label": "child2",
                    "id": 3
                }
            ]
        },
        {
            "label": "node2",
            "id": 4,
            "children": [
                {
                    "label": "child3",
                    "id": 5
                }
            ]
        }
    ]
}

<强>计算器-2.PHP

<?php
file_put_contents("../json/stackoverflow-2.json", json_encode($_POST)); //calls the file and enters the new tree structure.

在我的localhost中测试了代码。

Answer 3

参考jqtree文档，你可以得到这样的代码。

var lastOpenedByAUser = 0; // make a ajax call to get this value. This value is also stored in database or any file in your server end if the last user clicked another node.

$('#tree1').tree({
data: data,
autoOpen: lastOpenedByAUser //shall be 0 for node-1, 1 for node-2
 });

确保只在完成ajax代码的代码后运行此$（'＃tree'）代码。

如何保存树的顺序？

3 个答案: