Asp.net Ul Li实现树结构异步加载并取得选择项

CSS:

.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color: white;
margin-top: 2px;
}
.treeview .hitarea {
background: url(images/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 16px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {display: inline;float:none;}
.treeview li { margin: 0;padding: 3px 0px 3px 16px;}
.treeview li span{ padding:0 0 0 5px; font-size:12px;cursor:pointer;}
#treecontrol { margin: 1em 0; display: none; }
.treeview li span.select{ font-size:12px; font-weight:bold;}
.treeview li.col{background: url(images/tv-collapsable.gif) 0 0; background-repeat:no-repeat; }
.treeview li.exp{background: url(images/tv-expandable.gif) 0 0; background-repeat:no-repeat;}
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.lastCollapsable { background:url(images/tv-collaps-last.gif) 0 0 no-repeat;}
.treeview li.lastExpandable { background:url(images/tv-expand-last.gif) 0 0 no-repeat;}
.treeview li.nochildnotlast{background:url(images/tv-item.gif) 0 0 no-repeat;}
.treeview li.nochildislast{background:url(images/tv-item-last.gif) 0 0 no-repeat;}

.aspx

<script type="text/javascript">

function InitTree() {
var pageurl = "Control/Handler.aspx?action=initTree";//Ajax获取数据源，格式为"code,name,childflag|code,name,childflag|...."如此
$.post(pageurl, function (data) {
if (data != "-1") {
var strReturn = data;
strReturn = strReturn.substring(0, strReturn.length - 1);//去掉最后一个|
var arrReturn = new Array();
arrReturn = strReturn.split('|');//转换成数组
for (var i = 0; i < arrReturn.length; i++) {
var arrNode = new Array();
arrNode[0] = arrReturn[i].split(',')[0]; //节点名称
arrNode[1] = arrReturn[i].split(',')[1]; //节点Code
arrNode[2] = arrReturn[i].split(',')[2]; //不为null，说明存在子节点，应该用+图片
$("#treeview").append("<li id='" + arrNode[1] + "'><span id='s" + arrNode[1] + "' onclick='GetChildDate(this.id)'>" + arrNode[0] + "</span></li>");
if (arrNode[2] != null && arrNode[2].toString() != "") {//如果存在子节点
if (i == arrReturn.length - 1) {
$("#" + arrNode[1]).addClass("lastCollapsable"); //存在子节点,是最后一个节点
}
else {
$("#" + arrNode[1]).addClass("col"); //存在子节点,不是最后一个节点
}
}
else {
if (i == arrReturn.length - 1) {
$("#" + arrNode[1]).addClass("nochildislast"); //不存在子节点，最后一个节点
}
else {
$("#" + arrNode[1]).addClass("nochildnotlast"); //不存在子节点，不是最后一个节点
}
}
}
}
else {
alert("获取数据出错啦！");
}
});
}
function GetChildDate(ncode) {
ncode = ncode.substring(1);
$("#TreeViewArea1_hdfdCode").val(ncode);
if ($("#" + ncode).attr("class") == "col") {//如果当前节点的样式为合并
if ($("#" + ncode).find("li").length < 2) {
BindDate(ncode); //绑定数据
}
$("#" + ncode).removeClass();
$("#" + ncode).addClass("exp");//样式改为展开
}
else if ($("#" + ncode).attr("class") == "exp") {
$("#" + ncode).removeClass();
$("#" + ncode).addClass("col");
$("#" + ncode).find("li").remove();
}
else if ($("#" + ncode).attr("class") == "lastCollapsable") {
if ($("#" + ncode).find("li").length < 2) {
BindDate(ncode); //绑定数据
}
$("#" + ncode).removeClass();
$("#" + ncode).addClass("lastExpandable");
}
else if ($("#" + ncode).attr("class") == "lastExpandable") {
$("#" + ncode).removeClass();
$("#" + ncode).addClass("lastCollapsable");
$("#" + ncode).find("li").remove();
}
else if ($("#" + ncode).attr("class") == "nochildislast" || $("#" + ncode).attr("class") == "nochildnotlast") {
//清除其他已选择的样式
$(".select").removeClass();
$("#" + ncode).find("span").removeClass();
$("#" + ncode).find("span").addClass("select");
}
else {
alert("请把您刚才点击的节点及之前的3步操作告之系统研发人员！");
}
}
function BindDate(ncode) {
var pageurl = "Control/Handler.aspx?action=getChildNodeValue&pcode=" + ncode;
$.post(pageurl, function (data) {
if (data != "-1") {
var strReturn = data;
strReturn = strReturn.substring(0, strReturn.length - 1);
var arrReturn = new Array();
arrReturn = strReturn.split('|');
$("#" + ncode).append("<ul>");
for (var i = 0; i < arrReturn.length; i++) {
var arrNode = new Array();
arrNode[0] = arrReturn[i].split(',')[0];
arrNode[1] = arrReturn[i].split(',')[1];
arrNode[2] = arrReturn[i].split(',')[2]; //不为null，说明存在子节点，应该用+图片
$("#" + ncode).append("<li id='" + arrNode[1] + "'><span id='s" + arrNode[1] + "' onclick='GetChildDate(this.id)'>" + arrNode[0] + "</span></li>");
if (arrNode[2] != null && arrNode[2].toString() != "") {//如果存在子节点
if (i == arrReturn.length - 1) {
$("#" + arrNode[1]).addClass("lastCollapsable"); //存在子节点，是最后一个节点
}
else {
$("#" + arrNode[1]).addClass("col"); //存在子节点，不是最后一个节点
}
}
else {
if (i == arrReturn.length - 1) {
$("#" + arrNode[1]).addClass("nochildislast"); //不存在子节点，最后一个节点
}
else {
$("#" + arrNode[1]).addClass("nochildnotlast"); //不存在子节点，不是最后一个节点
}
}
}
$("#" + ncode).append("</ul>");
}
else {
//alert("获取数据出错啦！");
}
});
}
$(document).ready(function () {
InitTree();//初始化树，如果初始化和后续的方法可以通用此处可直接调用GetChildDate方法
});

</script>

<div>
<ul id="treeview" class="treeview">
</ul>
<asp:HiddenField ID="hdfdCode" runat="server" />//用户记录当前选择项的Code
</div>

测试结果：

IE6、IE7、FF、Chrome、Safari、搜狗下节点内容有些下坠。

Opera、IE8下样式比较完美。