Ztree使用教程

<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">

<script src="js/jquery.min.js"></script>

<script src="js/jquery.ztree.core.js"></script>

<script src="js/jquery.ztree.excheck.js"></script>

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

var zNodes = [

{ id:1, pId:0, name:"父节点1", open:true },

{ id:11, pId:1, name:"子节点1" },

{ id:12, pId:1, name:"子节点2" }

];

var setting = {};

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

var setting = {

async: {

enable: true,

url: "/getTreeNodes",

autoParam:["id"]

}

};

var setting = {

check: {

enable: true,   // 开启复选框

chkboxType: { "Y": "ps", "N": "ps" } // 勾选/取消对子节点影响

}

};

var setting = {

callback: {

onClick: function(event, treeId, treeNode){

alert("点击了：" + treeNode.name);

}

}

};

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

// 增加节点

var parentNode = zTree.getNodeByParam("id",1,null);

zTree.addNodes(parentNode, {id:13, pId:1, name:"新增子节点"});

// 删除节点

var node = zTree.getNodeByParam("id",12,null);

zTree.removeNode(node);

// 修改节点

node.name = "修改后的名称";

zTree.updateNode(node);

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

var nodes = treeObj.getCheckedNodes(true); // 返回选中的节点数组

nodes.forEach(function(n){

console.log(n.id, n.name);

});

[

{"id":1,"pId":0,"name":"父节点1","isParent":true},

{"id":2,"pId":1,"name":"子节点1"}

]

var setting = {

async: {

enable: true,

url: "/getTreeNodes",

autoParam:["id"],

dataType:"json"

}

};