基于zTree的常用成员管理树图级联选择(仿穿梭框功能)

最新推荐文章于 2024-05-07 13:49:54 发布

ProgrammarQin

最新推荐文章于 2024-05-07 13:49:54 发布

阅读量3.2k

点赞数 4

分类专栏： Js HTML CSS 树图 zTree 文章标签： zTree Javascript HTML

本文链接：https://blog.csdn.net/ProgramarQin/article/details/84963915

版权

Js 同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

HTML

9 篇文章 1 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

广州这几天的天气异常寒冷，前几天搞一个系统需要实现菜单管理，而菜单管理页则需要涉及到给用户授权访问菜单，因此需要选择相应的可访问成员，之前在基于elementui的后台管理系统中用过它的树图组件，觉得挺不错的，因此决定自己封装一个jquery的ztree成员管理树图，在这淘宝双十二的夜晚，闲暇之余记录下自己的学习点滴------------前言

源码地址：https://github.com/applebring/zTree-Plugin-for-jquery.git

运行：目前为静态数据，直接运行index.html即可

插件功能：可实现对左侧树图节点的搜索，可实现选择左侧树图成员到右侧框中，可实现右侧数据的删除，可实现数据的初始化

基本界面如下：

直接上代码，注释也已经很清晰

HTML:

<body>
	<h1>基于zTree树部门成员选择器插件</h1>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<div class="input-search">
				<input type="text" placeholder="输入关键字查询" id="filter-text" class="empty" /><span style="color:red;font-size:12px;position:absolute;left:0;right:0;top:40px;display:none;"
				 class="no-data">查找不到结果~</span>
			</div>
			<div class="tree-content">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div class="right">
			<ul class="choose-content">
			</ul>
		</div>
	</div>
	<br/>
	<button id="btn-reset">重置数据项</button>&nbsp;<button id="btn-confirm-id">获取选中数据(id)</button>&nbsp;<button id="btn-confirm-obj">获取选中数据(obj)</button>
	<div class="choose-data">
		<div class="choose-data">
			<span>当前选中数据为:</span><br/>
			<div class="data">暂无数据</div>
		</div>
</body>

未封装为插件前的JAVASCRIPT（ps：搜索关键字可根据需要搜索zNode相应字段，本次搜索是通过name字段搜索，如需搜索到父级文字可搜索zNodes中的searchdata字段）

	$(function () {
			page.init();
		});
		var page = (function () {
			var treeInit = function () {
				/*
				渲染数组到右侧
				arr:  渲染的数组
				*/
				function renderData(arr) {

				}
				/*主要功能：将点击事件与checked事件关联，判断是否最后一个元素，如果是，将最后一个元素放入渲染数组，再将数组渲染到右侧
				eventjs event 对象
				treeIdString  对应 zTree 的 treeId，便于用户操控
				treeNodeJSON  被点击的节点 JSON 数据对象
				*/
				function checkChangeFn(event, treeId, treeNode) {
					var rightArr = [];
					var checkedNode = zTree.getCheckedNodes(true);
					$.each(checkedNode, function (i, item) {
						if (!item.isParent) {/*item.isLastNode判断结点是否为最后一个结点*/
							rightArr.push(item);
						}
					});
					var rhtml = "";
					$.each(rightArr, function (i, item) {
						rhtml += "<li data-item='" + JSON.stringify(item) + "'><span>" + item.name + "</span><span class='close'>x</span></li>";
					});
					$(".choose-content").html(rhtml);
				}
				/*
				高亮样式设置
				*/
				function getFontCss(treeId, treeNode) {
					return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
				}
				var setting = {
					check: {
						enable: true
					},
					data: {
						simpleData: {
							enable: true
						}
					},
					view: {
						fontCss: getFontCss
					},
					callback: {
						onClick: function (event, treeId, treeNode) {
							//将点击事件与复选框事件关联
							var zTree = $.fn.zTree.getZTreeObj("treeDemo");
							zTree.checkNode(treeNode, !treeNode.checked, true);
							checkChangeFn(event, treeId, treeNode);
							var curSelect = $("#treeDemo").find(".curSelectedNode");//控制选中项背景样式
							treeNode.checked == true ? (curSelect.hasClass("unactive") ? curSelect.removeClass("unactive") : '') : curSelect.addClass("unactive");
						},
						onCheck: checkChangeFn
					}
				};
				var zNodes = [
					{ id: 1, pId: 0, name: "集团", open: true, checked: false,searchdata:"集团" },
					{ id: 11, pId: 1, name: "一汽", open: true, checked: false,searchdata:'集团一汽' },
					{ id: 111, pId: 11, name: "一汽子成员1", checked: false,searchdata:'集团一汽一汽子成员1' },
					{ id: 112, pId: 11, name: "一汽子成员2", checked: false,searchdata:'集团一汽一汽子成员2' },
					{ id: 12, pId: 1, name: "二汽", open: true, checked: false,searchdata:'集团二汽' },
					{ id: 121, pId: 12, name: "二汽子成员1", checked: false,searchdata:'集团二汽二汽子成员1' },
					{ id: 122, pId: 12, name: "二汽子成员2", checked: false,searchdata:'集团二汽二汽子成员2' },
					{ id: 2, pId: 0, name: "集团 2", checked: true, open: true,searchdata:'' },
					{ id: 21, pId: 2, name: "一汽", checked: true,searchdata:'' },
					{ id: 22, pId: 2, name: "二汽", open: true, checked: false,searchdata:'' },
					{ id: 221, pId: 22, name: "二汽1", checked: true,searchdata:'' },
					{ id: 222, pId: 22, name: "二汽2", checked: true,searchdata:'' },
					{ id: 23, pId: 2, name: "三汽", checked: false,searchdata:'' }
				];
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				//初始化数据，调用树图check事件
				zTree.setting.callback.onCheck();
				//清空搜索框内容
				$("#filter-text").val("");
			};
			//组件初始化；
			var componentInit = function () {
				//右侧选框删除事件
				$(".choose-content").on("click", ".close", function () {
					var tId = $(this).parent("li").data("item").tId;
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					//通过id找到节点，改变状态
					zTree.checkNode(zTree.getNodeByTId(tId), false, true);
					//移除元素
					$(this).parent("li").remove();
				});
				/*
				搜索树节点，如果找到则高亮显示，没找到提示
				*/
				function updateNodes(highlight, nodeList) {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					if($("#filter-text").val()!=""){zTree.expandAll(false);}//先折叠所有节点，再展开相应的节点
					for (var i = 0, l = nodeList.length; i < l; i++) {
						nodeList[i].highlight = highlight;
						zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开
						zTree.updateNode(nodeList[i]);
					}
				}
				function searchNode() {
					var filter = $("#filter-text").val();
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					var filterArr = zTree.getNodesByParamFuzzy("name", filter, null);;
					if (filter === ""){updateNodes(false,filterArr);$(".no-data").css("display","none");return;};
					if(filter!=""&&filterArr.length==0){$(".no-data").css("display","block");}else{$(".no-data").css("display","none");}
					updateNodes(true, filterArr);
				}
				/*输入框添加输入监听*/
				$("#filter-text").on("propertychange", searchNode).on("input", searchNode);
			};
			return {
				init: function () {
					treeInit();
					componentInit();
				}
			}
		})();

以上为未封装成插件源码，易于理解，封装成插件后使用规则如下，源码请到github上下载

封装成插件后的Javascript

<script type="text/javascript" src="./resources/libs/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="./resources/libs/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./resources/libs/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="./resources/js/tree.js"></script>
<script>
	var zNodes = [
		{ id: 1, pId: 0, name: "集团", open: true, checked: false, searchdata: "集团" },
		{ id: 11, pId: 1, name: "一汽", open: true, checked: false, searchdata: '集团一汽' },
		{ id: 111, pId: 11, name: "一汽子成员1", checked: false, searchdata: '集团一汽一汽子成员1' },
		{ id: 112, pId: 11, name: "一汽子成员2", checked: false, searchdata: '集团一汽一汽子成员2' },
		{ id: 12, pId: 1, name: "二汽", open: true, checked: false, searchdata: '集团二汽' },
		{ id: 121, pId: 12, name: "二汽子成员1", checked: false, searchdata: '集团二汽二汽子成员1' },
		{ id: 122, pId: 12, name: "二汽子成员2", checked: false, searchdata: '集团二汽二汽子成员2' },
		{ id: 2, pId: 0, name: "集团 2", checked: true, open: true, searchdata: '集团 2' },
		{ id: 21, pId: 2, name: "一汽", checked: true, searchdata: '集团 2一汽' },
		{ id: 22, pId: 2, name: "二汽", open: true, checked: false, searchdata: '集团 2二汽' },
		{ id: 221, pId: 22, name: "二汽1", checked: true, searchdata: '集团 2二汽二汽1' },
		{ id: 222, pId: 22, name: "二汽2", checked: true, searchdata: '集团 2二汽二汽2' },
		{ id: 23, pId: 2, name: "三汽", checked: false, searchdata: '集团 2二汽三汽' }
	];
	var tree = $("#treeDemo").TransferTree({
		zNodes: zNodes
	});
	//重置选择项
	$("#btn-reset").on("click", function () {
		//按照zTree数据格式
		var resetzNodes = [
			{ id: 1, pId: 0, name: "集团", open: true, checked: false, searchdata: "集团" },
			{ id: 11, pId: 1, name: "一汽", open: true, checked: false, searchdata: '集团一汽' },
			{ id: 111, pId: 11, name: "一汽子成员1", checked: true, searchdata: '集团一汽一汽子成员1' },
			{ id: 112, pId: 11, name: "一汽子成员2", checked: true, searchdata: '集团一汽一汽子成员2' },
			{ id: 12, pId: 1, name: "二汽", open: true, checked: false, searchdata: '集团二汽' },
			{ id: 121, pId: 12, name: "二汽子成员1", checked: false, searchdata: '集团二汽二汽子成员1' },
			{ id: 122, pId: 12, name: "二汽子成员2", checked: false, searchdata: '集团二汽二汽子成员2' },
			{ id: 2, pId: 0, name: "集团 2", checked: true, open: true, searchdata: '集团 2' },
			{ id: 21, pId: 2, name: "一汽", checked: true, searchdata: '集团 2一汽' },
			{ id: 22, pId: 2, name: "二汽", open: true, checked: false, searchdata: '集团 2二汽' },
			{ id: 221, pId: 22, name: "二汽1", checked: false, searchdata: '集团 2二汽二汽1' },
			{ id: 222, pId: 22, name: "二汽2", checked: false, searchdata: '集团 2二汽二汽2' },
			{ id: 23, pId: 2, name: "三汽", checked: false, searchdata: '集团 2二汽三汽' }
		];
		tree.resetData(resetzNodes);
	});
	//获取选中项by id
	$("#btn-confirm-id").on("click", function () {
		var getData = tree.getCheckData('id');
		$(".data").html(getData.toString());
	});
	//获取选中项by obj
	$("#btn-confirm-obj").on("click", function () {
		var getData2 = tree.getCheckData('obj');
		$(".data").html(JSON.stringify(getData2));
	});
</script>

本博客上的js代码是未经封装的插件，封装成插件后的代码已传到git上，要是需要用到的朋友请直接到git上下载源码运行~如有错误之处，也欢迎指出~要是有感兴趣的朋友想封装下，也欢迎来互相交流下~

ProgrammarQin

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
基于zTree的常用成员管理树图级联选择(仿穿梭框功能)

广州这几天的天气异常寒冷，前几天搞一个系统需要实现菜单管理，而菜单管理页则需要涉及到给用户授权访问菜单，因此需要选择相应的可访问成员，之前在基于elementui的后台管理系统中用过它的树图组件，觉得挺不错的，因此决定自己封装一个jquery的ztree成员管理树图，在这淘宝双十二的夜晚，闲暇之余记录下自己的学习点滴------------前言源码地址：https://github.com/a...
复制链接

扫一扫

专栏目录