引入的ztree
<!-- ztree -->
<link rel="stylesheet" href="${rc.contextPath}/platform/plugins/zTree/ztreeStyle.css" type="text/css">
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/common/js/Base64.js"></script>
ztree获取树形菜单
html
<!DOCTYPE html>
<html>
<head>
<#include "/common/header.html"/>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.fra_wrap{
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x:hidden;
position: relative;
box-sizing: border-box;
padding-bottom:60px;
}
.fra_left{
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
border-right: 1px #b9dcf3 solid;
/* padding-left:10px; */
/* float:left; */
}
.fra_right{
width: 50%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
padding-left:10px;
float:left;
}
.fra_wrap .layui-input-inline{
position:absolute;
height:50px;
width:100%;
left:0;
bottom:0;
z-index:99;
text-align:center;
}
</style>
</head>
<body>
<div class="fra_wrap">
<div class="fra_left">
<div class="system_wrap">
<ul id="orgDeptTree" class="ztree"></ul>
</div>
</div>
</div>
<div>
<input type="hidden" id="userFlag" value="${userFlag!''}">
</div>
<script type="text/javascript" src="${rc.contextPath}/view/select/js/showPartyOrgSelectMp.js" charset="utf-8"></script>
</body>
</html>
layui初始化ztree
js
var showOrgTree = {
init: function(){
var _self = this;
//利用layui 绘制表单元素
layui.use(['element', 'form', 'laydate', 'layer'], function(){
layui.form.render();
});
_self.initTree();
_self.initEvent();
},
initTree(){
var _self = this;
var setting = {
view: {},
check: {
enable: true
},
data: {
key: {
name: "orgName",
open: "isOpen"
},
simpleData: {
enable: true,
idKey: "pbPartyOrgId",
pIdKey: "lastOrg",
rootPId: null
}
},
check: {
enable: true,
chkboxType: { "Y": "", "N": "" }
},
callback: {
beforeClick: _self.zTreeOnClick
}
};
var userFlag = $("#userFlag").val();
var zNodes = $.getData(CONTEXT_PATH + "/pbPartyOrg/queryPartyOrgList?userFlag="+userFlag,null);
var ztree = $.fn.zTree.init($("#orgDeptTree"), setting, zNodes);
var treeObj = $.fn.zTree.getZTreeObj("orgDeptTree");
treeObj.expandAll(true);
var ids = $.QueryString("ids");
if(!ids == ""){
var orgIds = ids.split(",");
for(var i = 0 ; i<orgIds.length;i++){
var node = treeObj.getNodeByParam("pbPartyOrgId", orgIds[i]);
treeObj.checkNode(node, true, true,false);
}
}
},
initEvent: function(){
var _self = this;
},
zTreeOnClick: function(event, treeId, treeNode){
}
};
$(function(){
showOrgTree.init();
querySelectCallbackData = function () {
var treeObj = $.fn.zTree.getZTreeObj("orgDeptTree");
var treeNodes = treeObj.getCheckedNodes(true);
var idArr = [];
for(i=0,len=treeNodes.length; i<len; i++){
var obj = {};
obj.code = treeNodes[i]["pbPartyOrgId"];
obj.name = treeNodes[i]["orgName"];
idArr.push(obj);
}
return idArr;
}
});
layui模态窗口加载ztree的html
模态窗口的html
<span >当前组织机构:</span>
<!-- <select id="selectOrg">
</select> -->
<input type="text" name="selectOrgName" id="selectOrgName" readOnly="readOnly" size="56" width="120" value="委员会">
<input type="hidden" name="selectOrg" id="selectOrg">
<a href="javascript:void(0)" onclick="openOrgTree();" id="openOrgTree" >选择组织</a>
</div>
js
$(function(){
initData();
});
function initData(){
sex();
nation();
age();
}
function openOrgTree(){
var url = CONTEXT_PATH+"/pbPartyOrg/choicePartyOrg";
/* layer.open({
type: 2,
title: '选择组织机构',
area: ['68%', '66%'],
maxmin: true,
shadeClose: false, //开启遮罩关闭
content:url,
success : function(layero){
},
cancel: function(){
}
});*/
layer.open({
type: 2,
title: "选择组织机构",
maxmin: false,
shadeClose: false, //开启遮罩关闭
area: ['68%', '66%'],
btn: ['确认', '取消'],
content: url,
success: function(layero){
},
yes: function(index, layero){ //如果设定了yes回调,需进行手工关闭
//当点击‘确定’按钮的时候,获取弹出层返回的值
var dataArr = window["layui-layer-iframe" + index].querySelectCallbackData();
if(dataArr.length == 0){
layer.msg("请选择一个组织机构...", {icon: 5});
return false;
}
if(dataArr.length > 1){ //默认单选
layer.msg("只能选择一个组织机构...", {icon: 5});
return false;
}
var _code = "",
_name = "";
for(var i=0,len=dataArr.length; i<len; i++){
_code += dataArr[i]['code'] +",";
_name += dataArr[i]['name'] +",";
}
code = _code.substring(0,_code.length-1);
name = _name.substring(0,_name.length-1);
debugger;
//给input[name='']:text 赋值
$("input[name='selectOrg']:hidden").val(code);
$("input[name='selectOrgName']:text").val(name);
sex(code);
nation(code);
age(code);
layer.close(index);
},
end: function(){ //销毁列表回调方法
},
cancel: function(){ //点击左上角关闭按钮回调方法
}
});
}