使用JQuery-zTree生成樹結構

最近想做一個樹結構，都說zTree挺好的，就試着搞搞吧。官方文檔：http://www.treejs.cn/v3/main.php#_zTreeInfo 看了好多例子還是懵懵的，各種調試各種效果出不來，心塞。好了接着就來個簡單的吧。使用Ajax獲取後臺JSON數據然後zTree顯示。首先你要有json包，我用的spring的Jackson，之前的文章有Jackson的配置，這裏再加一下吧，先上jar包。

<!-- jackson -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.6.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.6.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.6.3</version>
        </dependency>

SpringMVC.xml文件加上Jackson配置

    <!--start:使用Jackson 2.x的配置，需要導入的jar包：jackson-core-xxx.jar、jackson-annotations-xxx.jar、jackson-databind-xxx.jar-->
<!--通過處理器映射DefaultAnnotationHandlerMapping來開啓支持@Controller註解-->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping" />
<!--通過處理器適配器AnnotationMethodHandlerAdapter來開啓支持@RequestMapping註解-->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
    <property name="messageConverters">
        <list>
            <!-- 設置返回字符串編碼 -->
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name = "supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
            <!-- json轉換器 -->
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </list>
    </property>
</bean>

都是從網上扒拉的注意Jackson的版本就好，我這裏使用的是2.x

先寫一個簡單的菜單實體類 Menu.java

package com.ys.entity;

/**
 * 菜單類
 * @author Administrator
 *
 */
public class Menu {

    private int id;//ID 
    private String name;//菜單名稱
    private int pId;//上級菜單編號
    private String menu_action;//菜單動作

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getpId() {
        return pId;
    }
    public void setpId(int pId) {
        this.pId = pId;
    }
    public String getMenu_action() {
        return menu_action;
    }
    public void setMenu_action(String menu_action) {
        this.menu_action = menu_action;
    }
}

這個實體類改了好多次，使用Oracle各種水土不服，實體類的字段必須要有id、pId、name，之前查詢用別名不好使，只能去數據庫改字段了，MySQL好像沒有這個問題。

MenuMapper.java

package com.ys.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import com.ys.entity.Menu;


/**
 * 菜單類接口方法
 * @author Administrator
 *
 */
@Repository
public interface MenuMapper {

    //獲取菜單信息
    @Select("select * from t_menu")
    List<Menu> getAll();

    //修改菜單名稱
    @Update("update t_menu set name=#{name} where id=#{id}")
    int updateMenu(@Param("id")int id,@Param("name")String name);

    //刪除菜單
    @Delete("delete from t_menu where id=#{id}")
    int deleteMenu(@Param("id")int id);
}

簡單的一個查詢就好了。

MenuService.java

package com.ys.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ys.entity.Menu;
import com.ys.mapper.MenuMapper;

@Service
public class MenuService{

    @Autowired
    private MenuMapper menudao;

    /**
     * 獲取所有菜單列表
     * @return
     */
    public List<Menu> getAll() {
        return menudao.getAll();
    }

    /**
     * 修改菜單信息
     * @param id
     * @param name
     * @return
     */
    public int updateMenu(int id,String name){
        return menudao.updateMenu(id,name);
    }

        /**
     * 刪除菜單
     * @param id
     * @return
     */
    public int deleteMenu(int id){
        return menudao.deleteMenu(id);
    }
}

MenuController.java

package com.ys.controller;

import java.util.List;

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.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ys.entity.Menu;
import com.ys.service.MenuService;



@Controller
public class MenuController {

    @Autowired
    private MenuService menuservice;

    /**
     * 查詢menu所有信息返回JSON傳到前臺ajax
     * document.write(JSON.stringify(data));可以輸出JSON數據
     * @ResponseBody SpringMVC註解 需要配置SpringMVC.xml文件
     * @return
     */
    @RequestMapping(value="menudata",method=RequestMethod.POST)
    @ResponseBody
    public List<Menu> getMenuData(){
        //查詢信息返回JSON
        List<Menu> menulist=menuservice.getAll();
        return menulist;
    }
    /**
    *修改樹節點
    */
    @RequestMapping(value="updateMenu",method=RequestMethod.POST)
    @ResponseBody
    public void updateMenu(int id,String name,HttpServletRequest request,HttpServletResponse response){
        int result=menuservice.updateMenu(id,name);
        if(result>0){
            System.out.println("修改節點成功！");
            System.out.println("節點名稱="+name);
        }else{
            System.out.println("修改節點失敗！");
        }
    }

    @RequestMapping(value="deleteMenu",method=RequestMethod.POST)
    @ResponseBody
    public void deleteMenu(int id,HttpServletRequest request,HttpServletResponse response){
        int result=menuservice.deleteMenu(id);
        if(result>0){
            System.out.println("刪除節點成功!");
        }else{
            System.out.println("刪除節點失敗!");
        }
    }
}

使用Ajax交互數據的時候，Controller方法上@RequestMapping（）最好加上method=RequestMethod.POST 用GET/POST還是別的就隨你了。

另外@ResponseBody是一定要加的用於json的轉換。

zTreeMenu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"></c:set>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!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>OA-zTree樹狀數據示例</title>
<!-- 導入jQuery zTree依賴於jQuery -->
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-2.1.1.min.js"></script>
<!-- zTree的核心庫 -->
<script type="text/javascript" src="${ctxStatic}/zTree/js/jquery.ztree.core.min.js"></script>
<!-- zTree的複選框 -->
<script type="text/javascript" src="${ctxStatic}/zTree/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/zTree/js/jquery.ztree.exedit.min.js"></script>
<!-- zTree的樣式 -->
<link type="text/css" rel="stylesheet" href="${ctxStatic}/zTree/css/metroStyle/metroStyle.css"/>

<script type="text/javascript">
 var zTreeObj;
//樹屬性的定義  
var setting = {  
    //頁面上的顯示效果  
    view: { 
        addHoverDom: addHoverDom,//鼠標懸停顯示按鈕
        removeHoverDom: removeHoverDom,//鼠標移開操作  
        selectedMulti: false
    }, 
    check : {  
        enable : true //複選框  
    }, 
    edit: {  
        enable: true, 
        editNameSelectAll: true, //修改選中 
        showRemoveBtn: true,  //顯示按鈕
        showRenameBtn: true  
    },  
    data: {  
        simpleData: {  
            enable:true,  
            idKey: "id",  //這個 id、pId最好這麼寫 不然字段對不上沒有數據
            pIdKey: "pId",  
        }  
    },  
    callback: { 
        beforeDrag: beforeDrag,
        beforeEditName: beforeEditName,
        beforeRemove: beforeRemove,
        beforeRename: beforeRename,
        onRemove: onRemove,//移除操作  
        onRename: onRename//修改操作
    } 
};
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
    return false;
}



/*  -----------修改方法---------------------*/
  /* 修改前彈框  */
 function beforeEditName(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("ztreeDemo");
            zTree.selectNode(treeNode);
            setTimeout(function() {
                if (confirm("進入節點 -- " " + treeNode.name + " " 的編輯狀態嗎？")) {
                    setTimeout(function(){
                        zTree.editName(treeNode);
                    }, 0);
                }
            }, 0);
            return false;
        };
 function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "":"dark");
        showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
        if (newName.length == 0) {
            setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("ztreeDemo");
                zTree.cancelEditName();
                alert("節點名稱不能爲空.");
            }, 0);
            return false;
        }
        return true;
    };
    function onRename(e, treeId, treeNode) {
         $.ajax({
            type: 'post',
            url: '${ctx}/updateMenu',
            data: {id:treeNode.id, name:treeNode.name},
            dataType: 'json',
            success: function(data){
                     },
            error:function(data){
            }
        });
    };

/* -----------------刪除方法---------------------- */       

    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("ztreeDemo");
        zTree.selectNode(treeNode);
        //刪除前先進行判斷此節點是否存在子節點  若存在子節點不可刪除 
        var ztree=$.fn.zTree.getZTreeObj(treeId);
        nodes=ztree.getSelectedNodes();
        var node=nodes[0];
        if(node.isParent){
            alert('父節點下存在子節點數據，不能刪除!!!');
            return false;
        }else{
            return confirm("確認刪除 節點 -- "" + treeNode.name + "" 嗎？");
        }
    };
    //刪除操作 
    function onRemove(e, treeId, treeNode) {
        //showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        $.ajax({
            type:'post',
            url:'${ctx}/deleteMenu',
            data:{id:treeNode.id},
            dataType:'json',
            success:function(data){
            },
        });
    };


        function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isFirstNode;
        }
        function showRenameBtn(treeId, treeNode) {
            return !treeNode.isLastNode;
        }
        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class='"+className+"'>"+str+"</li>");
            if(log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        }
        function getTime() {
            var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
            return (h+":"+m+":"+s+ " " +ms);
        }


        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
        function selectAll() {
            var zTree = $.fn.zTree.getZTreeObj("ztreeDemo");
            zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#ztreeDemo"), setting, zNodes);
            $("#selectAll").bind("click", selectAll);
        });


//獲取後臺數據 加載zTree樹
var zNodes;

$.ajax({
    async:false,
    cache:false,
    type:'post',
    dataType:'json',
    url:'${ctx}/menudata',
    success:function(data){
        //document.write(JSON.stringify(data));
        zNodes=data;
    }
});

$(function() {  
    $.fn.zTree.init($("#ztreeDemo"), setting, zNodes);  
});


</script>


</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="ztreeDemo" class="ztree"></ul>
</div>
</body>
</html>

看看效果吧。

就只寫修改刪除吧，添加的有點小問題就沒有寫。官方文檔裏邊都有的，試着改改就行了。

如果這個樣式不喜歡的話，就修改上邊zTree的CSS。zTree的包裏有好幾個，也可以修改文件。

· Coisini

發佈了41 篇原創文章 · 獲贊 33 · 訪問量 8萬+

私信關注

使用JQuery-zTree生成樹結構

SpringMVC.xml文件加上Jackson配置

都是從網上扒拉的注意Jackson的版本就好，我這裏使用的是2.x

先寫一個簡單的菜單實體類 Menu.java

這個實體類改了好多次，使用Oracle各種水土不服，實體類的字段必須要有id、pId、name，之前查詢用別名不好使，只能去數據庫改字段了，MySQL好像沒有這個問題。

MenuMapper.java

簡單的一個查詢就好了。

MenuService.java

MenuController.java

使用Ajax交互數據的時候，Controller方法上@RequestMapping（）最好加上method=RequestMethod.POST 用GET/POST還是別的就隨你了。

另外@ResponseBody是一定要加的用於json的轉換。

zTreeMenu.jsp

就只寫修改刪除吧，添加的有點小問題就沒有寫。官方文檔裏邊都有的，試着改改就行了。

如果這個樣式不喜歡的話，就修改上邊zTree的CSS。zTree的包裏有好幾個，也可以修改文件。

985 碩士程序員，空窗 4 個月沒有 Offer！

營銷系統黑名單優化：位圖的應用解析

一文搞懂 Spring 循環依賴

我真的從測試轉成了開發......

nginx添加相應配置，通過瀏覽器訪問或curl時返回客戶端對應公網IP

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

python內置函數——sorted

[oeasy]python020在遊戲中體驗數值自由_勇闖地下城_終端文字遊戲

爲何我建議你學會抄代碼

抖音面試：說說延遲任務的調度算法？

使用SSM+ajax+echarts製作報表圖

layerUI+Ajax打開頁面執行操作後關閉問題

Oracle存放時間問題

使用BootStrap Table編寫響應式表格

vue + elementUI + Flask配置

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

使用JQuery-zTree生成樹結構

SpringMVC.xml文件加上Jackson配置

都是從網上扒拉的 注意Jackson的版本就好，我這裏使用的是2.x

先寫一個簡單的菜單實體類 Menu.java

這個實體類改了好多次，使用Oracle各種水土不服， 實體類的字段必須要有id、pId、name， 之前查詢用別名不好使，只能去數據庫改字段了，MySQL好像沒有這個問題。

MenuMapper.java

簡單的一個查詢就好了。

MenuService.java

MenuController.java

使用Ajax交互數據的時候，Controller方法上@RequestMapping（）最好加上method=RequestMethod.POST 用GET/POST還是別的就隨你了。

另外@ResponseBody是一定要加的 用於json的轉換。

zTreeMenu.jsp

就只寫修改刪除吧 ，添加的有點小問題就沒有寫。 官方文檔裏邊都有的，試着改改就行了。

如果這個樣式不喜歡的話，就修改上邊zTree的CSS。zTree的包裏有好幾個，也可以修改文件。

都是從網上扒拉的注意Jackson的版本就好，我這裏使用的是2.x

這個實體類改了好多次，使用Oracle各種水土不服，實體類的字段必須要有id、pId、name，之前查詢用別名不好使，只能去數據庫改字段了，MySQL好像沒有這個問題。

另外@ResponseBody是一定要加的用於json的轉換。

就只寫修改刪除吧，添加的有點小問題就沒有寫。官方文檔裏邊都有的，試着改改就行了。