ztree使用

首先看一下效果图

body中的代码：

<div class="pageFormContent" layoutH="90" >
                <div class="zTreeDemoBackground left">
                    <ul id="cityTree" name="test" class="ztree"></ul>
                </div>
            </div>

js中的代码：

<script type="text/javascript" language="javascript">  
/**ztree的参数配置，setting主要是设置一些tree的属性，是本地数据源，还是远程，动画效果，是否含有复选框等等**/    
var setting = {  
 check: { /**复选框**/  
  enable: false,  
  chkboxType: {"Y":"", "N":""}  
 },  
 view: {                                    
  //dblClickExpand: false,  
  expandSpeed: 200 //设置树展开的动画速度，IE6下面没效果，  
 },                            
 data: {  
     key: {
        name:"G_CLA_NAM"   //节点名称
     },
  simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的                           
   enable: true,  
   idKey: "G_CLA_ID",  //id和pid，这里不用多说了吧，树的目录级别  G_CLA_ID   G_CLA_ID
   pIdKey: "G_CLA_PID", 
   rootPId: 0   //根节点  
  }                            
 },                           
 callback: {     /**回调函数的设置，随便写了两个**/  
  beforeClick: beforeClick,                                    
  onCheck: onCheck                            
 }  
};  
function beforeClick(treeId, treeNode) { //点击菜单触发事件
     
        // $("#GOODS_CLA").val(treeNode.G_CLA_ID);
        // $("#selForm").submit();
      
} 
function onCheck(e, treeId, treeNode) {  
 alert("onCheck"); //ztree勾选时用该方法 
}       

$(document).ready(function(){//初始化ztree对象     
    $.ajax({
        type:'post',
        url:'<%=path%>/goods/goodsMenuInfo',
        data:{
        },
            dataType:'json',  
            success:function(date){
                var date1 = date.dataList;
                var zTreeDemo = $.fn.zTree.init($("#cityTree"),setting, date1);
                zTreeDemo.expandAll(true); 
            },
            error:function(){
                alert("菜单加载失败");
            }
    })
});  
</script>   

 

 ztree就弄完了