zoukankan      html  css  js  c++  java
  • 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)
  • 相关阅读:
    设计模式之设计原则
    把二叉树打印成多行
    快速排序的递归遍历和非递归遍历
    二叉树的非递归遍历
    约瑟夫环问题
    strcpy strcat strcmp memcpy函数的自己实现
    【解题模板】一些很基础的板子
    【笔记】取模运算的用法
    【OJ技巧】DSACPP pa-book中的一些提示
    【编程语言】Java基础进阶——面向对象部分
  • 原文地址:https://www.cnblogs.com/dreamer-fish/p/5614151.html
Copyright © 2011-2022 走看看