JQuery zTree 插件使用，簡單教程

首先說一下，在web開發過程中會有很多的地方需要到樹形的插件，JQuery 就有樹的插件，本次簡單教程講的是zTree的使用教程。

官方下載地址:https://gitee.com/zTree/zTree_v3

第一步，HTML

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

第二步，zTree在init的時候都需要什麼參數

zTree 初始化方法，創建 zTree 必須使用此方法

$.fn.zTree.init($("#deptTree"), setting, data);


init(obj, zSetting, zNodes);

var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "deptId",   //對應參數中的主鍵id
            pIdKey: "parentId", //對應參數中的父id
            rootPId: 0  //根節點的id
        },
        key: {
            url:"nourl"
        }
    }
};

數據是請求後臺的數據，這裏展示下json數據。注意後臺返回的參數節點的名稱要使用name屬性，因爲name屬性是默認的，無果需要改動那就需要去配置了。

[{
	"deptId": 1,
	"parentId": 0,
	"name": "XX科技",
	"parentName": null,
	"orderNum": 0,
	"delFlag": 0,
	"open": null,
	"list": null
}, {
	"deptId": 2,
	"parentId": 1,
	"name": "長沙分公司",
	"parentName": "XX科技",
	"orderNum": 1,
	"delFlag": 0,
	"open": null,
	"list": null
}, {
	"deptId": 3,
	"parentId": 1,
	"name": "上海分公司",
	"parentName": "XX科技",
	"orderNum": 2,
	"delFlag": 0,
	"open": null,
	"list": null
}, {
	"deptId": 4,
	"parentId": 3,
	"name": "技術部",
	"parentName": "上海分公司",
	"orderNum": 0,
	"delFlag": 0,
	"open": null,
	"list": null
}, {
	"deptId": 5,
	"parentId": 3,
	"name": "銷售部",
	"parentName": "上海分公司",
	"orderNum": 1,
	"delFlag": 0,
	"open": null,
	"list": null
}]

第三步，jquery渲染樹

$.ajax({
    type: "get",
    url: baseURL+"sys/dept/list",
    success:function(data){
    ztree = $.fn.zTree.init($("#deptTree"), setting, data);
    var node = ztree.getNodeByParam("deptId", );
});

這樣就完成了，看下效果。