Ztree 常用

Ztree 支持中文API 实在太easy 了, 有了API 就是查询速度问题,记下一些方法

1.初始化树, 选中并展开根节点
var ztree;
function initDeptTree() {
	var setting = {
		async: {
			enable: true,
			url: "deptTreeQuery.action",
			autoParam:["deptId=deptId"],
			dataType: "json"
		},
		data: {
			key: {
				name: "deptName"
			},
			simpleData: {
				enable: false,
				idKey: "deptId",
				pIdKey: "parentId"
			}
		},
		callback: {
			onClick: selectedTree,
			onRightClick: rightClick,
			onAsyncSuccess: asyncSuccess
			//onExpand: zTreeOnExpand
		},
		view: {
			selectedMulti: false
		}
	};
	$.fn.zTree.init($("#deptTree"), setting);
	ztree = $.fn.zTree.getZTreeObj("deptTree");
}


function asyncSuccess(event, treeId, treeNode, msg) {
	if(treeNode == null) {//root
		 var rootNode = ztree.getNodes()[0];
		 ztree.selectNode(rootNode);
		 ztree.expandNode(rootNode, true, false, true);
	}	
}






2.Ztree 最简单的方式一次加载所有数据

数据:
[{"deptId":"2","deptName":"cc","parentId":"rootId","description":"cc","pId":"rootId","isParent":true}, {"deptId":"FCF370CA-2200-0FCC-BD5E-588245FE8A17","deptName":"test23","parentId":"rootId","pId":"rootId","isParent":true}, {"deptId":"1","deptName":"test45","parentId":"rootId","pId":"rootId","isParent":true}, {"deptId":"070010F2-547B-30FE-BAC3-70F06C72C4F4","deptName":"test4","parentId":"rootId","pId":"rootId","isParent":true}]

设置:simpleData.enable = true
然后每条记录只要把parentId设置好就OK(通常数据表数据直接查回来即满足).

basicSetting.async = {};
	basicSetting.data.simpleData.enable = true;
	basicSetting.callback = {
		beforeClick : function(treeId, treeNode, clickFlag){
			return !!(treeNode.parentId); //Dont't root dept node selected when user edit.
		},
		onClick: selectedDeptTreeEditUser,
		onAsyncSuccess: function(event, treeId, treeNode, msg) {
			if(treeNode == null) {//root
				 var rootNode = deptZtree.getNodes()[0];
				 deptTreeEditUserZtree.selectNode(rootNode);
				 deptTreeEditUserZtree.expandNode(rootNode, true, false, true);
			}	
		}	
	};
	
	var zNodes = [];
	$.ajax({
		url : "deptTreeQuery.action?allQueryflag=1",
		type : 'post',
		async : false,
		cache: false,
		dataType: 'json',
		data : {
		},
		success : function(data) {
			zNodes = data;
		}
	});	
	
	$.fn.zTree.init($("#deptTreeEditUser"), basicSetting, zNodes);
	deptTreeEditUserZtree = $.fn.zTree.getZTreeObj("deptTreeEditUser");


你可能感兴趣的:(ztree)