使用zTree实现树形下拉框

最新推荐文章于 2025-07-10 13:47:28 发布

Mr.Yakun

最新推荐文章于 2025-07-10 13:47:28 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

文章标签： zTree jquery

本文链接：https://blog.youkuaiyun.com/a1556274485/article/details/50516662

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在项目中利用zTree实现商品分类的下拉框功能，包括HTML和JS代码实现，以及zTree的一些API使用技巧。通过实例展示了如何在网页中整合树形结构数据与用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天项目中需要用到选择属性下拉框，树状结构我用了zTree，下拉框本想用插件的，但是没找到好的插件就只能自己搞出来了，正好网上也有一些zTree下拉框的例子，就做出来了

HTML:

<form id="theform" onsubmit="return false;">
		<ul class="forminfo">
			<li><label>商品名称<b>*</b></label> <input name="goodsName"
				id="goodsName" type="text" class="dfinput" style="width: 400px;" />
				<span id="goodsNameTip"></span></li>
			<li><label>商品货号<b>*</b></label> <input name="goodsSn"
				id="goodsSn" type="text" class="dfinput" style="width: 400px;" /> <span
				id="goodsSnTip"></span></li>
			<li><label>商品分类<b>*</b></label> <input name="catName" id="catName"
				type="text" class="dfinput" style="width: 400px;" value=""
				onfocus="showMenu()" onclick="showMenu()" />
				<span id="catIdTip"></span>
				<input type="hidden" name="catId" id="catId"/></li>
			<li><label>价格<b>*</b></label> <input name="shopPrice"
				id="shopPrice" type="text" class="dfinput" style="width: 400px;" />
				<span id="shopPriceTip"></span></li>
			<li><label>单价<b>*</b></label> <input name="buyPrice"
				id="buyPrice" type="text" class="dfinput" style="width: 400px;" />
				<span id="buyPriceTip"></span></li>
			<li><label>产地</label> <input name="chandi" id="chandi"
				type="text" class="dfinput" style="width: 400px;" /> <span
				id="chandiTip"></span></li>
			<li><label>规格</label> <input name="guige" id="guige" type="text"
				class="dfinput" style="width: 400px;" /> <span id="guigeTip"></span></li>
			<li><input type="submit" class="btn" value="保存" /> <input
				type="button" onclick="parent.layer.closeAll();" class="btn"
				value="关闭" /></li>
		</ul>
	</form>
	<div id="menuContent" class="menuContent"
		style="display: none; position: absolute;">
		<ul id="cateTree" class="ztree selectZtree" style="margin-top: 0; width: 160px;"></ul>
	</div>

js代码：

function zTreeBeforeClick(treeId, treeNode, clickFlag) {
			var check = (treeNode && !treeNode.isParent);
			if (!check){
				//alert("只能选择子节点...");
				var catObj = $("#catName");
				catObj.attr("value", "");
			}
			return check;
		}

		function zTreeOnClick(event, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("cateTree"), nodes = zTree
					.getSelectedNodes(), v = "", ids = "";
			nodes.sort(function compare(a, b) {
				return a.id - b.id;
			});
			v =  nodes[0].catName;
			ids = nodes[0].catId;
			//if (v.length > 0)
			//	v = v.substring(0, v.length - 1);
			var catObj = $("#catName"),catId = $("#catId");
			catObj.attr("value", v);
			catId.attr("value", ids);
		}

		function showMenu() {
			var cityObj = $("#catName");
			var cityOffset = $("#catName").offset();
			$("#menuContent").css({
				left : cityOffset.left + "px",
				top : cityOffset.top + cityObj.outerHeight() + "px"
			}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn"
					|| event.target.id == "menuContent" || $(event.target)
					.parents("#menuContent").length > 0)) {
				hideMenu();
			}
		}
		var setting = {
				view: {
					selectedMulti: false
				},
				data : {
					key : {
						name : "catName"
					},
					simpleData : {
						enable : true,
						idKey : "catId",
						pIdKey : "parentId",
						rootPId : 0
					}
				},
				callback: {
					//beforeClick: zTreeBeforeClick,
	                onClick: zTreeOnClick
	            }
			};
		$(function() {
			$.getJSON('${cssRoot}/category/queryTree.do', {}, function(res) {
				$.fn.zTree.init($("#cateTree"), setting, res.list);
			});
		});

这次熟悉了zTree的一些api，包括callback、不需要多选的时候selectedMulti: false等等