layui模态窗口加载ztree树形菜单

引入的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

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>

$(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(){ 	//点击左上角关闭按钮回调方法
   
     	}
     	
     });

}

layui模态窗口加载ztree树形菜单

猜你喜欢