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

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

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

任何人都可以帮助完善我的方向根据您的经验？

来源

2010-10-07 rhuffstedtler

我在我看来，这是可能的。

参见：

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

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

编辑：错！

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

编辑：工作下面的例子

您可以JsTree过程中的外部XML源，但通过AJAX选项。想象一下，你有一个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-07 21:52:54

与自定义XML示例以下jsTree可能是有用的：我的源XML没有遵守其中JSTree and custom XML

来源

2010-11-18 02:32:33 Vlad

我有完全一样的要求，因为你要么在jsTree描述的“格式”之一。我解决这个问题的方式是编写一个XSLT脚本将我的XML转换为jsTree接受的格式，然后异步加载生成的XML文件。

来源

2011-10-13 16:44:56 dnshio

您能否请您发布您的代码..至少请抽取样品？ – Interstellar 2014-07-15 10:46:43

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

回答

相关问题