ztree的简单使用

效果图：

在页面上引入必要的 js 和 css 文件。

    <script src="/js/ztree/jquery-1.4.4.min.js"></script>

    <script src="/js/ztree/jquery.ztree.all.min.js"></script>

    <link href="/js/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>

html 部分为：

<ul id="treeDemo" class="ztree"></ul>

js 初始化部分为：

<script type="text/javascript">
    function OnLeftClick(event, treeId, treeNode) {
        console.log(treeNode.id);
    }
	var setting = {
		callback: {
            onClick: OnLeftClick
        }async: {
			enable: true,
			url:"/dept/get",
			autoParam:["id", "name", "level"],
			otherParam:{"user":"sa"},
			dataFilter: null,
		}
	};
	
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting);
	});
</script>

这里的请求地址 是 一个 POST 请求，参数名字分别是 id，name，level，另外还有一个自定义参数 user。

接口的返回结果是一个json串。

示例：

[{"id":"1","name":"司法部","isParent":true},{"id":"1","name":"司法部","isParent":true}]

这里也贴一下后台代码：

java 版本：

class TreeItem{
	
	public String id;
	public String name;
	public Boolean isParent;
	
	public TreeItem(String id,String name,Boolean isParent) {
		this.id = id;
		this.name = name;
		this.isParent = isParent;
	}
}


@ResponseBody
@PostMapping("dept/get")
public ArrayList<TreeItem> Get(String id,String name,String level){
	
	System.out.println(id);
	System.out.println(name);
	System.out.println(level);
	
	ArrayList<TreeItem> list = new ArrayList<TreeItem>();
	
	TreeItem item = new TreeItem("1","司法部",true);
	list.add(item);
	
	item = new TreeItem("1","司法部",true);
	list.add(item);
	
	return list;
}

https://blog.csdn.net/KateCateCake/article/details/79045211