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源加載自定義元數據

回答

相關問題