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下样式比较完美。