下拉树!

var root = $(div).attr("root");
			var zNodes =[
			{id:1, parent_id:0, name:"AAA",title:"123"},
			{id:2, parent_id:0, name:"BBB"},
			{id:3, parent_id:0, name:"CCC"},
			{id:4, parent_id:0, name:"EEE", open:true},
			{id:41, parent_id:4, name:"aaa"},
			{id:42, parent_id:4, name:"bbb"},
			{id:43, parent_id:4, name:"ccc"},
			{id:44, parent_id:4, name:"ddd"},
			
		 ];

		require(['ztree'],function(z){
						var setting = {
							view: {
								dblClickExpand: true
							},
							data: {
								simpleData: {
									enable: true,
									idKey: "id",
									pIdKey: "parent_id",
									rootPId: 0
								}
							},
							callback: {
								beforeClick: beforeClick,
								onClick: onClick
							}
						};
						if(root=="是")setting.callback.beforeClick="";
						
				var src = $(div).attr("src"); //table
				if(src==null||src==""){
					var tree = $.fn.zTree.init($("#"+treeDemo), setting, zNodes);
			    }else{
	    			    $.get(src,function(r){	//renderJson(0,"",data);
	    			    	var tree = $.fn.zTree.init($("#"+treeDemo), setting, r.data);
	    			    	if($(div).attr("nodeall")=="是"){
								tree.expandAll(true);
							}else{
								tree.expandAll(false);
							}
						});
			    }
				$("#"+input1_id).focus(function(){
					if($("#"+menucontent).is(":hidden")){
						showMenu();
					}else{
						hideMenu();
					}
				});
				function onClick(e, treeId, treeNode) {
					var zTree = $.fn.zTree.getZTreeObj(treeDemo);
					nodes = zTree.getSelectedNodes();
					var v = nodes[0].name;
					var id = nodes[0].title;
					if(id==null)$("#"+input1_id).attr("key", v);
					$("#"+input1_id).val(v);
					$("#"+input1_id).attr("key", id);
					hideMenu();
				}
				function showMenu() {
					var cityObj = $("#"+input1_id);
					var tableH = 0;
					var width = cityObj.parents("table").length;
					if(page.mode==2) width-=1;//编辑态多一层table
					for(var i = 0;i<width;i++){
						tableH +=cityObj.parents("table")[i].offsetTop;
					}
					var cityOffset = $("#"+input1_id).offset();
					$("#"+menucontent).css({left:cityOffset.left + "px", top:tableH+$("#"+input1_id)[0].offsetTop + $("#"+input1_id)[0].offsetHeight+ "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();
					}
				}
				function beforeClick(treeId, treeNode) {
					var check = (treeNode && !treeNode.isParent);
					if (!check) alert("不可选择此节点");
					return check;
				}
			});

效果展示:

用到了require和ztree。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通常是指一个下框(select)加上一个形结构,用户可以通过下框选中形结构中的某一个节点。在 JavaScript 中,可以使用一些开源的库来实现下,比如 zTree、jQuery Tree Select 等。 以下是一个简单的使用 zTree 实现下的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下示例</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.37/css/zTreeStyle/zTreeStyle.min.css" /> </head> <body> <select id="treeSelect"></select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.37/js/jquery.ztree.all.min.js"></script> <script> var zNodes = [ { id:1, pId:0, name:"父节点1" }, { id:11, pId:1, name:"子节点1" }, { id:12, pId:1, name:"子节点2" }, { id:2, pId:0, name:"父节点2" }, { id:21, pId:2, name:"子节点3" }, { id:22, pId:2, name:"子节点4" } ]; $(document).ready(function(){ var treeSelect = $("#treeSelect"); treeSelect.append("<option value=''>请选择</option>"); $.fn.zTree.init(treeSelect, { data: { simpleData: { enable: true } } }, zNodes); }); </script> </body> </html> ``` 在这个示例中,我们使用了 zTree 库来创建一个下。首先,我们在 HTML 中添加一个空的 select 元素,然后在 JavaScript 中初始化 zTree,将数据节点 zNodes 绑定到 select 元素上。最后,我们在 select 元素中添加一个默认的选项 "请选择"。 你可以将 zNodes 中的数据替换成你需要的数据,这样就可以在下中显示你的自定义数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值