`

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_ztree修改版_

    3. **font**:这部分可能包含自定义的字体图标,zTree常用图标来表示节点的状态(如展开、折叠、选中等),这些图标可能以Web字体或SVG格式存储。 4. **ztree**:这个文件夹很可能是zTree的JavaScript库本身,包括...

    JQuery zTree v2.6

    这些示例涵盖了zTree的常用功能,如基本展示、多选、异步加载、拖拽排序等,开发者可以通过查看和运行这些示例,快速掌握zTree的使用方法。 总结,JQuery zTree v2.6是一款强大且易用的树形插件,它的API文档和实例...

    zTreeAPI_v2.5

    本文将基于zTreeAPI_v2.5的官方文档,深入探讨其核心功能、参数配置以及常用方法,旨在帮助开发者更好地理解和应用zTree。 #### zTree核心函数 - **zTree(setting,[zTreeNodes])**:这是创建zTree实例的核心函数。...

    easyui+ztree后台管理系统模板

    EasyUI和ZTree是两个在Web开发中常用的前端框架,尤其在构建后台管理系统时非常受欢迎。EasyUI基于jQuery,提供了一系列的UI组件,如表格、下拉框、对话框等,使得开发者能够快速构建出美观且功能丰富的界面。而...

    ztreeDemo.rar

    分页功能是数据库查询中常用的一种优化手段,尤其在处理大量数据时,通过分页可以避免一次性加载所有数据导致的性能问题。在ztreeDemo中,IbatisNet可能被用来实现查询结果的分页展示,让用户能够逐步加载和浏览树形...

    bootstrap-select2-ztree.zip

    Bootstrap、Select2 和 ZTree 是三个在Web开发中常用的库,它们分别提供了不同的功能,而将它们整合在一起可以实现更复杂的交互式用户界面。这里我们将深入探讨这些库以及如何将它们结合来创建一个下拉框带树结构的...

    ztree树形菜单

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,...

    ztree 详细配置文档

    zTree方法详解(常用),拖拽功能,方法集成,权限功能setting配置详解

    easyUI1.4与ztree3.5结合+ztree中文帮助文档

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器,easyUI1.4与ztree3.5结合开发,ztree帮助文档对初用者很有帮助......

    zTree v2.6+API

    zTree的API是其强大功能的关键,以下是一些常用API的解释: 1. `$.fn.zTree.init`: 初始化zTree,设置基本配置项和节点数据。 2. `treeObj.reAsyncChildNodes`: 异步加载子节点数据,适用于大数据量场景。 3. `...

    ztree ztree demo 加源码

    此外,还提供了多种演示示例,涵盖了zTree的常用功能,如单选、多选、拖拽、右键菜单等,这些实例对于初学者理解和上手非常有帮助。 5. **实际应用** 在实际项目中,zTree可以用于构建用户权限管理界面,展示文件...

    bootstrap+ztree+table

    Bootstrap、ZTree 和 Table 是三个在 Web 开发中常用的组件,它们各自有着独特的作用,但也可以结合使用以创建更复杂的用户界面。在此,我们将详细探讨这三个技术及其在实际项目中的结合应用。 Bootstrap 是一个...

    ztree的api加js库

    `jQuery zTree` 以其丰富的功能和易用性,成为了开发中常用的一款树形组件。通过熟练掌握其 API 和事件机制,开发者能够轻松创建出满足需求的树形界面,提升用户体验。无论是简单还是复杂的树形结构,zTree 都能提供...

    ztree+jstree最简单htm实例

    【ztree】与【jstree】都是在Web开发中常用的JavaScript树形插件,用于在网页上展示层级结构的数据,如目录、组织结构、菜单等。这两个插件都提供了丰富的功能和高度的可定制性,使得开发者可以方便地创建交互式的...

    ztree源码以及api和demo

    以下是一些常用API: 1. **init()**:初始化zTree,接收节点数据和配置参数。 2. **setting()**:设置或获取zTree的配置项,包括数据、显示、操作、事件等方面。 3. **getTree()**:获取整个树形结构的数据对象。 4...

    zTreeAPI_v2.5附加文档.rar

    文档“zTree.doc”可能涵盖了zTree的基本概念、安装方法、基本配置以及常用方法。在zTree的基本概念部分,你可能会了解到如何创建一个基本的树结构,包括节点的定义、父节点与子节点的关系、叶子节点的概念等。安装...

    ztree下拉树

    3. `demo`目录:提供了多个示例,涵盖了zTree的常用功能,如异步加载、拖拽操作、多选模式等。 压缩包2——"zTree_v3-master2.rar",是作者自己实现的下拉树实例。在`ztreeinput`文件夹中,我们可以找到作者如何将...

    JQuery zTree 2.0 一个非常好用的jQuery树插件

    `demo`目录包含了一系列示例代码,覆盖了zTree的常用功能,例如: 1. **基本用法**:展示了最简单的树形结构,包括节点的基本操作。 2. **异步加载**:演示了如何动态加载子节点,适用于数据量庞大的情况。 3. **...

    Ztree使用方法.docx

    - **常用方法**: - `getNodeByParam(key, value, parentNode)`:根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象。 - `key`:需要精确匹配的属性名称。 - `value`:需要精确匹配的属性值。 - `...

Global site tag (gtag.js) - Google Analytics