zTree

zTree 是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。

頁面引用

CSS 部分

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

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

使用方法

開啟 zTree 非同步載入資料的功能，案例程式碼如下：

var setting = {
    view: {
        // 禁止多選
        selectedMulti: false
    },
    async: {
        // 開啟非同步載入功能
        enable: true,
        // 遠端訪問地址
        url: "/content/category/tree/data",
        // 選擇父節點時會自動將節點中的引數傳回伺服器再重新取結果
        autoParam: ["id"]
    }
};

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

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

HTML 結構程式碼

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

伺服器端關鍵程式碼

@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;
}

演示效果