2. 程式人生 > >201. ztree 的簡單使用

201. ztree 的簡單使用

阿新 • • 發佈：2018-12-06

1. 效果

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

2.1 引入ztree環境

2.2  使用

使用ajax 拿到json格式資料  然後生成樹形選單

<%@ 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);//彈出城市名字
                            
                            }
                       //
        
            });

            
        </script>
        
</head>
<body>
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</body>
</html>

3. demo （互動後臺）

3.1 效果

3.2  過程

3.2.1  前端 傳送ajax 請求

3.2.2 後臺

3.2.2.1 action 層

3.2.2.2 service層

3.2.2.3 mapper

3.2.2.4 資料庫

3.2.3 附件（原始碼+資料庫）

碼雲上的：

 https://gitee.com/Luck_Me/ztree_demo

百度雲：

    連結：https://pan.baidu.com/s/1SoISHBcXsSiFarySAAQa1g 
提取碼：aya6 

 

相關推薦

201. ztree 的簡單使用

1. 效果 2. ztree的Demo  （不互動後臺） 2.1 引入ztree環境 2.2  使用 使用ajax 拿到json格式資料  然後生成樹形選單 <%@ page language="java" content

ztree簡單用法

初始化資料 var settingCatalog = { //通過ajax進行資料載入 async: { enable: true, contentType: "application/json", url: "", autoParam: ["id","

zTree簡單使用（非同步載入）

最近使用zTree進行目錄的展示，使用了基本的用法，做下記錄 可以直接去zTree的官網上進行檢視相關的使用說明，不過第一次沒太明白，多看幾篇介紹基本就可以解決了 http://www.treejs.cn/v3/main.php zTree的官網 API點

ztree簡單使用

ztree是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。  zTree 是開源免費的軟體。 1.首先，使用ztree需要引入兩個檔案： zTreeStyle.css以及jquery.ztree.

ztree簡單的使用

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">jsp頁面</span> <!DOCTYPE HTML

zTree 簡單使用

zTree簡單來說是一款處理樹形結構的前端控制元件，下面總結一下它的簡單使用。 1，下載相關檔案。 從官網上，或者下面地址 https://github.com/zTree/zTree_v3即可下載。解壓後有如下圖所示的檔案： 頁面中主要會用到css和js兩個資料夾。 2

jsp頁面zTree的簡單應用

3.2 pen control ans note isn getproto xmlns ztree 1. jsp頁面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

樹結構資料的展示和編輯-zTree樹外掛的簡單使用

最近在專案當中遇到一個需求，需要以樹結構的方式展示一些資料，並可對每一個樹節點做內容的編輯以及樹節點的新增和刪除，剛好聽說有zTree這個外掛可以實現這樣的需求，所以在專案的這個需求完成之後，在部落格裡用一個小demo的形式記錄一下zTree的簡單實用方法。 1、下載zTree外掛 zTree的官網地址是

zTree的簡單配置，列印載入的資料

$(function() { var curMenu = null, zTree_Menu = null; // 樹形許可權列表 var setting = { data : { simpleData : { enable : true, } }, async

簡單zTree的使用步驟（五步曲）

 匯入zTree的配置檔案<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script> <link rel="stylesheet" hre

Java簡單ztree樹

　　廢話不多說了,直接上程式碼 　　這是型別表 　這是查詢語句 select * from zfzb_equiptype where PARENT_ID=? 　　這是遞迴呼叫 /** * 顯示型別ztree列表(遞迴處理) * @param ID *

zTree樹的簡單使用

zTree是一個依靠 jQuery 實現的多功能的樹外掛 官網:http://www.treejs.cn/v3/api.php 簡單使用: 1.引入css和js <link rel="stylesheet" href="${ctx}/staticfile/c

ztree中簡單格式的資料json格式ID編號定義問題

問題描述：         當某一目錄下檔案（夾）個數多於10個時，示例方法不能正確給出目錄樹結構 官方示例： var nodes = [ {id:1, pId:0, name: "父節點1"}, {id:11, pId:1, name: "子節點1"}, {

leetcode簡單(201-220)python

852. Peak Index in a Mountain Array(e-201) Let's call an array A a mountain if the following properties hold: A.length >= 3 There ex

zTree的簡單使用

自己以前從別人的部落格中學到了不少東西，所以也想寫點東西，畢竟是菜鳥一隻，如果有什麼錯誤還請指正，廢話少說直接上程式碼， 最後的效果是這樣的，首先去官網下載zTree的js和css檔案，給個網站http://www.treejs.cn/v3/api.php我覺得ztre

zTree樹的簡單應用

zTree 是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。 由於剛使用沒多久，並沒有很深入的瞭解zTree，這裡只記錄一下

jQuery-zTree樹外掛 簡單使用及例項

HTML首先我們先放置一個樹ul列表<ul id="treeDemo" class="ztree"></ul>演示一：最簡單的樹 -- 簡單 JSON 資料var setting = {      data: {          simpleData

Ztree 的簡單使用

1、引入js和css <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/tree/zTreeStyle.css"/> &

使用zTree製作簡單非同步載入樹形結構,支援增刪改拖動

ztree版本 v3.5.34,資料互動格式為json.ztreeAPI : 點選開啟連結<!DOCTYPE html> <HTML> <HEAD> <TITLE>ztree test</TITLE>

下拉樹(ztree)的簡單使用

資料庫的表結構和資料 效果圖 使用json格式需使用的jar下載： http://download.csdn.NET/detail/a1611756193/9850603 使用到的js與css下載： http://download.csdn.net/detail/a1