jQuery.treeview.js ajax 生成樹

真是你怕什么,就撞什么鬼啊. 一直沒搞過ajax樹,這不,昨天就遇到了.頁面是美工做得,樹用的就是jquery.treeview,頁面能很好的工作,到動態生成樹的時候,按照以前的老思路. ajax請求數據,拼個html貼在指定的ul里完事, 沒想到搞完后,不顯示了. 后來一看頁面,完了,美工做得那是,把html直接放在頁面上了,在頁面加載完后能讀到內容. 而我這個是在頁面加載完之后,才寫到ul里的. 后來google一下,有java的,有php的,當然也找到一個c#的,照着做了個demo,可以工作.呵呵,感謝作者,感謝搜索引擎. 都做完后,發現有點小問題,樹那里,根目錄那里他在一直轉,沒有讀取到他得子級,而且一直都展開在. 想要的是前面都折疊起來,最后一個打開. 后來在jquery.treeview.async中發現問題.下面貼出代碼,以饗咱們的兄弟姐妹們,哈哈.

頁面上很簡單, 引用一個css,3,4個js文件, 一個<ul></ul>

<ul id="tree"  class="filetree treeview">
        
    </ul>

<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery.treeview.js"></script>
<script type="text/javascript" src="Scripts/jquery.treeview.async.js"></script>
<script type="text/javascript" src="Scripts/jquery.treeview.edit.js"></script>
<script type="text/javascript">
    $(function () {
        $("#tree").treeview({
            animated: "fast",
            url: "http://localhost:7734/Somnus/json/TreeData.ashx"
            //有些需要跨域的請求,參考下TreeData_test.ashx里,那是項目中拷過來的.就是加個callback就可以了
            //http://localhost:7734/Somnus/json/TreeData.ashx?callback=?
        });
    });
</script>

后台TreeData.ashx:

  public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        HttpRequest Request = context.Request;
        HttpResponse Response = context.Response;
        string callback = string.IsNullOrEmpty(Request["callback"]) ? string.Empty : Request["callback"];
        string json = string.Empty;
        string nodeid = string.Empty; //節點類型 返回source就是第一次加載，返回其他值就是點中節點的id
        if (Request["root"] != null)
        {
            nodeid = Request["root"].ToString();
        }
        else
        {
            nodeid = "source";
        }
        //id, text為顯示內容.   expanded為這列是否展開
        string _children1 = "{\"id\":\"n1_1\",\"text\":\"1.1\",\"classes\":\"file\",\"expanded\":false,\"hasChildren\":false}";
        string _children2 = "{\"id\":\"n1_1\",\"text\":\"1.2\",\"classes\":\"file\",\"expanded\":false,\"hasChildren\":false}";
        string classes = "folder";   //節點樣式
        string hasChildren = "true";  //是否存在子節點，如果設置為false，則這個節點你點擊后不會執行后台操作
        if (nodeid == "source")   //第一次加載
        {
            classes = "folder";   
            hasChildren = "true";
            //我首先建立2個文件夾、並且存在子節點、id為n1,text為1的節點. id為somnus,text為somnus
            json = "[{\"id\":\"n1\",\"text\":\"1\",\"classes\":\"" + classes + "\",\"expanded\":false,\"hasChildren\":" + hasChildren + ",\"children\":[" + _children1 + "," + _children2 + "]}"
            + ",{\"id\":\"somnus\",\"text\":\"somnus\",\"classes\":\"" + classes + "\",\"expanded\":true,\"hasChildren\":" + hasChildren + ",\"children\":[" + _children1 + "," + _children2 + "]}]";
        }
        else
        {
            if (nodeid == "n1" )   //如果我點中了剛才建立的n1節點,我在他的里面添加一個文件夾樣式、並且存在子節點、id為n1_1,text為1.1的節點
            {
                classes = "folder";
                hasChildren = "true";
                json = "[" + _children1 + "," + _children2 + "]";
            }
            if (nodeid == "somnus")   //如果我點中了剛才建立的n1_1節點,我在他的里面添加一個文件樣式、並且不存在子節點、id為n1_1_1,text為1.1.1的節點
            {
                classes = "file";
                hasChildren = "false";
                json = "[{\"id\":\"somnus_1\",\"text\":\"somnus1.1\",\"classes\":\"" + classes + "\",\"expanded\":false,\"hasChildren\":" + hasChildren + "}]";
            }
        }
        Response.Write(string.IsNullOrEmpty(callback) ? json : string.Format("{0}({1})", callback, json));
    }

這里json是手動拼的.當然你json用的好的話,你可以通過hashtable ,List轉換成json.  手拼的JSON有時候不注意就有些問題,我記錄了一些.

1,所有屬性字段都要加"".

2,boolean類型的值, 不要加"", 並且都要是小寫(我測試過有大寫,javascript中轉換json就報錯.  error:parsererror)

 

 

 

jquery.treeview.async.js 改動部分: function createNode(parent)中

    function createNode(parent) {
        var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
        if (this.classes) {
            current.children("span").addClass(this.classes);
        }
        if (this.expanded) {
            current.addClass("open");
        }
        if (this.hasChildren || this.children && this.children.length) {
            var branch = $("<ul/>").appendTo(current);
            if(!this.expanded)//這一塊有改動
            {
             branch.attr("style","display:none");
            }
            if (this.hasChildren) {
                current.addClass("hasChildren");
                //注釋掉得是那個  加載圖片
//                createNode.call({
//                    classes: "placeholder",
//                    text: "&nbsp;",
//                    children:[]
//                }, branch);
            }
            if (this.children && this.children.length) {
                $.each(this.children, createNode, [branch])
            }
        }
    }

順便說下,還能跨域請求, 只需要請求地址加callback. example: 你的地址?callback=? . 在后台程序, 返回json的時候,帶上你的callback. 你前台是?,他會自己生成個callback名稱.callbackName(json數據)
我做得DEMO順便放上來,為了不可預知的錯誤,我把項目中用到這塊的那個后台ashx也放進來了(treedata_test.ashx).

猛點這里,有驚喜