1. 编程号首页

ztreeapi_ztree vue

编程小号 • • 未分类

ztreeapi_ztree vuezTree是一个依靠jQuery实现的多功能“树插件”

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

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

1、zTree 官网下载 ztree

ztreeapi_ztree vue

ztreeapi_ztree vue

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

ztreeapi_ztree vue

2、编写相关代码

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
	</head>
	<body>
		
	</body>
</html>

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

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

或

<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />

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

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

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8" />
     <title></title>
     <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
     <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
     <!--
     其他两种css风格样式
     <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
      -->
      <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script> 
    </head>
    <body>
        <div>
           <ul id="treeDemo" class="ztree"></ul>
        </div>
        <script>
           var settingss = {
                            data: {
                              simpleData: {
                                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                                idKey: "id",  //节点数据中保存唯一标识的属性名称
                                pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称  
                                rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                                          },
                              key: {
                                name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                                   }
                                  },
                            check:{
                                enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                                nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
                                  }
                            };
					
            //数据
            var zNodes = [
               //注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到
               {menuName:"父节点1", open:true, children:[
                   {menuName:"子节点1"}, {menuName:"子节点2"}]},
               {menuName:"父节点2", open:true, children:[
                   {menuName:"子节点3"}, {menuName:"子节点4"}]}
               ];
					
            zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, zNodes); //初始化树
            zTreeObj.expandAll(true);    //true 节点全部展开、false节点收缩
       </script>
   </body>
</html>

运行效果如下图

ztreeapi_ztree vue

3、使用ajax获取数据

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

 

数据库表结构及数据如下

ztreeapi_ztree vue

后台接口代码如下

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<MenuTest> 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<String, Object> map = new HashMap<String, Object>();
		map.put("menulists", menuTestMapper.getMenuTestList());
		return map;
	}
	
}

html代码如下

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title> 
      <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
      <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
      <!--
      其他两种css风格样式
      <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
      -->
      <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
  </head>
      <body>
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <script>
            var settingss = {
                data: {
                    simpleData: {
                        enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式 
                        idKey: "id",   //节点数据中保存唯一标识的属性名称
                        pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称 
                        rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                                },
                    key: {
                        name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                         }
                       },
                check:{
                       enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                       nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
                      }
                            };
							
            $(document).ready(function(){
               $.ajax({
                    type:"get",
                    url:"http://localhost:8089/getMenuTestList",
                    async:true,
                    success:function(res){
			    		
                     zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树
                     zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
                                         }
                    });
            });			        
       </script>
   </body>
</html>

运行效果如下

ztreeapi_ztree vue

4、设置默认选中节点

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

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

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

具体看如下代码
 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title> 
      <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
      <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
      <!--
      其他两种css风格样式
      <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
      -->
      <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
  </head>
      <body>
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <script>
            var settingss = {
                data: {
                    simpleData: {
                        enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式 
                        idKey: "id",   //节点数据中保存唯一标识的属性名称
                        pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称 
                        rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                                },
                    key: {
                        name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                         }
                       },
                check:{
                       enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                       nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
                      }
                            };
							
            $(document).ready(function(){
               $.ajax({
                    type:"get",
                    url:"http://localhost:8089/getMenuTestList",
                    async:true,
                    success:function(res){
			    		
                     zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树
                     zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩

                     //设置选中节点
                     var node = zTreeObj.getNodeByParam("id", 7);
                     zTreeObj.checkNode(node, true, false); 
                         
                     var node = zTreeObj.getNodeByParam("id", 1);
                     zTreeObj.checkNode(node, true, false); 
                         
                     var node = zTreeObj.getNodeByParam("id", 4);
                     zTreeObj.checkNode(node, true, false); 
                                         }
                    });
            });			        
       </script>
   </body>
</html>

运行效果

ztreeapi_ztree vue

其他内容可参考官网API

今天的文章ztreeapi_ztree vue分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/72571.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注