1

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

简化：

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

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

在此处输入图像描述

因此，当我重新加载页面或/并清理缓存时，它仍将位于我离开的那个位置。我希望使用 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>

4

3 回答 3

2

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

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


});
于 2015-06-17T15:33:15.443 回答
1

使用 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>

stackoverflow-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
                }
            ]
        }
    ]
}

stackoverflow-2.php

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

在我的本地主机中测试的代码。

于 2015-06-29T19:03:38.810 回答
0

参考 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') 代码。

于 2015-06-17T15:09:34.123 回答