I am using the following link to create a tree like structure:
LINK
This is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Context Menu - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tree Context Menu and Drag Drop Tree Nodes</h2>
<p>Right click on a node to display context menu.</p>
<p>Press mouse down and drag a node to another position.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
animate: true,
dnd:true,
onContextMenu: function(e,node){
e.preventDefault();
$(this).tree('select',node.target);
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
">
</ul>
</div>
<div style="padding:5px 0;">
<a href="#" class="easyui-linkbutton" onclick="save()" data-options="iconCls:'icon-save'">Save</a>
</div>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
<div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
<div class="menu-sep"></div>
<div onclick="expand()">Expand</div>
<div onclick="collapse()">Collapse</div>
</div>
<script type="text/javascript">
function append(){
var t = $('#tt');
var node = t.tree('getSelected');
t.tree('append', {
parent: (node?node.target:null),
data: [{
text: 'new item1'
},{
text: 'new item2'
}]
});
}
function removeit(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('remove', node.target);
}
function collapse(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('collapse',node.target);
}
function expand(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('expand',node.target);
}
function save(){
var a = document.createElement('a');
a.setAttribute('href','data:text/plain;charset=utf-u,'+encodeURIComponent(JSON.stringify({$('#tt').html()}));
a.setAttribute('download', "data.json");
}
</script>
</body>
</html>
When I am running this, nothing is getting saved.
I have added a save button to this structure's code.
I want that whenever the user clicks this save button then he could store this tree structure produced as JSON data on his/her local machine. I want this as this tree is editable. How can I do this?
I used the following link for the same:
link
I want that whatever changes that happens to the id = "tt" could be retrieved in the form of JSON and store on my local machine.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
