ztree 简单使用

1.引入css js

 <link rel="stylesheet" href="../css/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.ztree.core-3.5.js"></script>

<script type="text/javascript" src="../js/jquery.ztree.excheck-3.5.min.js"></script>

2. html 页面

    <div οnclick="selecting()"> This is my HTML page. demo1</div>

    <div οnclick="firsttree()">This is my JSP page. zTree</div>
    <div id="tree" class="ztree">
   

    </div>

3.js 内容

    var zTreeObj;

    var zNodes =[
      {id:1, pId:0, name:"[core]sdf", open:true},
      {id:101, pId:1, name:"最简单的树 --  标准 JSON 数据"},
     
      {id:2, pId:0, name:"[excheck] 复/单选框功能 演示"},
      {id:201, pId:2, name:"Checkbox 勾选操作"},
     


      {id:3, pId:0, name:"[exedit] 编辑功能 演示", open:false},
      {id:301, pId:3, name:"拖拽 节点 基本控制"}
      ];

    var setting ={
check:{
enable:true
},
data:{
simpleData:{
enable:true
}
}

};

function firsttree(){
$.ajax({
url:"../newTree/getTreeData",
type: "get",
dataType:"text",
// success:initTree
success:function(data){
console.log(data);  
// var zz = eval(data);
if(data !="" && data != null && data !="null"){
var zz = eval("("+data+")");
zTreeObj =$.fn.zTree.init($("#tree"),setting,zz);
// zTreeObj.expandAll(true);
}
},
});

};

function selecting(){
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getCheckedNodes();
console.log(nodes);
alert("length"+nodes.length);
for(var i= 0; i<nodes.length ;i++){
alert("nodes--------"+nodes[i].name+"===");
}

}

4.注意：tree 的data 格式 json[{},{},{}]

返回json 字符串 {id:"",pId:"",name:"",checked:"true|false"}