jquery树型实现

1 引入jquery包

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/zTree/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="js/zTree/jquery.ztree.excheck-3.0.js"></script>

2 引入样式文件 

<link rel="stylesheet" href="<%=path%>/styles/default/zTree/zTreeStyle.css" type="text/css"></link>

2 js代码

例如::

var orgnodes =  [ {id:1,pId:-1,name:"中国"},

{id:2,pId:1,name:"江苏"},

{id:3,pId:1,name:"浙江"},

{id:4,pId:2,name:"南京"}

    ];
 
 

/**ztree的参数配置，setting主要是设置一些tree的属性，是本地数据源，还是远程，动画效果，是否含有复选框等等**/    
var setting = {  
  check: {
  enable: true,
  chkStyle: "radio",
  radioType: "level"
  }, 
  view: {                                    
   //dblClickExpand: false,  
   expandSpeed: 300 //设置树展开的动画速度，IE6下面没效果，  
  },                            
  data: {                                    
   simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的                           
    enable: true,  
    idKey: "id",  //id和pid，这里不用多说了吧，树的目录级别  
    pIdKey: "pId",  
    rootPId: 0   //根节点  
   }                            
  },                           
  callback: {     /**回调函数的设置，随便写了两个**/  
   onCheck: zTreeOnCheck 
  }  
 };  
 function zTreeOnCheck(event, treeId, treeNode) {  
    orgObj[0] = {
id: treeNode.id,
name: treeNode.name
}
 }  
 $.fn.zTree.init($("#cityTree"),setting, orgnodes); 

 

 html代码：

 <ul id="cityTree" class="ztree"></ul>

//另外这里有个比较好的>    http://www.ztree.me/v3/demo.php#_401