导入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);
}
});
});