zTree简单使用

帮助文档：http://www.treejs.cn/v3/api.php

***
<link type="text/css" rel="stylesheet" href="css/ztree/zTreeStyle.css" />
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.all.js"></script>

***

function createZTreeProject(){

              var url=*;
              var type="post";
              var async=false;
              var userInfo = getUserParameter(); 
              var parm={
                      "data":null,
                      "user":JSON.stringify(userInfo)
                      }; 
              var dataProvider = getDataByAjax(url,type,async,parm);
              console.log(dataProvider);
              
              var ztree = "<ul id='tree' class='ztree' style='overflow:auto;'></ul>";
              $('#componentArea')[0].innerHTML = ztree;
              
              var zNodes = new Array();
              for( var i=0; i < dataProvider.length; i++){
                  dataAry = dataProvider[i]["data"];
                  groupName = dataProvider[i]["name"];
                  
                  for( var j=0; j < dataAry.length; j++){
                      var info = dataAry[j];
                      var ltype = {};
                      var midtype = {};
                      var stype = {};
                      var frm = {};
                      
                      ltype["id"]=info["ltype"];
                      ltype["pId"]=0;
                      ltype["name"]=info["ltype_nm"];
                      ltype["open"]=true;
                      ltype["isParent"]=true;
                      JSON.stringify(zNodes).indexOf(JSON.stringify(ltype))<0?zNodes.push(ltype):"";
                      
                      midtype["id"]=info["midtype"];
                      midtype["pId"]=info["ltype"];
                      midtype["name"]=info["midtype_nm"];
                      midtype["open"]=true;
                      midtype["isParent"]=true;
                      JSON.stringify(zNodes).indexOf(JSON.stringify(midtype))<0?zNodes.push(midtype):"";
                      
                      stype["id"]=info["stype"];
                      stype["pId"]=info["midtype"];
                      stype["name"]=info["stype_nm"];
                      stype["open"]=true;
                      stype["isParent"]=true;
                      JSON.stringify(zNodes).indexOf(JSON.stringify(stype))<0?zNodes.push(stype):"";
                      
                      frm["id"]=info["frm_cd"];
                      frm["pId"]=info["stype"];
                      frm["name"]=info["frm_nm"];
                      frm["key"]=info["frm_key"];
                      frm["open"]=false;
                      frm["isParent"]=false;
                      JSON.stringify(zNodes).indexOf(JSON.stringify(frm))<0?zNodes.push(frm):"";
                  }
              }
              
              var setting = {
                view: {
                    showIcon: showIconForTree
                },
                callback: {
                    onClick: myOnClick,
                    onDblClick: myOnDblClick
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
              function showIconForTree(treeId, treeNode) {
                return !treeNode.isParent;
            };
            function myOnClick(event, treeId, treeNode) {
                // 单击展开/关闭父节点
                if(treeNode.isParent){
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    zTree.expandNode(treeNode);
                }
              };
              function myOnDblClick(event, treeId, treeNode) {
                  // 双击打开详情
                  if(!treeNode.isParent){
                      openWin = window.open(main.htm','openWin',"top=0,left=0,width=900,height=800,location=0");
                      openWin.focus();
                  }
              };
            $.fn.zTree.init($("#tree"), setting, zNodes);
          };

function getUserParameter() {
            User= new User();
            User.id=String(document.getElementById("id").value); 
            User.name=String(document.getElementById("name").value);
            User.authority=String(document.getElementById("authority").value); 
            User.code =String(document.getElementById("code ").value);
            User.role=String(document.getElementById("role").value);
            return User;
        }

function getDataByAjax(url,type,async,parm) {
    var jsonData=null;
    $.ajax({
        url : url,
        type : type,
        data : parm,
        async : async,
        //contentType: "application/json;charset=UTF-8", 
        dataType : "json",
        success : function(result) {
            jsonData = result;
        },
        error : function(xhr) {
            alert("tip： " + xhr.status + " " + xhr.statusText);
        }
    });
    return jsonData;
};

来源：oschina

链接：https://my.oschina.net/u/4555557/blog/4321727