zTree

zTree官方API

>zTree基本配置:

//ztree初始化参数设定
var sysSetting = {
	check: {
		enable: true,
		chkStyle: "radio", //默认为checkbox
		radioType:"all"
	},
	async: {
        enable:true,
        type: "post",
        url : baseJS+"/inspector/getArea.do" //ajax请求数据
    },
	data: {
		key: { 
			name: "AREANAME" //节点显示字段
		},
		simpleData : {
			enable : true,
			idKey: "ID", //节点id字段
            pIdKey: "PARENTAREAID", //父节点id字段
            rootPId: "0"			
		}
	},
	callback:{
		onAsyncSuccess:function(){ //加载数据成功回调
			sysTreeObj = $.fn.zTree.getZTreeObj("group");//获取树对象
			//自动选中
			var node=sysTreeObj.getNodeByParam("ID", areaId, null); 
			sysTreeObj.checkNode(node,true); //设置选中
			//自动展开
			sysTreeObj.expandNode(node,true,false,true);//展开单个节点
			//初始化表
			initInspectorTable();
			initUserTable();
		},
		onCheck:onCheckSys,
		onClick:onClickSys
	}
};

获取所有树节点并转化为对象数组:

//获取当前资源框的资源（并将json转换为array）
	var nodes = roleTreeObj.transformToArray(roleTreeObj.getNodes());

还是配置:

//当前资源参数
var eRoleSetting = {
		check:{
			enable: true,
			chkboxType: { "Y" : "s", "N" : "s" }
			// 勾选是否影响父级和子级:Y勾选N取消勾选;p父级s子级
			// "Y":"ps": 勾选一个节点则其所有父节点及所有子节点都被勾选
		},
		async:{
			otherParam: ["id", roleId], // 传到后台的参数
			enable:true,
			type: "post",
			url : baseJS+"/authrole/findTreeNodes.do"
		},
		data : {
			keep: {
				parent: true
			},
			key: {
				name: "resource_name"
			},
			simpleData : {
				enable : true,
				idKey: "resource_id",
				pIdKey: "resource_parent_id",
				rootPId: "0"				
			}
		},
		edit: {
			enable: true,
			showRenameBtn:false,
			showRemoveBtn:true // 显示删除按钮(需定义删除事件回调函数,见下面)
		},
		callback : {
			onAsyncSuccess:function(){
				//初始化系统资源
				var sysTree=$.fn.zTree.init($("#e_LsysResource"), sysSetting);//当前树构建完成才会执行到这里,即构建另一棵树
				//如果有数据依赖当前树,需写在回调里
			},
			onRemove:function(event, treeId, treeNode){
				onRemoveRole(treeNode); //删除事件回调函数
			},
			onCheck:function(event, treeId, treeNode){
				onCheckRole(treeId,treeNode); //勾选事件回调函数
			}
		}
	};
//初始化当前资源
$.fn.zTree.init($("#e_RroleResource"), eRoleSetting);// 执行完此句之后,即树构建完成才会执行回调函数

/**
 * 当前资源删除回调
 * @param treeNode
 */
function onRemoveRole(treeNode){
	if(flag=="add")
		var sysTreeObj = $.fn.zTree.getZTreeObj("a_LsysResource");  // 获取树对象
	else
		var sysTreeObj = $.fn.zTree.getZTreeObj("e_LsysResource");
	//获取对应节点
	var node=sysTreeObj.getNodeByParam("resource_id", treeNode.resource_id, null); // 获取节点("通过该属性查找",该属性值,是否在指定父节点下查找)
	//获取对应节点子节点
	var sysNodes = sysTreeObj.getNodesByParam("resource_parent_id", treeNode.resource_id, node);  // 指定父节点下查找
	//取消勾选
	sysTreeObj.checkNode(node,false); // 设置勾选
	for (var i = 0; i < sysNodes.length; i++) {
		//取消勾选子节点
		sysTreeObj.checkNode(sysNodes[i],false);
	}
}

/**
 * 当前资源勾选回调
 * @param treeId
 * @param treeNode
 */
function onCheckRole(treeId,treeNode){
	var roleTreeObj = $.fn.zTree.getZTreeObj(treeId); // treeId为tree本身自定义id
	roleTreeObj.removeNode(treeNode);
	//获取对应节点并取消勾选
	onRemoveRole(treeNode);
}

/**
 * 系统资源勾选回调
 */
function onCheckSys(){
	//获取当前资源tree对象
	if(flag=="add")
		var sysTreeObj = $.fn.zTree.getZTreeObj("a_LsysResource");
	else
		var sysTreeObj = $.fn.zTree.getZTreeObj("e_LsysResource");
	//获取选中的资源
	var sysNodes = sysTreeObj.getCheckedNodes(true);
	var treeNodes=[];
	//添加选中的系统资源
	for (var i = 0; i < sysNodes.length; i++) {
		var treeNode={resource_id:sysNodes[i].resource_id,
					  resource_name:sysNodes[i].resource_name,
					  resource_parent_id:sysNodes[i].resource_parent_id,
					  checked:true
		};
		treeNodes.push(treeNode);
	}
	//初始化当前资源
	if(flag=="edit")
		var roleTreeObj=$.fn.zTree.init($("#e_RroleResource"),roleSetting,treeNodes);
		//重新构建一棵树(用本地资源,即不通过ajax,roleSetting配置见下面)
		// zTree添加节点时不好控制(个人不会),通常我采用直接构建一个新树
	else 
		var roleTreeObj=$.fn.zTree.init($("#a_RroleResource"),roleSetting,treeNodes);
	roleTreeObj.expandAll(true);// 展开全部节点
}

var roleSetting = {
	check:{
		enable: true,
		chkboxType: { "Y" : "s", "N" : "s"  }
	},		
    edit: {
    	enable: true,
    	showRenameBtn: false, //不显示编辑图标
    	showRemoveBtn: true //显示删除图标
    	},
	data : {
		keep: {
			leaf:false,//保持子节点
			parent:false//保持父节点
		},
		key: {
			name: "resource_name"
		},
		simpleData : {
			enable : true,
			idKey: "resource_id",
            pIdKey: "resource_parent_id",
            rootPId: "0"
		}
	},
	callback:{
		onRemove:function(event, treeId, treeNode){
			onRemoveRole(treeNode);
		},
		onCheck:function(event, treeId, treeNode){
			onCheckRole(treeId,treeNode);			
		}
	}
};