zTree使用

html内容：

<script src="/static/Bootstrap/js/jquery/ztree/jquery.ztree.core.js"></script>
    <script src="/static/Bootstrap/js/jquery/ztree/jquery.ztree.excheck.js"></script>

<div  class="zTreeDemoBackground left">  
            <ul id="tree" class="ztree">  
            </ul>  
</div>  

 

zTree.js内容：

//从后台接收zTree json格式数据，通过ajax加载到前台，默认展开根节点
$(document).ready(function(){

  //加载并初始化Ztree
  zTree_init();

  //提交数据到后台
  $("#click").click(function(){ 
           var treeObj=$.fn.zTree.getZTreeObj("tree");
           var check = treeObj.getCheckedNodes(true);
           var files = new Array();
          $.each(check,function(index,value){
            if (value.type == "file"){
              files.push(value.filepath);
            }
            //alert("ID:"+value.type+"   NAME:"+value.name+"   URL:"+value.filepath);
          });
           alert(files);
         });


});


////////////////////Custome functions:
  var setting = {  
            check: {  
                enable: true,  
                nocheckInherit: false  
            },  
            data: {  
                simpleData: {  
                    enable: false  //不使用简单类型数据
                }  
            }//,
          //   async: {
          //   enable: true,
          //   type:"post",
          //   //dataType: "text",
          //   url: "http://10.160.25.48/sinfors/deploy_ztreedata"//,
          //   //autoParam: ["id", "name"]
          // }
        };  

  //ztree用于初始化的静态数据          
  // var zNodes = [  
  // //{"nocheck": true, "name": "BACKUP", "children": [{"nocheck": true, "name": "hr-201.9-dbbackup", "children": [{"nocheck": true, "name": "uxinhr.bak"}, {"nocheck": true, "name": "zknet10.bak"}]}, {"nocheck": true, "name": "rsyncd - 副本.rar"}, {"nocheck": true, "name": "部署系统-websites-20160113.rar"}]}
  // //{"nocheck": true, "type": "directory", "name": "BACKUP", "children": [{"nocheck": true, "type": "directory", "name": "hr-201.9-dbbackup", "children": [{"nocheck": true, "type": "file", "name": "uxinhr.bak"}, {"nocheck": true, "type": "file", "name": "zknet10.bak"}]}, {"nocheck": true, "type": "file", "name": "rsyncd - 副本.rar"}, {"nocheck": true, "type": "file", "name": "部署系统-websites-20160113.rar"}]}
  // {"nocheck": true, "type": "directory", "name": "BACKUP", "children": [{"nocheck": true, "type": "directory", "name": "hr-201.9-dbbackup", "children": [{"nocheck": true, "type": "file", "name": "uxinhr.bak", "filepath": "E:\\BACKUP\\hr-201.9-dbbackup\\uxinhr.bak"}, {"nocheck": true, "type": "file", "name": "zknet10.bak", "filepath": "E:\\BACKUP\\hr-201.9-dbbackup\\zknet10.bak"}]}, {"nocheck": true, "type": "file", "name": "rsyncd - 副本.rar", "filepath": "E:\\BACKUP\\rsyncd - 副本.rar"}, {"nocheck": true, "type": "file", "name": "部署系统-websites-20160113.rar", "filepath": "E:\\BACKUP\\部署系 统-websites-20160113.rar"}]}
  //     // { id: 1, pId: 0, name: "随意勾选 1", nocheck: true },  
  //     // { id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },  
  //     // { id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },  
  //     // { id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },  
  //     // { id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },  
  //     // { id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
  // ];  
        
  ///过滤节点的机制 直接return node表示不做任何过滤  
  function filter(node) {  
      return node;  
  }  
  
  ///动态设置zTree的所有节点有checkbox  
  function DynamicUpdateNodeCheck() {  
      var zTree = $.fn.zTree.getZTreeObj("tree");  
      //根据过滤机制获得zTree的所有节点              
      var nodes = zTree.getNodesByFilter(filter);  
      //遍历每一个节点然后动态更新nocheck属性值  
      for (var i = 0; i < nodes.length; i++) {  
          var node = nodes[i];  
          node.nocheck = false; //表示显示checkbox  
          zTree.updateNode(node);  
      }  
  }  

  ///从后台通过ajax加载ztree数据，并初始化zTree
  function zTree_init(){
    //alert(111);
    $.ajax({
        type: 'POST',
        url: 'http://10.160.25.48/sinfors/deploy_ztreedata/', //该页面返回ztree所需的json格式数据
        // data:{},
        dataType:'json',
        success:function(response,stutas,xhr){
          var zNodes = new Array();
          zNodes.push(response);
          ///页面加载后初始化zTree数据且默认不展开所有节点 
          //$.fn.zTree.init($("#tree"), setting, zNodes).expandAll(false);  
          $.fn.zTree.init($("#tree"), setting, zNodes); //页面加载后初始化zTree数据
          var treeObj = $.fn.zTree.getZTreeObj("tree");  //选中zTree对象
          var nodes = treeObj.getNodesByParam("ancestor", true, null); //根据节点属性选择到根节点
          if (nodes.length=1) {
              treeObj.expandNode(nodes[0], true, false, true); //自动展开根节点（第一个true），子节点不展开（第二个false）
            }
          ///加载checkbox
          DynamicUpdateNodeCheck();

        },
        error:function(xhr,errorText,errorStatus){
          alert(xhr.status+' error: '+xhr.statusText);
        },
        timeout:5000
    });
  }

页面内容（deploy_ztreedata）：

def deploy_ztreedata(request):
    # print request.method
    # print request.POST
    def path_to_ztreedata(path):
        d = {'name': os.path.basename(path).decode('gbk').encode('u8')}
        if os.path.isdir(path):
            d['type'] = "directory"
            d['isParent'] = True #初始化节点数据时，根据 treeNode.children 属性判断，有子节点则设置为 true，否则为 false。否则空文件夹会显示为文件图标
            d['children'] = [path_to_ztreedata(os.path.join(path,x)) for x in os.listdir(path)]
        else:
            d['type'] = "file"
            d['filepath'] = path.decode('gbk').encode('u8')
            d['isParent'] = False
        d['nocheck'] = True
        return d

    path = 'D:\\Root'
    ztreedata_dic = path_to_ztreedata(path)
    ztreedata_dic['ancestor'] = True
    ztreedataj = json.dumps(ztreedata_dic,ensure_ascii=False)

    return HttpResponse(ztreedataj)