<%@page trimDirectiveWhitespaces="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="gen" uri="http://help.jspgen.com/taglib/jstl"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<title>区域</title>
<!-- ZTree树形插件 -->
<link type="text/css" href="${config.statie}js/ztree/images/ztree.css" rel="stylesheet">
<!-- 当前页面 -->
<link type="text/css" href="${config.statie}ui/admin/images/admin.css" rel="stylesheet">
<style type="text/css">
.ztree * {font-size:12px; line-height:20px;}
.ztree li ul.level0 {padding:0; background:none;}
.ztree li span.level0.btn {display:none;}
.ztree li a.curSelectedNode{background:#F7FCFE; color:#278BF2;}
/*.ztree li a.level0.curSelectedNode{background:none; color:#7E7E7E;}*/
.ztree li a.tmpTargetNode_inner {background-color:#F7FCFE; color:#278BF2; border:1px #278BF2 solid;}
ul.tmpTargetzTree {background:none;}
ul.ztree.zTreeDragUL {background-color:#F7FCFE; color:#278BF2; border:1px #278BF2 dotted;}

.area-left{background:none;}
.area-left .tree{margin:5px;}
</style>
</head>
<body>
<div id="wrapper">
  <input id="ids" name="ids" type="hidden" value="${param.ids}" />
  <input id="names" name="names" type="hidden" value="${param.names}" />
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  	<tr>
      <td width="12%" valign="top" class="area-left"><ul id="tree" class="ztree tree"></ul></td>
    </tr>
  </table>
</div>
<!-- 必备插件 -->
<script type="text/javascript" src="${config.statie}js/jquery.js"></script>
<script type="text/javascript" src="${config.statie}js/jquery.grapes.js"></script>
<!-- 弹窗插件 -->
<script type="text/javascript" src="${config.statie}js/dialog/jquery.dialog.js?self=true"></script>
<script type="text/javascript" src="${config.statie}js/dialog/jquery.dialog.plugins.js"></script>
<!-- ZTree树形插件 -->
<script type="text/javascript" src="${config.statie}js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${config.statie}js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${config.statie}js/ztree/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="${config.statie}js/ztree/jquery.ztree.exedit-3.5.js"></script>
<!-- UI界面必备 -->
<script type="text/javascript" src="${config.statie}ui/js/jspgen.js"></script>
<script type="text/javascript" src="${config.statie}ui/js/jspgen.ajax.js"></script>
<script type="text/javascript" src="${config.statie}ui/js/jspgen.ready.js"></script>
<!-- 当前页面 -->
<script type="text/javascript" src="${config.statie}ui/admin/js/tree-icon.js"></script>
<script type="text/javascript" src="${config.statie}ui/admin/js/tree-area-choose.js"></script>
<script type="text/javascript">
// document.domain = "baidu.com";

// 调用
$(document).ready(function(){
	var treeId = 'tree';
	<gen:if test="${not empty tree}">
	createTree(treeId, '${tree.id}', '${tree.name}', $('#ids').prop('value'), '${param.id}', '${param.radio}', '${param.pcheck}');
	<gen:else />
	createTree(treeId, '0', '区域列表', $('#ids').prop('value'), '${param.id}', '${param.radio}', '${param.pcheck}');
	</gen:if>
	/*
	// 选择
	$('.table').on('click', 'td', function () {
		$dialogApi.callback({ids:$(this).prop('id'), names:$('#names').prop('value')});
		$dialogApi.close();
	});
	*/
	
	// 确定按钮(批量)
	$dialogApi.button({id:'valueOk', name:'确定', callback:ok});
	function ok() {
		console.log($('#ids').attr('value')+'XXX'+$('#names').attr('value'));
		$dialogApi.callback({ids:$('#ids').attr('value'), names:$('#names').attr('value')});
		$dialogApi.close();
	}
});

// 节点赋值
function putNode(node, nodes){
	var separator = ',';
	var ids = new Array(), names = new Array();
	nodes.sort(function compare(a,b){return a.id-b.id;});
	for (var i=0; i<nodes.length; i++) {
		ids.push(nodes[i].id);
		names.push(nodes[i].name); //names.push(nodes[i].display);
	}
	
	// id = node.id;
	$('#ids').prop('value', ids.join(separator));
	$('#names').prop('value', names.join(separator));
}
</script>
</body>
</html>