这次做项目还用到了另一个tree树的插件，就是input输入框下拉tree树
我这只是简单的下拉显示tree树，没有tree树的添加、编辑、删除、移动等操作
先看图片
zTree官方API文档
http://www.treejs.cn/v3/api.php
上代码
- 引入的js
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script> <script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>js文件包括源码上传至百度云：https://pan.baidu.com/s/1iOtplePD1gwYBme8y4BD4w
-
代码
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <meta charset="UTF-8"> <!-- for HTML5 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script> <script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script> <script type="text/javascript"> var setting = { view: { showIcon: false//设置 zTree 是否显示节点的图标。默认值：true showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true }, data: { simpleData: { enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array) 不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式 默认值：false ztree有两种数据格式1、标准数据格式 2、简单数据格式（我们常用的json数据格式，也就是我下面的数据格式） idKey: "id",//你后台返回的json的id字段（节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]） pIdKey: "pId",//你后台返回的json的父级id字段（节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]） rootPId: 0（用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]） } }, callback: { onClick: onClick//用于捕获节点被点击的事件回调函数 //如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。 } }; var filename; var parentids; var parentId; function onClick(e, treeId, treeNode) { $(‘#txtTreeSelect‘).val(treeNode.name); alert(treeNode.tId + ", " + treeNode.name);//每次点击节点后， 弹出该节点的 Id、name 的信息 filename = getFilePath(treeNode);//获取所有父节点的名字 parentids = getFileId(treeNode);//获取所有父节点的id parentId = treeNode.id;//获取点击节点的id } //获取所有父节点名字 function getFilePath(treeObj){ if(treeObj==null)return ""; var filename = treeObj.name; var pNode = treeObj.getParentNode(); if(pNode!=null){ filename = getFilePath(pNode) +">"+ filename; } return filename; } //获取所有父节点id function getFileId(treeObj){ if(treeObj==null)return ""; var id = treeObj.id; var pNode = treeObj.getParentNode(); if(pNode!=null){ id = getFileId(pNode) +">"+ id; } return id; } function showMenu() {//输入框的点击事件 var cityObj = $(‘#txtTreeSelect‘); var cityOffset = cityObj.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(); } } $(document).ready(function () {//一进页面就会加载的方法 var zNodes =[//自定义json { id:1, pId:0, name:"父节点1 - 展开", open:true,url:"jyy"}, { id:11, pId:1, name:"父节点11 - 折叠"}, { id:111, pId:11, name:"叶子节点111"}, { id:112, pId:11, name:"叶子节点112"}, { id:113, pId:11, name:"叶子节点113"}, { id:114, pId:11, name:"叶子节点114"}, { id:12, pId:1, name:"父节点12 - 折叠"}, { id:121, pId:12, name:"叶子节点121"}, { id:122, pId:12, name:"叶子节点122"}, { id:123, pId:12, name:"叶子节点123"}, { id:124, pId:12, name:"叶子节点124"}, { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true}, { id:2, pId:0, name:"父节点2 - 折叠"}, { id:21, pId:2, name:"父节点21 - 展开", open:true}, { id:211, pId:21, name:"叶子节点211"}, { id:212, pId:21, name:"叶子节点212"}, { id:213, pId:21, name:"叶子节点213"}, { id:214, pId:21, name:"叶子节点214"}, { id:22, pId:2, name:"父节点22 - 折叠"}, { id:221, pId:22, name:"叶子节点221"}, { id:222, pId:22, name:"叶子节点222"}, { id:223, pId:22, name:"叶子节点223"}, { id:224, pId:22, name:"叶子节点224"}, { id:23, pId:2, name:"父节点23 - 折叠"}, { id:231, pId:23, name:"叶子节点231"}, { id:232, pId:23, name:"叶子节点232"}, { id:233, pId:23, name:"叶子节点233"}, { id:234, pId:23, name:"叶子节点234"}, { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true} ]; $.fn.zTree.init($("#treeDemo"), setting, zNodes); //zTree的初始化方法 }); </script> <title></title> </head> <body> <form id="form1" runat="server"> <div> <input id="txtTreeSelect" type="text" onclick="showMenu(); return false;"/>//输入框 </div> <div id="menuContent" class="menuContent" style="display: none; position: absolute;"> <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 120px; height:80px;"> </ul> </div>//tree树的div块 </form> </body> </html>
原文地址：https://www.cnblogs.com/lvgeaibingyue/p/10167674.html
时间： 2024-08-04 17:23:59