<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>