Question

我有一个现有的数据结构，存储为xml doc。它本质上是一个站点地图。每个节点具有一些关联的元数据（例如，与节点相关联的关键字和描述）。我希望能够使用xml_data插件直接从该源加载。从快速查看文档和源代码看，它看起来不太可能 - 我仅限于文档中描述的两种格式。

然而，我无法想象这是一个完全独特的用例。似乎我的选择是扩展jstree，以便我可以将自己的XSLT添加到xsl var来处理我的格式，预处理文件服务器端的格式，以便结果是预期的格式，或者更改我的数据交换格式化为JSON并在JSON和XML服务器端之间进行转换。从我看到的帖子中得到的意义是，至少可以使用json_data插件序列化/反序列化元数据，但我不是百分之百确定。

任何人都可以根据您的经验帮助改进我的方向吗？

Answer 1

我认为这是可能的。

请参阅：

http://www.jstree.com/documentation/xml_data

JsTree函数名为.parse_xml   可用于转换XML字符串或   对象需要DOM结构   由jstree。

修改：错误！

如果您发布站点地图XML的示例，我很乐意为您创建一个工作示例。

修改：下面的工作示例

您可以通过 ajax 选项使JsTree进程成为外部XML源。想象一下，你有一个像这样的XBEL文件：

<xbel version="1.0">    
    <bookmark href="http://stackoverflow.com">
        <title>Stack Overflow</title>
    </bookmark>
    <folder>
        <title>Stack Exchange</title>
        <folder>
            <title>Programming</title>
            <bookmark href="http://stackoverflow.com">
                <title>Stack Overflow</title>
            </bookmark>
            <bookmark href="http://stackapps.com">
                <title>Stack Apps</title>
            </bookmark>
            <bookmark href="http://webapps.stackexchange.com">
                <title>Web Applications</title>
            </bookmark>
            <bookmark href="http://programmers.stackexchange.com/">
                <title>Programmers</title>
            </bookmark>
        </folder>
        <folder>
            <title>Systems</title>
            <bookmark href="http://serverfault.com">
                <title>Server Fault</title>
            </bookmark>
            <bookmark href="http://superuser.com">
                <title>Super User</title>
            </bookmark>
        </folder>
        <bookmark href="http://careers.stackoverflow.com">
            <title>Careers</title>
        </bookmark>
        <bookmark href="http://meta.stackoverflow.com">
            <title>Meta</title>
        </bookmark>
        <bookmark href="http://area51.stackexchange.com">
            <title>Area 51</title>
        </bookmark>
        <bookmark href="http://gaming.stackexchange.com">
            <title>Gaming</title>
        </bookmark>
    </folder>
</xbel>

您可以使用JsTree处理此问题：

<html>
    <head>
        <title></title>
        <script type="text/javascript" src="_lib/jquery.js"></script>
        <script type="text/javascript" src="_lib/jquery.cookie.js"></script>
        <script type="text/javascript" src="_lib/jquery.hotkeys.js"></script>
        <script type="text/javascript" src="jquery.jstree.js"></script>
        <script type="text/javascript">

            $(function () {
                $("#xbel").jstree({
                    "xml_data" : {
                        "ajax" : {
                            "url" : "stackexchange.xml",
                            "success" : function(data, textStatus, XMLHttpRequest){
                                var result = $('<dom></dom>');
                                var root = $('<root></root>');          
                                var doc = traverseXbel($(data), root);
                                result.append(doc);
                                return result.html();
                            }
                        },
                        "xsl" : "nest"
                    },
                    "plugins" : [ "themes", "xml_data" ]
                });

            });

           function traverseXbel(xbel, doc){
                var title, href, item, name, content, innerdoc;
                // folder => item
                // bookmark => item with href attribute

                // Deal with this level bookmarks                
                $(xbel).children('bookmark').each(function(){
                    href = $(this).attr('href');
                    title = $(this).find('title').text();
                    if(title && href){
                        item = $('<item></item>');
                        content = $('<content></content>');
                        name = $('<name></name>');
                        name.attr("href", href);                        
                        name.text(title);                        
                        content.append(name);
                        item.append(content);                        
                        doc.append(item);
                    }
                });                
                $(xbel).children('folder').each(function(){
                    title = $(this).find('title:first').text();
                    if(title){
                        item = $('<item></item>');
                        content = $('<content></content>');
                        name = $('<name></name>');
                        name.text(title);                        
                        content.append(name);
                        item.append(content);                        
                        item = traverseXbel($(this), item);
                        doc.append(item);                            
                    }
                });                
                return doc;
           }


        </script>
    </head>
    <body>
        <div id="xbel"></div>
    </body>
</html>

好吧，我现在感觉不那么白痴，我的第一个答案是错误的，因为我误解了JsTree API文档。

Answer 2

以下带有自定义XML示例的jsTree可能很有用：JSTree and custom XML

Answer 3

我的源要求与jsTree中描述的任何一种“格式”不同，我的要求与您完全相同。我解决这个问题的方法是编写一个XSLT脚本，将我的XML转换为jsTree接受的格式，然后异步加载生成的XML文件。

JsTree：从外部xml源加载自定义元数据

3 个答案: