ztree作为一种比较常见的树形实现，在实际中应用较多。前文《我的第一个ztree实现》已经对ztree的情况做了简单的介绍，其中说到，ztree的数据格式有标准json数据和简单json数据之分。

标准json数据

简单json数据

之前的例子使用的是标准json数据实现的，原理就是使用children属性来嵌套子节点，在书写的结构上一目了然。但是，在实际的应用中具有明显的局限性，要实现标准json数据，在后台数据库查询时就需要查询出相应的层级关系并组装成标准json数据。而简单json数据就不一样了，由于引入了id和pId，每个节点都有一个唯一的id，有指向父节点的pId，这样就唯一确定了一个节点，并且在数据库查询并组装成简单json数据的时候也比较方便，所以在实际的应用中使用较多。本例使用简单json数据实现ztree。

具体的引入ztree资源，在前文《我的第一个ztree实现》介绍的很清楚，在此不再详述。

引入ztree包中的js文件夹和css文件夹到项目的webroot下面

新建页面，引入使用到的ztree的js和css文件，以及jquery文件

在页面上初始化ztree容器

注意需要使用ztree提供的样式class="ztree"

之后就可以初始化ztree并加载了

<script type="text/javascript">

var setting={

data:{

simpleData:{

enable:true

}

}

};

var zNodes=[

{id:1,pId:0,name:"父节点1"},

{id:11,pId:1,name:"子节点1"},

{id:12,pId:1,name:"子节点2"},

.........

];

$(document).ready(function(){

S.fn.zTree.init($("#ztreeDemo"),setting,zNodes);

});

</script>

特别需要注意的是使用简单json数据时需要在setting中进行相应的参数配置：

至此，一个使用简单json数据的ztree就实现了，详细代码（使用jsp）：


启动tomcat，访问页面的效果：

以上即为使用简单json数据实现的ztree实例，要研究使用标准json数据实现的ztree，请参考我之前的文章《我的第一个ztree实现》。之后会有更加深入的内容，敬请期待！