我有一个问题。我正在使用JQuery来获取JSON嵌套的对象列表。我通过它，可以读取我的所有数据，并且evrything很好。但是，当我尝试使用$(#myDiv).html(value)将结果作为树可折叠列表时，它无效。此函数确实创建了一个尝试视图，但不能折叠。当我采用相同的结果并将其创建为HTML时，它工作正常。除了函数$(#myDiv).html(value)之外，我还尝试使用$(#myDiv).append(value)和innerHTML。但它没有帮助，我觉得可以通过这些功能实现可折叠的树，或者我做错了什么？
我正在使用这个JavaScript库和CSS来实现这个目标：
http://www.javascripttoolbox.com/lib/mktree/index.php
我的代码：
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
//Set plus sign for all sub menus
$('li:has("ul")>div').html('+');
//Handle plus/minus tree expansion
$('li>div').on('click', function (e) {
if ($(this).parent('li').hasClass('selected')) {
$(this).siblings('ul').slideUp();
$(this).parent('li').removeClass('selected');
$(this).html('+');
} else {
$(this).siblings('ul').slideDown();
$(this).parent('li').addClass('selected');
$(this).html('−')
}
})
//Handle tree item link stored as LI data attribute
$('li>label').on('click', function (e) {
//This is your URL, URI, Link, Location, etc
alert($(this).parent('li').attr('data-location'))
})
});
</script>
<script type="text/javascript">
var uri = 'InfoCenter.asmx/getAllRemoteAndLocal';
$(document).ready(function () {
$.ajax({
type: "POST",
url: 'InfoCenter.asmx/getAllRemoteAndLocal',
data: JSON.stringify(), //Pass a parameter to the Web Service method
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (ws_result) {
processResult(ws_result.d);
},
error: function (msg) {
alert("error msg: " + msg);
}
});
});
function processResult(msg) {
var resultArray = msg.split(" #*§$%# ");
var t = "";
for (i = 0; i < resultArray.length; i++) {
var sdRootStatus = eval("(" + resultArray[i] + ")");
//alert(resultArray[i]);
console.log(sdRootStatus);
//jQuery.each(data, function (rec) {
$.each(sdRootStatus, function (key, nodeStatus) {
var areaStatis = nodeStatus.areaStatis;
$.each(areaStatis, function (key, areaStatus) {
var areaObject = areaStatus.area;
t = t + "<a href=\"#\" onClick=\"expandTree('area" + areaObject.id + "');return false;\"> <img src=\"\Sources\\down.png\" class=\"small\"> </a>"
+ "<a href=\"#\" onClick=\"collapseTree('area" + areaObject.id + "'); return false;\">"
+ "<img src=\"\Sources\\up.png\" class=\"small\"> [all] </a>";
//t = t + "<div id=\"tree\"><ul>"
t = t + "<ul class=\"mktree\" id=\"area" + areaObject.id + "\">"
//+ "<li> <img src=\"\Sources\\plus.gif\"/> " + areaObject.name + " <img src=\"\Sources\\" + getIcon(document.getElementById('emptyForm'), areaStatus.Color, 'global') + "\" class=\"global\">";
+ "<li>" + areaObject.name + " <img src=\"\Sources\\" + getIcon(document.getElementById('emptyForm'), areaStatus.Color, 'global') + "\" class=\"global\">";
var zonesStatis = areaStatus.zoneStatis;
$.each(zonesStatis, function (key, zoneStatus) {
var zone = zoneStatus.zone;
t = t + "<ul>"
+ "<li>" + zone.name + " <img src=\"\Sources\\" + getIcon(document.getElementById('emptyForm'), zoneStatus.Color, 'check') + "\" class=\"check\">";
var componentStatis = zoneStatus.componentStatis;
$.each(componentStatis, function (key, componentStatus) {
var component = componentStatus.component;
t = t + "<ul>"
+ "<li>" + component.ServiceName + " <img src=\"\Sources\\" + getIcon(document.getElementById('emptyForm'), componentStatus.Color, 'check') + "\" class=\"check\">";
var checkAgentStatis = componentStatus.checkAgentStatis;
$.each(checkAgentStatis, function (key, checkAgentStatus) {
t = t + "<ul>"
+ "<li title=\"" + checkAgentStatus.Description + "\" class=\"silver\">" + checkAgentStatus.Name + " <img src=\"\Sources\\" + getIcon(document.getElementById('emptyForm'), checkAgentStatus.Color, 'check') + "\" class=\"check\">"
+ "</li></ul>";
});
t = t + "</li></ul>";
});
t = t + "</li></ul>";
});
t = t + "</li></ul></div>";
});
});
}
console.log(t);
$("#myDiv").html(t);
//$("#myDiv").append(t);
//myDiv.innerHTML = t;
}
</script> <style type="text/css">
div#tree ul {
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
}
div#tree ul {
display: none;
}
div#tree li > div {
display: inline;
margin-right: 5px;
cursor: pointer;
}
div#tree label:hover {
text-decoration: underline;
cursor: pointer;
}
div#tree > ul {
display: block;
}
.large {
color: #00FF00;
font-family: arial;
font-size: 4pt;
}
</style><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="SystemDiagnostics.Main" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./Sources/customUtils.js"></script>
<script src="./Scripts/jquery-2.1.4.min.js"></script>
<script src="./Scripts/json2.min.js"></script>
<script type="text/javascript" src="./Sources/mktree.js"></script>
<link rel="stylesheet" type="text/css" href="./Sources/mktree.css">
<link rel="stylesheet" type="text/css" href="./Sources/style.css">
</head>
<body>
<div id="myDiv">
</div>
<form Action = "TestJSonClient.aspx" runat="server">
</form>
<form Action="#" id="emptyForm">
<input type="hidden" name="green" value="<%=GREEN %>">
<input type="hidden" name="yellow" value="<%=YELLOW %>">
<input type="hidden" name="red" value="<%=RED %>">
<input type="hidden" name="statusIconGreen" value="<%=STATUS_ICON_GREEN %>">
<input type="hidden" name="statusIconYellow" value="<%=STATUS_ICON_YELLOW %>">
<input type="hidden" name="statusIconRed" value="<%=STATUS_ICON_RED %>">
<input type="hidden" name="statusCheckIconGreen" value="<%=CHECK_ICON_GREEN %>">
<input type="hidden" name="statusCheckIconYellow" value="<%=CHECK_ICON_YELLOW %>">
<input type="hidden" name="statusCheckIconRed" value="<%=CHECK_ICON_RED %>">
</form>
</body>
</html>