jQuery zTree

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

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

官方文檔

頁面引用

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é)點時會自動將節(jié)點中的參數(shù)傳回服務(wù)器再重新取結(jié)果
        autoParam: ["id"]
    }
};

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

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

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

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

服務(wù)器關(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;
}

效果演示

image