下拉树!

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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值