serialization - JsTree: Load custom metadata from an external xml source -
i have existing data structure stored xml doc. sitemap. every node has associated metadata (e.g., keywords , description associated node). able use xml_data plugin able load directly source. quick @ both documentation , source, doesn't possible - i'm limited 2 formats described in documentation.
however, can't imagine unique use case. seems options extend jstree add own xslt xsl var handle format, preprocess format of file server side result in expected format, or change data interchange format json , convert between json , xml serverside. sense posts have seen is @ least possible serialize/deserialize metadata json_data plugin, i'm not 100% sure on that.
can refine direction based on experience?
i looks me possible.
see:
http://www.jstree.com/documentation/xml_data
the jstree function called .parse_xml can used convert xml strings or objects dom structure required jstree.
edit: wrong!
if post example of site map xml i'd happy create working example you.
edit: working example below
you can make jstree process external xml source via ajax options. imagine had xbel file this:
<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> you can process jstree this:
<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 href attribute // deal 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> okay feel less of idiot now, first answer wrong because misunderstood jstree api docs.
Comments
Post a Comment