使用ztree生成树菜单（JAVA）

导入ztree相关依赖

[ztree官网下载](http://www.treejs.cn/v3/api.php)

**

前台使用静态数据填充ztree

**

var setting = {
			check : {
				enable : false, //true 、 false 分别表示 显示 、不显示 复选框或单选框
			},
			data : {
				simpleData : {
					enable : true, //true 、 false 分别表示使用 、不使用简单数据模式，简单模式（只需要封装成简单的list即可）
					idKey : "id",//节点数据中保存唯一标识的属性名称
					pidKey : "pId",//节点数据中保存其父节点唯一标识的属性名称
					rootPId : 0 //用于修正根节点父节点数据，即 pIdKey 指定的属性值
				}
			}

		};
		var treeNodes = [ {
			"id" : 1,
			"pId" : 0,
			"name" : "商品分类"
		}, {
			"id" : 11,
			"pId" : 1,
			"name" : "test11"
		}, {
			"id" : 12,
			"pId" : 1,
			"name" : "test12"
		}, {
			"id" : 111,
			"pId" : 11,
			"name" : "test111"
		}, {
			"id" : 112,
			"pId" : 111,
			"name" : "test111"
		} ];
		$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

java后台封装传参

这里的属性必须是这3个，不然前台没法显示数结构

	public class CommodityClass {
		// 商品分类ID
		private int id;
		// 商品分类父ID
		@TableField(value = "pId")
		private int pId;
		// 商品分类名称
		private String name;
		//省略set,get
	}

在Controller直接返回list

@RequestMapping("/selectAllCommodityClass")
	public @ResponseBody List<CommodityClass> selectAllCommodityClass(){
		List<CommodityClass> selectCommodityClass = this.commondityClassService.selectCommodityClass();
		return selectCommodityClass;
	}

方法一：

<script>
		var setting = {
			async : {
				enable : true,
				type : "post",
				url : "/selectAllCommodityClass",
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pidKey : "pId",
					rootPId : 0
				}
			}
		}; 
		$.fn.zTree.init($("#treeDemo"), setting);
</script>

方法二：

	var setting = {
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pidKey : "pId",
					rootPId : 0
				}
			}
		}; 
		
		var treeNodes;
		$(document).ready(function() {
			$.ajax({
				url : "/selectAllCommodityClass",
				type : "post",
				dataType : "json",
				success : function(data) {
					console.log(data);
					$.fn.zTree.init($("#treeDemo"), setting, data);
				}

			});
		});