201. ztree 的簡單使用

時間 2019-11-17

標籤 ztree 簡單使用简体版

原文原文鏈接

1. 效果

2. ztree的Demo （不交互後臺）

2.1 引入ztree環境

2.2 使用

使用ajax 拿到json格式數據而後生成樹形菜單javascript

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>ztree-入門</title>
       <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css" />
       <script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
       <script type="text/javascript" src="js/jquery.ztree.all.min.js" ></script>

       <script>
           // 參考文檔 https://blog.csdn.net/feng_zi_ye/article/details/80632671
               $(function(){
                       // ajax請求獲取json
                   var zTreeNodes="";
                   var url="./jsonData.json";
           var data="";//無參數的寫法
           $.post(url,data,function(result){
               zTreeNodes=result
                   //第一個參數爲zTree的DOM容器，第二個爲zTree設置詳情可見官網api,第三個爲zTree的節點數據
                           var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

               },"json");
                   //2. 設置setting
                  var setting={
                       check: {
                               enable: true,
                              chkStyle: "checkbox" //顯示 checkbox 選擇框，默認checkbox可選擇值radio
                               },
                           //添加回調函數
                           callback:{
                           onCheck:zTreeOnCheck
                           }
                      };
                   //3.給節點添加事件
                           function zTreeOnCheck(event, treeId, treeNode) {
                              alert(treeNode.name);//彈出城市名字

                           }
                   //

           });css