easyui结合ztree做成tooltip样式的下拉框

<label>组织
	<input id="org" style="border-radius:0;vertical-align:middle;" placeholder="--请选择--"/>
	<a id="dd" href="#" class="easyui-tooltip" style="font-size:20px;text-align:center;display:inline-block;margin-left: -25px;vertical-align:middle;width: 20px;height: 28px;background:#eee;border-radius: 5px 5px 5px 5px;border: 1px solid #ddd"><i class="fas fa-caret-down" style="line-height:28px;"></i></a>
</label>

js代码:

//利用tooltip和a标签,input标签做成下拉框假样式
$('#dd').tooltip({
    position: 'bottom',
    content: "<iframe id='orgtree' style='width:200px;border:0px;' src='${ct}/jsp/mes/workOrderManage/orgTree/orgTree.jsp'></iframe>",
    onShow: function(){
		$('#orgtree').attr('src','${ct}/jsp/mes/workOrderManage/orgTree/orgTree.jsp')
    },
    //鼠标单击是显示提示框
    showEvent: "click",
    //鼠标双击是隐藏提示框
    hideEvent: "dblclick"
});
$('#org').click(function() {
	$('#dd').trigger('click');
});

iframe的代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../../../js/common/commonBootStrap.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>树</title>
<link href="${ct}/easyui/pages/css/basic_info.css" rel="stylesheet">
<link rel="stylesheet" href="${ct}/ztree/demo.css" type="text/css">
<link rel="stylesheet" href="${ct}/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="${ct}/css/fileStyle.css" type="text/css">
<script type="text/javascript"
	src="${ct}/ztree/jquery.ztree.core.min.js"></script>
</head>
<body>
	<div id="accreditfactory" buttons="#dlg-buttons">
		<div id="root" style="cursor: hand; display: inline">组织机构</div>
		<div id="user_tree" class="ztree"
			style="padding-top: 3px; padding-left: 18px"></div>
		<div id="dlg-buttons"
			style="position: absolute; bottom: 5px; right: 20px;"></div>
	</div>
</body>
<script type="text/javascript">
	var zTree;
	var setting = {
		data : {
			simpleData : {//简单数据模式
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : ""
			}
		},
		view : {
			//addHoverDom: addHoverDom,		// 用于当鼠标移动到节点上时，显示用户自定义控件。务必与 setting.view.removeHoverDom 同时使用
			//removeHoverDom: removeHoverDom,	// 用于当鼠标移出节点时，隐藏用户自定义控件。务必与 addHoverDom 同时使用
			dblClickExpand : false,
			selectedMulti : false
		},
		edit : {
			enable : true,
			editNameSelectAll : true,// 节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态。
			removeTitle : "删除", // 删除按钮的 Title 辅助信息
			renameTitle : "重命名" // 编辑名称按钮的 Title 辅助信息。
		},
		check : {
			chkboxType : {
				"Y" : "ps",
				"N" : "ps"
			},
			chkStyle : "checkbox",//复选框类型
			enable : true
		//每个节点上是否显示 CheckBox 
		},
		callback : {
			onClick : clickNode
		//点击节点触发的事件
		}
	};

	/**
	 * 加载树形结构数据
	 */
	function onLoadZTree() {
		var treeNodes;
		$.ajax({
			async : false,//是否异步
			cache : false,//是否使用缓存
			type : 'POST',//请求方式：post
			dataType : 'json',//数据传输格式：json
			url : "${ct}/CNC/organization_getData.action",//请求的action路径
			error : function() {
				//请求失败处理函数
				alert('亲，请求失败！');
			},
			success : function(data) {
				var rows = data.rows;//把后台封装好的简单Json格式赋给treeNodes
				if (rows != null && rows.length > 0) {
					var rowsI;
					var rowsArr = [];
					var _temp;
					for (var i = 0; i < rows.length; i++) {
						rowsI = rows[i];
						_temp = {};
						_temp.name = rowsI.text;
						_temp.pId = rowsI._parentId;
						_temp.id = rowsI.id;
						rowsArr.push(_temp);
					}
				}
				//请求成功后处理函数
				treeNodes = rowsArr;
			}
		});

		var t = $("#user_tree");
		t = $.fn.zTree.init(t, setting, treeNodes);
	}
	function clickNode(event, treeId, treeNode) {
		var eventNodeName = event.target.nodeName;
		if (eventNodeName == "INS") {
			return;
		} else if (eventNodeName == "SPAN") {
			$.ajaxSetup({
				cache : false
			});
			$("#root").css({
				"background" : ""
			});
			nodeid = treeNode.id;
			var factoryname = treeNode.name;
			parent.$("#workshopid").val(nodeid);
			parent.$("#org").val(factoryname);
			parent.$('#dd').tooltip('hide');
		}
	}
</script>
<script type="text/javascript">
	var roleId = '${param.uid}';
	var factoryuids;
	$(function() {
		$.ajaxSetup({
			cache : false
		});
		onLoadZTree();
	});
</script>
</html>

easyui结合ztree做成tooltip样式的下拉框

猜你喜欢