Menu
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.
872
In Notepad++ on the Language menu you will find the menu item - 'J' and under this menu item chose the language - JSON. Once you select the JSON language then you won't have to worry about how to save it. When you save it it will by default save it as . JSON file, you have to just select the location of the file.
A JSON string can be stored in its own file, which is basically just a text file with an extension of .json , and a MIME type of application/json .
Sure this can be done.
Once you have your JSON string (Im assuming you know how to get it because if not that's a different question altogether) you can save it using this function:
function saveText(text, filename){
var a = document.createElement('a');
a.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(text));
a.setAttribute('download', filename);
a.click()
}
Call it:
var obj = {a: "Hello", b: "World"};
saveText( JSON.stringify(obj), "filename.json" );
This would prompt the use to save a file named "filename.json", which contains a JSON object of obj
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
