zTree 入门小实例

 

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。多用于层级结构,因为是国人写的,在中国很多人使用,不过使用确实很方便。

 API 文档和源码 :http://www.treejs.cn/v3/main.php#_zTreeInfo

直接开撸。

 

js:

<script type="text/javascript">

var zNodes = new Array();
var setting = {
	data:{
		simpleData:{
			enable:	true,
			idKey:	"id", //id编号命名
			pIdKey:	"pId", //父id编号命名
			rootPId: "-1" 
		},
		key : {
    		name : "name" //如果命名就是"name",此处可以不写
    	},
	},
	view:{
		showLine:false,
		selectedMulti: false
	}
}

function getAgentStructure(){
	$.ajax({
		url:"/cyAgentStructure/cyAgentStructure.do?action=getCyAgentStructureList",
		dataType:"json",
		data:{isDel:0},
		success:function(data){
			var dataList = data.data;
			$.each(dataList,function(index,eachData){
				var node = {};
				node["id"] = eachData.id;
	            node["pId"] = eachData.parentid;
	            node["name"] = eachData.name;
				zNodes.push(node);
			});
			
			$.fn.zTree.init($("#treeDemo2"),setting,zNodes);
			//展示树节点
			$.fn.zTree.getZTreeObj("treeDemo2").expandAll(true);
		}
	});
}
</script>

 

代码解析:

 

setting.data.simpleData.enable

概述[ 依赖 jquery.ztree.core 核心 js ]

 

确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)

不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式

默认值:false

Boolean 格式说明

true / false 分别表示 使用 / 不使用 简单数据模式

如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系

setting 举例

1. 使用简单 Array 格式的数据

var setting = {
	data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: 0
		}
	}
};
var treeNodes = [
    {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}
];
......

 

setting.view.showLine

概述[ 依赖 jquery.ztree.core 核心 js ]

 

设置 zTree 是否显示节点之间的连线。

默认值:true

Boolean 格式说明

true / false 分别表示 显示 / 不显示 连线

setting 举例

1. 设置 zTree 不显示节点之间的连线

var setting = {
	view: {
		showLine: false
	}
};
......

 

setting.view.selectedMulti

概述[ 依赖 jquery.ztree.core 核心 js ]

 

设置是否允许同时选中多个节点。

默认值: true

Boolean 格式说明

true / false 分别表示 支持 / 不支持 同时选中多个节点

1、设置为 true时,按下 Ctrl 或 Cmd 键可以选中多个节点

2、设置为 true / false 都不影响按下 Ctrl 或 Cmd 键可以让已选中的节点取消选中状态( 取消选中状态可以参考 setting.view.autoCancelSelected )

setting 举例

1. 禁止多点同时选中的功能

var setting = {
	view: {
		selectedMulti: false
	}
};
......

 

 

getCyAgentStructureList 返回的数据:

{
	"total": 4,
	"data": [{
		"id": 21,
		"updateBy": "",
		"createTime": "",
		"isDel": 0,
		"sort": 10,
		"updateTime": "",
		"description": "",
		"name": "拉亚里",
		"parentid": 20,
		"structureCode": "",
		"bid": 57,
		"createBy": "",
		"structureLogo": ""
	}, {
		"id": 20,
		"updateBy": "",
		"createTime": "",
		"isDel": 0,
		"sort": 9,
		"updateTime": "",
		"description": "",
		"name": "飞鱼",
		"parentid": 19,
		"structureCode": "",
		"bid": 57,
		"createBy": "",
		"structureLogo": ""
	}, {
		"id": 19,
		"updateBy": "",
		"createTime": "",
		"isDel": 0,
		"sort": 8,
		"updateTime": "",
		"description": "",
		"name": "利亚",
		"parentid": 18,
		"structureCode": "",
		"bid": 57,
		"createBy": "",
		"structureLogo": ""
	}, {
		"id": 18,
		"updateBy": "",
		"createTime": "",
		"isDel": 0,
		"sort": 7,
		"updateTime": "",
		"description": "",
		"name": "蒙丽都",
		"parentid": -1,
		"structureCode": "",
		"bid": 57,
		"createBy": "",
		"structureLogo": ""
	}]
}

 

 

jsp 页面:

<!-- 注意:一定要引 zTree 包 -->
<script src="<%=staticWebUrl%>/kz/ui/main/v3.0/business/common/js/jquery.ztree.core-3.5.js"></script>


<div>
      <ul id="treeDemo2" class="ztree"></ul>
</div>

下载 zTree 插件,项目中导入 js、css 和 image,zTree 有很多扩展 js,暂时没有用上,所以只导入 jquery.ztree.core.js 就可以了,当然还要导入 jquery.min.js,css 需要导入 zTreeStyle.css,而 demo.css 中有很多样式,如果需要用到的话也可以导入。

 

效果:

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值