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).

猛点这里,有惊喜