jQuery寫的一棵動態加載的樹

 

一個棵自己寫的jQuery的樹。與大家分享一下。

主要用於動態加載子節點，避免大數據量加載頁面慢的情況。

展示效果：

下面貼上源碼：

css部分：

#TreeView
{
	width:100%;
	font-size:12px;
	float:left;
}
.nodes				/*節點*/
{
	width:100%;
	min-height:22px;
	float:left;
}
.parentNodes		/*父節點*/
{
	width:100%;
	height:22px;
	float:left;
}
.childNodes			/*子節點*/
{
	float:left;
	width:100%;
}
.plus				/*展開和收縮圖片樣式*/
{
	float:left;
	cursor:pointer;
	width:16px;
	height:22px;
}
/*	line 豎向虛線圖片
	end  子節點最后拐角圖片
	null 空白圖片
	join 子節點相連圖片
	lineh 橫向虛線圖片
	load  數據加載時等待圖片 
*/
.line,.end ,.null ,.join , .load 
{
	float:left;
	width:16px;
	height:22px;
}
.checkbox
{
	float:left;
}
.text
{
	float:left;
	height:22px;
	line-height:22px;
}

 js部分：

//將TreeView封裝成插件的方式
(function($){
    $.fn.extend({
        TreeView:function(obj){
            if($.type(obj)==="object"){
                if(obj["Default"]!=undefined){
                    var objDiv=$("<div></div>");
                    $.each(obj["Default"],function(k,v){
                        var nodes=$("<div></div>").addClass("nodes");
                        var parentNodes=$("<div></div>").addClass("parentNodes");
                        var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
                        var topplus=$("<img src=\"image/topplus.gif\"/>").addClass("plus").css({"width":"9px","height":"9px","margin":"5px 4px 8px 0"});;
                        var checkbox=$("<input type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
                        var a=$("<span class=\"text\"><a href=\""+v["url"]+"\">"+v["name"]+"</a></span>").addClass("text");
                        parentNodes.append(topplus.attr("id",v["ajaxData"])).append(checkbox).append(a);
                        nodes.append(parentNodes).append(childNodes);
                        objDiv.append(nodes);
                    });
                    $(this).append(objDiv.html());
                }else{
                    return false;
                }
                //對TreeView里面所以的收縮的圖標進行監聽
                $(this).delegate(".plus","click",function(){
                    var childNodes=$(this).parent().next(),thisObj=$(this);
                    if(childNodes.css("display")!="none"){
                       TreeFn.childHide(thisObj);
                    }else{
                        if(childNodes.html()==""){
                            TreeFn.GetData(thisObj,obj);
                        }else{
                            TreeFn.childShow(thisObj);
                        }
                    }
                    //同時對checkbox也進行監聽
                }).delegate(".checkbox","click",function(){
                    var checkbox=$(this),childNodes=$(this).parent().next();
                    if(checkbox.attr("checked")){
                        childNodes.find(".checkbox").attr("checked",true);
                    }else{
                        childNodes.find(".checkbox").attr("checked",false);
                    }
                })  
            }else{
                alert("111");
            }
            return this;
        }
    });
})(jQuery);
//這里定義一個對象，把我們用的到的方法封裝以來
var TreeFn={
    //將ajax動態加載好的子節點展開出來
    childShow:function(thisObj){
        var childNodes=thisObj.parent().next();
        childNodes.show(); 
        if(thisObj.attr("src").indexOf("top")>=0){
            thisObj.attr("src","image/topminus.gif"); 
        }else if(thisObj.attr("src").indexOf("end")>=0){
            thisObj.attr("src","image/endminus.gif");
        }else{
            thisObj.attr("src","image/centerminus.gif");
        }
    },
    //將子節點收縮
    childHide:function(thisObj){
        var childNodes=thisObj.parent().next();
        childNodes.hide();
        if(thisObj.attr("src").indexOf("top")>=0){
            thisObj.attr("src","image/topplus.gif"); 
        }else if(thisObj.attr("src").indexOf("end")>=0){
            thisObj.attr("src","image/endplus.gif");
        }else{
            thisObj.attr("src","image/centerplus.gif");
        }
    },
    //利用父節點元素的個數，構造子節點元素的個數
    lineImage:function(thisobj){
        var objDiv=$("<div></div>");
        var p=thisobj.parent().children();
        p.each(function(index){
            if(index<p.size()-3){
                var line=$("<img src=\"image/line.gif\"/>").addClass("line");
                var nul=$("<img src=\"image/null.gif\"/>").addClass("null");
                if($(this).attr("class")=="line"||$(this).attr("class")=="join"||$(this).attr("src").indexOf("center")>=0){
                    objDiv.append(line);
                }else{
                    objDiv.append(nul);  
                }
            }
        });
        return objDiv;
    },
    //解析ajax過來的json數據，將其構造成子節點
    AnalyJSON:function(json,thisObj,obj){
        var objDiv=$("<div></div>");
        $.each(json,function(key,value){
            var nodes=$("<div></div>").addClass("nodes");
            var parentNodes=$("<div></div>").addClass("parentNodes");
            var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
            var line=$("<img src=\"image/line.gif\"/>").addClass("line");
            var topplus=$("<img src=\"image/topplus.gif.gif\" />").addClass("plus");
            var centerplus=$("<img src=\"image/centerplus.gif\" />").addClass("plus").attr("id",value["id"]);
            var endplus=$("<img src=\"image/endplus.gif\"/>").addClass("plus").attr("id",value["id"]);
            var join=$("<img src=\"image/join.gif\"/>").addClass("join");
            var lineh=$("<img src=\"image/lineh.gif\"/>").addClass("end");
            var end=$("<img src=\"image/end.gif\"/>").addClass("end");
            var checkbox=$("<input type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
            var a=$("<span class=\"text\"><a href=\""+value["url"]+"\">"+value["name"]+"</a></span>").addClass("text");
            
            var commone=TreeFn.lineImage(thisObj);
            if(value["hasChild"]=="1"){
                if(value["last"]==undefined||value["last"]!="1")
                {
                    parentNodes.append(commone.html()).append(join).append(centerplus);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }else{
                    parentNodes.append(commone.html()).append(end).append(endplus);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }
                nodes.append(parentNodes);
                nodes.append(childNodes);
                objDiv.append(nodes);
            }else{
                if(value["last"]==undefined||value["last"]!="1"){
                    parentNodes.append(commone.html()).append(join).append(lineh);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }else{
                    parentNodes.append(commone.html()).append(end).append(lineh);
                    if(thisObj.next().attr("checked")){
                        parentNodes.append(checkbox.attr("checked",true)).append(a);
                    }else{
                        parentNodes.append(checkbox).append(a);
                    }
                }
                nodes.append(parentNodes);
                nodes.append(childNodes);
                objDiv.append(nodes);
            }
        });
        return objDiv;
    },
    //點擊父節點展開，進獲取下面的子節點數據
    GetData:function(thisObj,obj){
        $.ajax({
            type:"GET",
            cache:false,
            async:false,
            url:obj["ajaxUrl"],
            dataType:"text",
            data:{Key:thisObj.attr("id")},
            beforeSend:function(){
                thisObj.parent().append("<img src=\"image/Loading.gif\" class=\"load\"/>");
            },
            success:function(json){
                thisObj.parent().next().html("").append(TreeFn.AnalyJSON($.parseJSON(json),thisObj,obj).html());
                TreeFn.childShow(thisObj);
            },
            complete:function(){
               thisObj.parent().children().remove(".load"); 
            }
        });
    }
};

 前端調用js：

$(function(){
        $("#TreeView1").TreeView({
            checkbox:"block",               //是否顯示checkbox
            ajaxUrl:"Tree.aspx",            //ajax動態獲取相應父節點下面的子節點元素的地址（可以 換成需要獲取數據的url地址）
            Default:[{                      //TreeView首次加載時默認頂級節點名稱
                name:"測試跟節點1",         //名稱
                url:"http://www.cnblogs.com/Suven/",    //節點上的url
                ajaxData:"1"                            //獲取下面子元素的唯一標識
                },{
                name:"測試跟節點2",
                url:"http://www.baidu.com/",
                ajaxData:"0"
            }]
        });    
    });

 下面再給出服務器端返回的json數據格式：

{
        "Test1":
            {
                "name":"測試子節點欄目1",   //節點名稱
                "url":"http://test1",       //節點url
                "id":"1",                   //節點id，也用於獲取下一子節點數據的id
                "hasChild":"0",             //是否存在子節點
                "last":"1"                  //是否是子節點中最后一個元素，如果不是，也可不寫          
            },
        "Test2":
            {"name":"測試子節點欄目2","url":"http://test2","id":"2","hasChild":"1"},
        "Test3":
            {"name":"測試子節點欄目3","url":"http://test3","id":"3","hasChild":"1","last":"1"}
    }

 好了，到此代碼貼完。希望有需要的朋友拿去改造。有什么問題，請批評指正。