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] + "' οnclick='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] + "' οnclick='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下样式比较完美。