1

我正在使用 JStree 显示 XML 文件，显示后用户可以创建、重命名或删除一些节点，并且确保这些更改仅出现在显示的 xml 上而不反映在原始文件上，我想知道单击提交按钮后如何将此更改反映到原始 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;
}
4

1 回答 1

0

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

xml_data插件中有一个get_xml方法，它应该做你描述的事情。我自己没有测试过，但如果它是类似的，输出将包含各种 JStree 元数据，您不想将其放回 XML。json_data.getJSON

于 2013-10-29T18:11:11.037 回答