ztree 使用教程

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中，本文讲解zTree的一般应用

zTree 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo

1、zTree 官网下载 ztree

下载好后放到项目相关目录下

2、编写相关代码

引入相关js 、 css 文件，代码如下:

上述代码中的 css 还可以引入如下两种、它们分别具有不同的样式

或

本文，根据博主个人习惯引入metroStyle.css

快速实现一个简单的树，请看如下代码，相关配置说明已写在代码中

运行效果如下图

3、使用ajax获取数据

实际项目开发中，数据往往是从后台服务器获取的，而不是在前端写死的。如何实现ajax获取数据，请看如下代码

 

数据库表结构及数据如下

后台接口代码如下

mapper层

import java.util.List;
import org.apache.ibatis.annotations.Select;
import com.che.pri.bean.MenuTest;

public interface MenuTestMapper {
	
	@Select("select id as id, parent_id as parentId, menu_name as menuName from menu_test")
	List getMenuTestList();

}

controller层

import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.che.pri.mapper.MenuTestMapper;
@Controller
public class MenuTestController {
	
	@Autowired
	private MenuTestMapper menuTestMapper;

	@ResponseBody
	@RequestMapping("/getMenuTestList")
	public Object getMenuTestList() {
		Map map = new HashMap();
		map.put("menulists", menuTestMapper.getMenuTestList());
		return map;
	}
	
}

html代码如下

运行效果如下

4、设置默认选中节点

在开发中，有时我们需要默认选中一些节点。比如修改用户角色或权限时，就会有这样的需求，如何对ztree的节点进行默认选中，请看如下代码

 var node = zTreeObj.getNodeByParam("id", 7);
 zTreeObj.checkNode(node, true, false); 

通过每一条节点数据的 id 进行设置

具体看如下代码
 

运行效果

其他内容可参考官网API