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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/198764.html原文链接：https://javaforall.net
