jQuery将xml解析为嵌套列表
jQuery parse xml into nested list
我有一些来自Web服务的xml,我想解析并创建一个嵌套的无序列表,以便我可以使用CSS进行样式设置,使其看起来像树视图。该 xml 如下所示:
<?xml version="1.0" encoding="utf-8"?>
<ArrayOfNavMenuItem xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<NavMenuItem>
<DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
<PRIMARY_FOLDER>XYZ HR EMP SELF SERVICE</PRIMARY_FOLDER>
<MENU_DISPLAY_NAME>Accommodation Request</MENU_DISPLAY_NAME>
</NavMenuItem>
<NavMenuItem>
<DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
<PRIMARY_FOLDER>XYZ HR EMP SELF SERVICE</PRIMARY_FOLDER>
<MENU_DISPLAY_NAME>Additional Personal Information</MENU_DISPLAY_NAME>
</NavMenuItem>
<NavMenuItem>
<DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
<PRIMARY_FOLDER>XYZ HR EMP SELF SERVICE</PRIMARY_FOLDER>
<MENU_DISPLAY_NAME>All Actions Awaiting Your Attention</MENU_DISPLAY_NAME>
</NavMenuItem>
<NavMenuItem>
<DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
<PRIMARY_FOLDER>XYZ CORP HR TIME SELF SERVICE</PRIMARY_FOLDER>
<SECONDARY_FOLDER>Time</SECONDARY_FOLDER>
<MENU_DISPLAY_NAME>Create Timecard</MENU_DISPLAY_NAME>
</NavMenuItem>
<NavMenuItem>
<DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
<PRIMARY_FOLDER>XYZ CORP HR TIME SELF SERVICE</PRIMARY_FOLDER>
<SECONDARY_FOLDER>Time</SECONDARY_FOLDER>
<MENU_DISPLAY_NAME>Recent Timecards</MENU_DISPLAY_NAME>
</NavMenuItem>
<NavMenuItem>
<DOMAIN_USERNAME>SomeUser</DOMAIN_USERNAME>
<PRIMARY_FOLDER>XYZ CORP HR TIME SELF SERVICE</PRIMARY_FOLDER>
<SECONDARY_FOLDER>Time</SECONDARY_FOLDER>
<MENU_DISPLAY_NAME>Timecard Search</MENU_DISPLAY_NAME>
</NavMenuItem>
</ArrayOfNavMenuItem>
而我可怜的人对jQuery的尝试到目前为止。我不确定在循环访问每个导航项并将它们添加到相应文件夹内的<li></li>
之前如何捕获主文件夹、辅助文件夹结构
我的小提琴在这里..
//AJAX CALL
$(response).find('NavMenuItem').each(function (index) {
var test = ($(this).find('SECONDARY_FOLDER').length > 0) ? '<ul><li><label for="subfolder' + index +'">' + $(this).find("SECONDARY_FOLDER").text() + '</label><input type="checkbox" id="subfolder' + index + '">' : '';
$('.SearchResults').append('<ul class="tree"><li><label for="folder' + index + '">' + $(this).find("PRIMARY_FOLDER").text() + '</label>'
+ '<input type="checkbox" checked id="folder' + index + '" />'
+ test
+ '<ul><li class="file"><a href="#">' + $(this).find("MENU_DISPLAY_NAME").text() + '</a></li></ul>'
+ '</li></ul>');
});
但我想要的 HTML 输出是这样的:
<ul class="tree">
<li>
<label for="folder1">XYZ CORP HR TIME SELF SERVICE </label>
<input type="checkbox" checked id="folder1" />
<ul>
<li><label for="subfolder1">Time</label> <input type="checkbox" id="subfolder1" />
<ul>
<li class="file"><a href="#" target="_tab">Create Timecard</a></li>
<li class="file"><a href="#" target="_tab">Recent Timecards</a></li>
<li class="file"><a href="#" target="_tab">Timecard Search</a></li>
</ul>
</li>
</ul>
</li>
<li>
<label for="folder2">XYZ HR EMP SELF SERVICE</label> <input type="checkbox" id="folder2" />
<ul>
<li class="file"><a href="#" target="_tab">Accommodation Request</a></li>
<li class="file"><a href="#" target="_tab">Additional Personal Information</a></li>
<li class="file"><a href="#" target="_tab">All Actions Awaiting Your Attention</a></li>
</ul>
</li>
</ul>
看看这个:
var tree=$('<ul></ul>').addClass('tree'); // create an unordered list with the class 'tree'
$('NavMenuItem',response).each(function() { //for each item in NavMenuItem
var primary=$('PRIMARY_FOLDER',this).text(); //get the text of the PRIMARY_FOLDER element
var secondary=$('SECONDARY_FOLDER',this).text();
var displayName=$('MENU_DISPLAY_NAME',this).text();
if (!primary) return; // this shouldn't happen, but still, if no primary folder, ignore it
//search for a direct listitem that has a direct child a label
// that has the primary text as content (get the label, then return its parent)
var li=$('>li>label:contains("'+primary+'"):first',tree).parent();
if (!li.length) { // if not found, create it
var index=$('>li',tree).length+1; // the number of list items in the tree plus 1
var li=$('<li></li>') // create a list item
.append($('<label for="folder'+index+'"></label>').text(primary)) //that contains a label
.append('<input type="checkbox" checked id="folder'+index+'" />') // and an input
.append('<ul></ul>'); // and an unordered list
tree.append(li); //add it to the tree
}
if (secondary) { //if we have a secondary folder
var ul = $('>ul',li); // find the unordered list in it
// same as with primary, only here
var li2=$('>li>label:contains("'+secondary+'"):first',ul).parent();
if (!li2.length) {
var index=$('>li',ul).length+1;
var li2=$('<li></li>')
.append($('<label for="subfolder'+index+'"></label>').text(secondary))
.append('<input type="checkbox" checked id="subfolder'+index+'" />')
.append('<ul></ul>')
ul.append(li2);
}
li=li2; //set the current listitem to be the secondary
}
var ul = $('>ul',li); //get the unordered list child of the current listitem
var index=$('>li',ul).length+1; //compute file index (if you need it)
//add the file
ul.append($('<li></li>').addClass('file').append($('<a href="#" target="_tab"></a>').text(displayName)));
});
// add the tree to the element with class 'SearchResults'
$('.SearchResults').append(tree);
我尽可能使用 jQuery,尽管我的观点是你应该创建一个将所有内容分组的 JavaScript 结构,然后将其转换为 jQuery DOM 操作。
似乎您的问题是您想将无序列表添加到具有类 SearchTResults 的元素中,然后将列表项添加到 XML 的每个元素的列表中,而不是为每个元素添加一个无序列表。第一步是解决这个问题:
var tree=$('<ul class="tree"></ul>').appendTo('.SearchResults');
$(response).find('NavMenuItem').each(function (index) {
var test = ($(this).find('SECONDARY_FOLDER').length > 0)
? '<ul><li><label for="subfolder' + index + '">' + $(this).find("SECONDARY_FOLDER").text() + '</label><input type="checkbox" id="subfolder' + index + '">'
: '';
tree.append('<li><label for="folder' + index + '">' + $(this).find("PRIMARY_FOLDER").text() + '</label>'
+ '<input type="checkbox" checked id="folder' + index + '" />'
+ test
+ '<ul><li class="file"><a href="#">' + $(this).find("MENU_DISPLAY_NAME").text() + '</a></li></ul>'
+ '</li>');
});
然后是一些观察:
-
$(this).find('SECONDARY_FOLDER')
与$('SECONDARY_FOLDER',this)
-
if (X>0)
与if (X)
相同 - JQuery 有一种很好的链接方法,因此您可以将项目追加为您正在添加它们,例如
$('<li></li').append($('<input />').css({display:'none'}).val(someValue))
等,这可能会使您的代码更具可读性,因此更易于维护。
希望这有帮助。
相关文章:
- 默认情况下折叠和展开嵌套列表
- 在 Joomla (1.7.0) 中单击时显示嵌套列表
- ReactJs - 列表组件中的嵌套列表组件
- Extjs 4-associations hasMany不在loadData上加载嵌套列表
- 在AngularJS 1.5.x中嵌套列表并更正ng模型和ng值
- Javascript-嵌套列表获胜't展开
- 基于类名创建嵌套列表
- AngularJS:具有任意深度的嵌套列表
- 如何在sencha touch中获取嵌套列表
- 限制要在嵌套列表jQuery中添加的列表元素的数量
- 简单的层次结构与jQuery移动嵌套列表+挖空.js
- 隐藏嵌套列表的非活动同级
- 动态嵌套列表:单击时插入行,在当前元素之后
- jQuery将xml解析为嵌套列表
- 煎茶触摸 2:在选项卡面板内创建嵌套列表
- 悬停和嵌套列表 :悬停的元素
- 如何防止嵌套列表的点击事件
- jQuery 移动嵌套列表视图奇怪的行为 + 后退按钮退出
- 使用 jQuery 从 JSON 创建动态嵌套列表
- 在 React js 中打开和关闭递归嵌套列表