zTree 的简单使用

一.简介

1.官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

2.API 文档

 

二.简单的API

1. 获取树的所有节点

        var treeObj =$.fn.zTree.getZTreeObj("ztree");
        var node = treeObj.getNodes();
        var nodes = treeObj.transformToArray(node);

        console.log(nodes);

2.获取选中的状态

①选中第一个节点
 	if(treeNode.isFirstNode==true){//同级节点中的第一个节点
        treeObj.selectNode(node);
     } 
	//获取 id 为 tree 的 zTree 对象
	var treeObj = $.fn.zTree.getZTreeObj("ztree");
	//获取条件完全匹配的节点数据 JSON 对象
	var node = treeObj.getNodeByParam("id", treeNode.id);
	if(treeNode.isFirstNode==true){//同级节点中的第一个节点
		treeObj.selectNode(node);
	}

②选中（你需要的节点）
 	treeObj.selectNode(nodes[i]);

③获取当前被选中的节点数据集合
	var treeObj = $.fn.zTree.getZTreeObj("tree");
	var nodes = treeObj.getSelectedNodes();

 

三.简单的操作

1.带 checkbox 的多选下拉菜单

[ 文件路径: super/select_menu_checkbox.html ]

①.数据设置
	A.初始化的标准嵌套格式的 JSON 数据对象
	var nodes = [
	{ "id":1, "name":"test1",
		children: [
		{ "id":3, "name":"test3"},
		{ "id":4, "name":"test4"},
		{ "id":5, "name":"test5"}
		]
	},
	{ "id":2, "name":"test2"  }
	]
	B.
	var zNodes =[
		{id:1, pId:0, name:"北京"},
		{id:2, pId:0, name:"天津"},
		{id:3, pId:0, name:"上海"},
		{id:6, pId:0, name:"重庆"},
		{id:4, pId:0, name:"河北省", open:true},
		{id:41, pId:4, name:"石家庄"},
		{id:42, pId:4, name:"保定"},
		{id:43, pId:4, name:"邯郸"},
		{id:44, pId:4, name:"承德"},
		{id:5, pId:0, name:"广东省", open:true},
		{id:51, pId:5, name:"广州"},
		{id:52, pId:5, name:"深圳"},
		{id:53, pId:5, name:"东莞"},
		{id:54, pId:5, name:"佛山"},
		{id:6, pId:0, name:"福建省", open:true},
		{id:61, pId:6, name:"福州"},
		{id:62, pId:6, name:"厦门"},
		{id:63, pId:6, name:"泉州"},
		{id:64, pId:6, name:"三明"}
	 ];
②.父子关联关系设置
	var setting = {
		check: {
			enable: true,
			chkboxType: {"Y":"s", "N":"s"}
		}
	};
③.取消默认双击展开父节点的功能
	var setting = {
		view: {
			dblClickExpand: false
		}
	}

④. 初始化的数据设置 默认为勾选状态 checked:true
	var nodes = [
	{ "id":1, "name":"test1", checked:true },
	{ "id":2, "name":"test2", checked:true }
	]
⑤.获取第一个根节点的勾选状态
	var treeObj = $.fn.zTree.getZTreeObj("tree");
	var checked =  treeObj.getNodes()[0].checked;

⑥.点击文字也可以CheckBox 选中 
var setting = {
			callback:{
				beforeClick: beforeClick
			}
	};
function beforeClick(treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	zTree.checkNode(treeNode, !treeNode.checked, null, true);
	return false;
}

1.pId 设置级别，没有pid 就是同级