树

项目要求显示一个树形的文件夹，后台给的接口是在点击的时候去请求子节点，查了网上的插件，都不符合要求，只能自己动手写一个。

1. Html代码

 <div class="form-group">
     <label class="col-sm-3 control-label">选择文件</label>
      <div class="col-sm-8" style="padding-top: 7px;margin-left: 10px;">
          <div id="fileTrees">
              <li style="cursor: pointer;">
                  <img class="path first"  src="/ajax/libs/fileImg/icon-2.png"/>
                  <img class="path_1" src="/ajax/libs/fileImg/icon-1.png" style="display: none;"/>
                  <img src='/ajax/libs/fileImg/foler-3.png'/>
                  <span class='button'> / </span>
              </li>
              <div id="parents" style="margin-left: 20px;"></div>
          </div>
      </div>
  </div>

2. JS代码

    var path;
    var tag;
    var filePaths = [{name:"/",parent:""}]; //先初始化一个路径的集合

    /*
      点击页面上根目录时触发的方法
      ajax请求这个根节点的子节点
    */
    function getFileTree() { 
        $.ajax({
            cache: true,
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: 'json',
            url: url, //请求的url
            data: JSON.stringify({
                path:path,
                action:"list"
            }),
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                var html='';
                var datas = data.result;
                if(datas.length <= 0){ //如果没有字节点那就不做任何处理
                    return;
                }
                for(var i=0; i<datas.length; i++){
                    //将数据塞进数组中
                    filePaths.push({
                        name:datas[i].name,
                        parent:path
                    });

                    if(datas[i].type == "file"){ //如果是叶子节点，不打开
                        html +=
                            "<li style='line-height: 22px;'>" +
                            "<img src='/ajax/libs/fileImg/folder-1.png' style='margin-left:20px;margin-right:5px;'/>" +
                            "<input class='selectIt "+datas[i].fileId+"' type='checkbox' style='margin-right: 5px;vertical-align: text-bottom;'/>"+
                            "<span id='"+datas[i].fileId+"' class='button'>"+datas[i].name+"</span>" +
                            "</li>";
                    }else{ //如果是文件夹（有叶子节点），可以打开
                        html +=
                            "<li style='line-height: 22px;position:relative;'>" +
                            "<img id='"+datas[i].name+"' class='folder "+datas[i].name+" "+i+"' src='/ajax/libs/fileImg/icon-2.png'/>" +
                            "<img id='f_"+datas[i].name+"' class='folder_1 "+datas[i].name+" "+i+"' style='display: none;' src='/ajax/libs/fileImg/icon-1.png'/>" +
                            "<img src='/ajax/libs/fileImg/foler-3.png' style='margin-left:5px;margin-right:5px;'/>" +
                            "<span class='button'>"+datas[i].name+"</span> " +
                            "<div id='child_"+datas[i].name+"' class='childs-"+i+"' style='margin-left: 20px;'></div>" +
                            "</li>";
                    }
                }
                if(path == "/"){ //如果是根节点，就让他的子类直接显示在下面
                    $("#parents").html(html);
                }else{ //如果不是根节点，让他的子节点显示在childs里面
                    $(".childs-"+tag).html(html);
                }

		//为文件夹的展开绑定点击事件
                $(".folder").click(function () {
                    var dir = $(this).prop("className");
                    var dirlist = [];
                    dirlist = dir.split(" ");
                    if(dirlist[1] == "first"){
                        path = "/";
                    }else{
                        tag = dirlist[2];
                        for(var x=0;x<filePaths.length;x++){
                            if(dirlist[1] == filePaths[x].name && filePaths[x].parent != "/"){
                                path = filePaths[x].parent+"/" + filePaths[x].name;
                                break;
                            }else if(dirlist[1] == filePaths[x].name && filePaths[x].parent == "/"){
                                path = filePaths[x].parent+filePaths[x].name;
                                break;
                            }
                        }
                    }
                    getFileTree();
                    var thisClass = dirlist[1];
                    $("#"+thisClass).hide();
                    $("#f_"+thisClass).show();
                });

		//为文件夹的收起绑定点击事件
                $(".folder_1").click(function () {
                    var dir = $(this).prop("className");
                    var dirlist = [];
                    dirlist = dir.split(" ");
                    var thisClass = dirlist[1];
                    $("#"+thisClass).show();
                    $("#f_"+thisClass).hide();
                    $("#child_"+thisClass).html('');
                })
            }
        })
    }


	//首次根节点点击事件
    $(".path").click(function () {
        var dir = $(this).prop("className");
        var dirlist = [];
        dirlist = dir.split(" ");
        if(dirlist[1] == "first"){
            path = "/";
        }else{
            path = dirlist[1];
        }
        getFileTree();
        $(".path_1").show();
        $(".path").hide();
    });

	//根节点的收起
    $(".path_1").click(function () {
        $(".path").show();
        $(".path_1").hide();
        $("#parents").html('');
    })

3. 后台请求返回的数据是这样的
   

4. 页面的效果