此代码将xml文件转换为html可扩展树:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "stations10.xml",
success: function(tree) {
traverse($('#treeView li'), tree.firstChild)
// this – is an —
$('#treeView li:has(li)').addClass("Max").click(function(e) {
$(this).toggleClass("Max Min");
$(this).children().toggle();
e.stopPropagation();
})
$('#treeView li').click(function(g) {
var mytree2 = $(this);
mytree2.children('li').toggle();
g.stopPropagation();
})
$('<b></b>').prependTo('#treeView li:has(li)').click(function() {
var sign = $(this).text()
if (sign == "–")
$(this).text('').next().children().hide()
else
$(this).text('').next().children().show()
})
}
})
});
function traverse(node, tree) {
var children = $(tree).children()
node.addClass(tree.nodeName).append(tree)
if (children.length) {
var ul = $("<ul>").appendTo(node)
children.each(function() {
var li=$('<li>').appendTo(ul)
traverse(li, this)
})
} else {
$('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
}
}
</script>
<style type="text/css">
#treeView li {
list-style: none;
}
#treeView ul {
padding-left: 1em;
}
#treeView b {
padding-right: 1em;
}
.Min {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
padding-left: 15px;
}
.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
padding-left: 15px;
}
li {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
padding-left: 15px;
}
.MainStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.Substation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.Control.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.PushButton.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.ElectricStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
</style>
<title>treeView</title>
</head>
<body>
<ul id="treeView">
<li></li>
</ul>
</body>
</html>
这是XML文件:
<?xml version="1.0" encoding="UTF-8"?>
<MAIN xmlns:xlink="http://www.w3.org/1999/xlink"> MAIN
<MainStation
xlink:type="extended"
xlink:href="http://google.com"
xlink:show="new"> Mainstation1
<Substation> Substation1
<Control>Control1</Control>
<Control>Control2<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
<PushButton>PushButton1</PushButton>
</Substation>
<Substation> Substation2
<Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
<Control>Control2</Control>
<PushButton>PushButton1</PushButton>
</Substation>
<Substation> Substation3
<Control>Control1</Control>
<Control>Control2</Control>
<Control>Control3</Control>
<Control>Control4</Control>
</Substation>
<Substation> Substation4
<PushButton>PushButton1</PushButton>
<PushButton>PushButton2</PushButton>
</Substation>
</MainStation>
<MainStation> Mainstation2
<Substation> Substation1
<Control>Control1</Control>
<Control>Control2</Control>
<PushButton>PushButton1</PushButton>
</Substation>
<Substation> Substation2
<Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
<Control>Control2</Control>
<PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
</Substation>
</MainStation>
<ElectricStation> ElectricStation1
<Substation> Substation1
<Control>Control1</Control>
<Control>Control2</Control>
<PushButton>PushButton1</PushButton>
</Substation>
<Substation> Substation2
<Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
<Control>Control2</Control>
<PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
</Substation>
</ElectricStation>
</MAIN>
如您所见,我尝试将主站节点链接到Google,这样当我在输出中单击它时,它将打开Google。但是,它不起作用。
您可能需要更改脚本以进行扩展。
这是您可以做到的一种方法。我添加了一个span标签,这是为了显示图像。我添加了单击处理程序以折叠并扩展到此。因此,您必须精确地单击图像以展开或折叠列表。第二个处理程序用于带有href属性的标签。单击具有href属性的列表时,它将重定向到链接位置。
注意:我已经将XML中的xlink:href属性更改为href。
[编辑]
完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "stations10.xml",
success: function(tree) {
traverse($('#treeView li'), tree.firstChild)
$('<span><\/span>').addClass("Max").prependTo('#treeView li:has(li)')
$('.Max,.Min').click(function (e) {
$(this).toggleClass("Max Min")
$(this).siblings().next().toggle()
});
$("[href]").click(function(){
window.location.href = $(this).attr("href")
});
}
})
});
function traverse(node, tree) {
var children = $(tree).children()
node.addClass(tree.nodeName).append(tree)
if (children.length) {
var ul = $("<ul>").appendTo(node)
children.each(function() {
var li=$('<li>').appendTo(ul)
traverse(li, this)
})
} else {
$('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
}
}
</script>
<style type="text/css">
#treeView li {
list-style: none;
}
#treeView ul {
padding-left: 1em;
}
#treeView b {
padding-right: 1em;
}
.Min {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
padding-left: 30px;
}
.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
padding-left: 30px;
}
li {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
padding-left: 30px;
}
.MainStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 30px;
}
.Substation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 30px;
}
.Control.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 30px;
}
.PushButton.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 30px;
}
.ElectricStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 30px;
}
</style>
<title>treeView</title>
</head>
<body>
<ul id="treeView">
<li></li>
</ul>
</body>
</html>
XML代码的变化
<MainStation
xlink:type="extended"
href="http://google.com"
xlink:show="new"> Mainstation1
....
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句