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就弄完了