我有一个存储为 xml 文档的现有数据结构。它本质上是一个站点地图。每个节点都有一些关联的元数据（例如，与节点关联的关键字和描述）。我希望能够使用 xml_data 插件来直接从该源加载。从文档和源代码的快速浏览来看，这似乎是不可能的 - 我仅限于文档中描述的两种格式。
但是，我无法想象这是一个完全独特的用例。似乎我的选择是扩展 jstree，以便我可以将自己的 XSLT 添加到 xsl var 以处理我的格式，预处理文件服务器端的格式，以便结果为预期格式，或更改我的数据交换格式为 JSON 并在 JSON 和 XML 服务器端之间进行转换。我从我看到的帖子中得到的感觉是，至少可以使用 json_data 插件序列化/反序列化元数据，但我对此不是 100% 确定。
任何人都可以根据您的经验帮助改进我的方向吗？
【问题讨论】：
标签： xml serialization data-structures jstree xbel
我认为这是可能的。
见：
http://www.jstree.com/documentation/xml_data
名为 .parse_xml 的 JsTree 函数 可用于转换 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 文档。
【讨论】：
以下带有自定义 XML 示例的 jsTree 可能有用：JSTree and custom XML
【讨论】：
我的源 XML 没有遵循 jsTree 中描述的任何一种“格式”，我的要求与您完全相同。我解决这个问题的方法是编写一个 XSLT 脚本将我的 XML 转换为 jsTree 接受的格式，然后异步加载生成的 XML 文件。
【讨论】：