- html
<link rel="stylesheet" href="${ctx}/Hplus/js/plugins/zTree_v3/css/metroStyle/metroStyle.css" type="text/css"/>
<div class="form-group">
<label class="col-sm-2 control-label">发送到:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sendto" autocomplete="off">
<div style="width: 100%;position: absolute;z-index:10;border: none">
<!-- 用于展开ztree树,z-index:10 则div堆叠在最表层 -->
<div id="menuContent" class="menuContent" hidden="true" style="border:1px solid #617775;background: #F5F5F5;height: 300px;margin-right: 28px;padding: 20px;overflow-y: auto;">
<ul id="connet" class="ztree"></ul>
</div>
</div>
</div>
</div>
- js
<script type="text/javascript" src="${ctx}/Hplus/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctx}/Hplus/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${ctx}/Hplus/plugins/zTree_v3/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
$("#sendto").on("click", function(e){
if($("#menuContent").is(":hidden")){
$("#menuContent").show();
}else{
$("#menuContent").hide();
}
$(document).one("click", function(){
$("#menuContent").hide();
});
e.stopPropagation();
});
$("#menuContent").on("click", function(e){
e.stopPropagation();
});
var zTree;
var setting = {
async:{
enable:true,
url: ""
},
view: {
removeHoverDom: false,
selectedMulti: true,
addDiyDom: addDiyDom,
dblClickExpand: false,
showLine: true
},
check: {
enable: true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: ""
}
},
edit: {
drag: {
isCopy: false,
isMove: false,
},
enable: false,
showRenameBtn: true,
showRemoveBtn: setRemoveBtn
},
callback: {
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
onClick: onClick,
onCheck: onCheck
}
};
$(function () {
$.get("${ctx}/mail/userList",
function tree(data) {
tree=$.fn.zTree.init($("#connet"), setting, data);$._tree=tree;
expandNode();
});
});
function expandNode() {
var zTree = $.fn.zTree.getZTreeObj("connet");
var nodes = zTree.getNodes();
for (var i = 0; i < nodes.length; i++) { //设置节点展开
zTree.expandNode(nodes[i], true, false, true);
}
}
function beforeClick() {
var zTree = $.fn.zTree.getZTreeObj("connet");
zTree.expandNode(treeNode);
$("#"+treeNode.tid+"_span").css("background", "blue");
return (treeNode.click != false);
}
function onClick(event, treeId, treeNode, clickFlag) {
var zTree = $.fn.zTree.getZTreeObj("connet");
//点击当前节点,展开当前节点的子节点
//zTree.expandNode(treeNode);
//提交post并刷新表格
inputs = $("#queryForm").serializeArray();
var postData = {};
for(x in inputs){
postData[inputs[x].name] = inputs[x].value;
}
$("#table_grid").jqGrid("setGridParam",{url:'${ctx}/grid/queryconnets/sys_dpt_user?id='+treeNode.id,postData:postData}).trigger("reloadGrid");
}
/**
* 设置字数过长隐藏
*/
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $("#" + treeNode.tId + "_switch"),
icoObj = $("#" + treeNode.tId + "_ico");
switchObj.remove();
icoObj.before(switchObj);
icoObj.parent().before(switchObj);
var spantxt = $("#" + treeNode.tId + "_span").html();
if (spantxt.length > 9) {
spantxt = spantxt.substring(0, 9) + "...";
$("#" + treeNode.tId + "_span").html(spantxt);
}
}
/**
* 设置父节点不可删除
*/
function setRemoveBtn(treeId, treeNode) {
return !treeNode.isParent;
}
/**
* 重命名文件夹
*/
function beforeEditName(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("connet");
var node = zTree.selectNode(treeNode);
openTreee("${ctx}/grid/updateDptPage?id="+treeNode.id+"&parentId="+treeNode.pid+"&treeNode="+treeNode,"编辑组织机构",treeNode);
return false;
}
/**
* 删除节点
*/
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("connet");
var node = zTree.selectNode(treeNode);
dele(treeNode);
return false;
}
/**
* 新增节点
*/
function addHoverDom(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("connet");
var node = zTree.getSelectedNodes();
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='添加部门 ' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
openTreee("${ctx}/grid/addDptPage?id="+treeNode.id+"&parentId="+treeNode.pid,"添加组织机构",treeNode);
return false;
});
};
//展开
function expand(){
var zTree = $.fn.zTree.getZTreeObj("connet");
zTree.expandAll(true);
$("#btnExpand").attr("display","none");
document.getElementById("btnExpand").style.display="none";
document.getElementById("btnCollapse").style.display="inline-block";
}
//折叠
function collapse(){
var zTree = $.fn.zTree.getZTreeObj("connet");
zTree.expandAll(false);
document.getElementById("btnCollapse").style.display="none";
document.getElementById("btnExpand").style.display="inline-block";
}
function showDiv() {
$("#menuContent").show();
}
//刷新
function reFresh(){
//$.get("${ctx}/grid/queryZtree/sys_department",
$.get("${ctx}/grid/queryZtree/sys_department",
function tree(data) {
$.fn.zTree.init($("#connet"), setting, data);
expandNode();
});
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("connet"),
nodes = zTree.getCheckedNodes(true),
v = "";
k = "";
for (var i=0, l=nodes.length; i<l; i++) {
if(!nodes[i].isParent){
v += nodes[i].name + ",";
k += nodes[i].id + ",";
}
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#sendto");
var cityKey = $("#send");
cityObj.attr("value", v);
cityKey.attr("value",k);
}
</script>
- controller
/**
* 获取收件人列表
*/
public void userList() {
User user = this.getSessionAttr(EovaConst.USER);
String userId = user.getStr("id");
List<Record> list = Db.find("SELECT id,dpt_name name,pid from sys_department UNION SELECT id,user_name name, department pid from sys_user where id != 1 and id !=?", userId);
renderJson(list);
}