Question

我正在使用JStree显示XML文件，在显示之后，用户可以创建，重命名或删除某些节点，并确保这些更改仅出现在显示的xml上，而不会反映在原始文件上，I想要知道如何在点击提交按钮之后将这些更改反映到原始XML，或者至少如何更改数据。

更新

代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu-editor</title>
<script type="text/javascript" src="src/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="src/jstree/jquery.cookie.js"></script>
<script type="text/javascript" src="src/jstree/jquery.hotkeys.js"></script>
<script type="text/javascript" src="src/jstree/jquery.jstree.js"></script>
<link href="themes/!style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="src/jstree/!script.js"></script>
<script type="text/javascript" src="src/UIMTreeProcessor.js"></script>


<style type="text/css">
.
.
.
//css stuff
</style>

</head>

<body>
<div id="dummy"></div>
<div id="mylist">
<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>
</div>

<div id="submit" class="submit_btn">Submit</div>

</body>
<script type="text/javascript" class="source below">
var _url = "cafe.xml";
        var _uimTree = null;

        $(function () {
            getTopContent();
        });

        getTopContent = function(){
            $.ajax({
                type: "GET",
                url: _url,
                dataType:"xml",
                cache: false,
                beforeSend:function(){
                    //do something before send
                },
                success: function(data){
                    processXML(data);
                },
                error:function(e){
                    alert("Error: "+e);
                }
            });
        }       

        processXML = function(root){
            _uimTree = new UIMTreeProcessor(root, $("#mylist"));
            _uimTree.doProcess(); 


        }


$('#submit').on('click',function(){ 

      //alert the entire XML after edits via (getXML)

});

</script>

UIMtreeprocessor 库代码

function UIMTreeProcessor(data, treeEl) {
    this.data = data;
    this.treeEl = treeEl;
}

UIMTreeProcessor.prototype.initTree = function(data){
    this.treeEl.jstree({
        "json_data" : {
            "data":data,
            "progressive_render":"true"
        },
        "plugins" : ["themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"],
        "core":{"animation":0}
        });
}

UIMTreeProcessor.prototype.doProcess = function(){
    //Find root:
    var _root = $(this.data).children(':first-child');
    var _a_feed = new Array();

    this.vsTraverse($(_root), _a_feed);

    var _treedata = [{"data":_root[0].nodeName,"children":_a_feed, "state":"open"}];
    this.initTree(_treedata);
}

UIMTreeProcessor.prototype.vsTraverse = function(node, arr){
    var _ch = $(node).children();

    for(var i=0; i<_ch.length; i++){
        var _vsArr = new Array();
        this.vsTraverse(_ch[i], _vsArr);
        var _a_att = this.vsTraverseAtt(_ch[i]);
        if(null!=_a_att){
            _vsArr.push([{"data":"Attributes "+"["+_ch[i].nodeName+"]","children":_a_att, attr : { "class" : "uim_attr"}}]);
        }
        if(null!=_ch[i].firstChild && 3==_ch[i].firstChild.nodeType){
            arr.push([{"data":_ch[i].nodeName + ": " + _ch[i].firstChild.textContent,"children":_vsArr, "state":"open"}]);
        }else{
            arr.push([{"data":_ch[i].nodeName,"children":_vsArr, "state":"open"}]);
        }

    }
}

UIMTreeProcessor.prototype.vsTraverseAtt = function(node){
    var _a_atts = null;
    if(null!=node.attributes && node.attributes.length > 0){
        _a_atts = new Array();
        for(var i=0; i<node.attributes.length; i++){
            _a_atts.push(node.attributes[i].nodeName + ":" + node.attributes[i].nodeValue);
        }
    }
    return _a_atts;
}

Answer 1

编辑：我原来的答案确实错了。

xml_data插件中有一个get_xml方法，应该按照您的描述进行操作。我自己没有测试过它，但如果它像json_data.getJSON那样，输出将包含各种JStree元数据，你不想把它们放回到你的XML中。

如何将JStree更改反映到原始XML？

1 个答案: