JQ ztree树状图基础使用

html 部分:
 <div class="tree-content" id="menuContent">
                                <ul class="ztree pcc-tree" id="positionTree"></ul>
                            </div>
其中要记得给ul一个css(ztree)。这样ztree基础的样式就出来了.

2 js部分

      function ztreeData() {
                    var zTreeObj;
                    var setting = {
                        check:{
                            chkStyle:"radio",
                            enable:true,
                            radioType:"all",
                            
                        },
                         data:{
                             key:{
                                 children:"nodes",
                                 name:"text",
                                
                                 
                             }
                         },
                        callback: {
                            onClick: function(e,treeId,treeNode){
                                zTreeObj.checkNode(treeNode,!treeNode.checked,true);
                            
                            
                            
                            }
                        
                        }
        
                    };
                    var zNodes =[
                   ]
                
                    $.get({
                        async: false,
                        url:ztreeUrl,
                        dataType: "json",
                        success:function(res){
                            
                            zNodes=res.data;
                            zTreeObj = $.fn.zTree.init($("#positionTree"), setting, zNodes);
                        }
                    })
                   
                  
                };

这样通过标准的数据请求就可以出来了,如果后台给的数据不是标准的数据格式(名字不一样时需要配置一下)
 例如 data:[
   {text:"北京市",nodes:{text:"朝阳区"},id:1},
   {text:"湖北省",nodes:{text:"武汉市"},id:2},
]
这样的数据格式无法拿来直接使用需要在setting里面配置一下

    function ztreeData() {
            var zTreeObj;
            var setting = {
                view:{
                    fontCss:{color:'blue'}  //设置点击样式
                },
                 data:{
                     key:{
                         children:"nodes", //设置子节点数据名称
                         name:"text",   //设置节点名称
                        
                         
                     }
                 },
                callback: {
                    onClick: zTreeOnClick,//设置点击节点事件
                
                }

            };
            var zNodes =[
           ]
        
            $.get({
                async: false,
                url: ajaxUrl.getLocationTree,
                dataType: "json",
                success:function(res){
                    
                    zNodes=res.data;
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
            })
           
          
        };