學(xué)習(xí)完整課程請(qǐng)移步 互聯(lián)網(wǎng) Java 全棧工程師

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

本教程是為了配合項(xiàng)目實(shí)戰(zhàn) 的簡易教程，主要實(shí)現(xiàn)了 異步加載 樹形結(jié)構(gòu)數(shù)據(jù)的功能，具體用法請(qǐng)參考官方文檔。

頁面引用

CSS 部分

<link rel="stylesheet" href="/static/assets/plugins/jquery-ztree/css/zTreeStyle/zTreeStyle.min.css" />

JS 部分

<script src="/static/assets/plugins/jquery-ztree/js/jquery.ztree.core-3.5.min.js"></script>

使用方法

開啟 zTree 異步加載數(shù)據(jù)的功能，案例代碼如下：

var setting = {
    view: {
        // 禁止多選
        selectedMulti: false
    },
    async: {
        // 開啟異步加載功能
        enable: true,
        // 遠(yuǎn)程訪問地址
        url: "/content/category/tree/data",
        // 選擇父節(jié)點(diǎn)時(shí)會(huì)自動(dòng)將節(jié)點(diǎn)中的參數(shù)傳回服務(wù)器再重新取結(jié)果
        autoParam: ["id"]
    }
};

// 初始化 zTree 控件
$.fn.zTree.init($("#myTree"), setting);
// 綁定事件
$("#btnModalOk").bind("click", function () {
    // 獲取 zTree 控件
    var zTree = $.fn.zTree.getZTreeObj("myTree");
    // 獲取已選中的節(jié)點(diǎn)
    var nodes = zTree.getSelectedNodes();
    if (nodes.length == 0) {
        alert("請(qǐng)先選擇一個(gè)父節(jié)點(diǎn)");
    }

    else {
        var node = nodes[0];
        alert(node.id);
    }
});

HTML 結(jié)構(gòu)代碼

<ul id="myTree" class="ztree"></ul>

服務(wù)器關(guān)鍵代碼

此為 Controller 關(guān)鍵代碼，其余部分可參考 【視頻教程】 完成

@ResponseBody
@RequestMapping(value = "tree/data", method = RequestMethod.POST)
public List<TbContentCategory> treeData(String id) {
    if (id == null) {
        id = "0";
    }
    List<TbContentCategory> tbContentCategories = tbContentCategoryService.selectByPid(Long.parseLong(id));
    return tbContentCategories;
}

演示效果