Wie werden JSON-Daten lokal (auf dem Computer) gespeichert?

Question

Feb 11, 2015, 10:04 PM

Wie werden JSON-Daten lokal (auf dem Computer) gespeichert?

Ich benutze den folgenden Link, um eine baumartige Struktur zu erstellen:VERKNÜPFUN

Dies ist mein 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>

Wenn ich das starte, wird nichts gespeichert.

Ich habe dem Code dieser Struktur eine Schaltfläche zum Speichern hinzugefügt.

Ich möchte, dass der Benutzer diese als JSON-Daten erstellte Baumstruktur auf seinem lokalen Computer speichern kann, wenn er auf diese Schaltfläche zum Speichern klickt. Ich möchte dies, da dieser Baum bearbeitet werden kann. Wie kann ich das machen

Ich habe den folgenden Link dafür verwendet:

Verknüpfun

Ich möchte, dass alle Änderungen, die an id = "tt" vorgenommen werden, in Form von JSON abgerufen und auf meinem lokalen Computer gespeichert werden können.

Zu kommentieren