0

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

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

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

4

3 回答 3

4

我认为这是可能的。

看：

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

调用 .parse_xml 的 JsTree 函数可用于将 XML 字符串或对象转换为 jstree 所需的 DOM 结构。

编辑：错了！

如果您发布站点地图 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 文档。

于 2010-10-07T21:52:54.957 回答
0

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

于 2010-11-18T02:32:33.543 回答
0

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

于 2011-10-13T16:44:56.857 回答