zTree的简单使用,示例是基于bootstrap的
需要的数据格式如下,后台传输的时候封装一个VO,格式如下 传值的传个List 泛型内的类型就是VO
ServiceImpl实现
@Override
public List<TreeVO> getTree() {
//1.查询到所有的
List<Product> list1=productMapper.findAll();
//2.新增一个list
ArrayList<TreeVO> listTreeVO = new ArrayList<>();
for (Product p1:list1) {
TreeVO tree=new TreeVO();
tree.setId(p1.getId());
tree.setName(p1.getName());
tree.setPid(p1.getPid());
if(p1.getId().startsWith("2")){//id为2开始的都是三级节点 没有子节点了 treeVoparent属性改为false 生产中如何根据业务来
tree.setParent(false);
}
listTreeVO.add(tree);
}
logger.info("查询成功!");
//根节点 id为-1
/* if(1==1){
logger.error("测试@Controlleradvice用!!!");
throw new RuntimeException("获取数据失败,你气不气?!");
} */
return listTreeVO;
}
Setting设置
var setting = {
view: {
selectedMulti: true
},
check: {
enable: true,
},
data: {
simpleData: { //具体后台传什么格式的数据就看这里是如何定义的了
enable: true,//是否采用简单数据模式
idKey: "id",//树节点ID名称
pIdKey: "pid",//父节点ID名称
rootPId: -1,//根节点ID
}
}
};
$(function () {
//加载后端构建的ZTree树（节点的数据格式已在后端格式化好了）
$.ajax({
url: 'url',
type: 'get',
dataType: "json",
success: function(data) {
console.log(data.data);
$.fn.zTree.init($("#tree"), setting, data.data);//渲染节点时，添加同步获取的数据,第一个参数表单内的dom
}, //元素,第二个加载配置,第三个需要展现为节点的数据
error: (data) => {
alert(data.msg);
}
});
});