<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon" />
<link href="sys/css/sort/bootstrap.min.css" th:href="@{/static/sys/css/sort/bootstrap.min.css}" rel="stylesheet"/>
<link href="sys/css/zTree/zTreeStyle.css" th:href="@{/static/sys/css/zTree/zTreeStyle.css}" rel="stylesheet"/>
<script src="js/jquery-2.2.4.min.js" th:src="@{/static/js/jquery-2.2.4.min.js}"></script>
<script src="sys/js/zTree/jquery.ztree.core-3.5.js" th:src="@{/static/sys/js/zTree/jquery.ztree.core-3.5.js}"></script>
<style type="text/css">

</style>
</head>

<body>
	<div class="container-fluid">
		<form name="queryForm" id="queryForm" th:action="@{/sys/sort/childrenList.html(id=${id})}" method="post">
			<div class="row" style="margin-top:5px;">
				<div class="col-xs-12">
					<button type="button" class="btn btn-info" onclick="javascript:refreshFrame();return false;"><i class="icon icon-refresh"></i> 刷新</button>&nbsp;
					<button type="button" class="btn btn-info" onclick="javascript:openAllNode(true);return false;"><i class="icon icon-folder-open"></i> 展开</button>&nbsp;
					<button type="button" class="btn btn-info" onclick="javascript:openAllNode(false);return false;"><i class="icon icon-folder-close"></i> 收起</button>&nbsp;
					<button type="button" class="btn btn-primary btnEdit btnAdd" onclick="javascript:editFrame(0);return false;" disabled><i class="icon icon-plus-sign"></i> 新增子节点</button>&nbsp;
					<button type="button" class="btn btn-primary btnEdit btnSave" onclick="javascript:editFrame(1);return false;" disabled><i class="icon icon-edit"></i> 修改</button>&nbsp;
					<button type="button" class="btn btn-danger btnEdit btnDel" onclick="javascript:delFrame();return false;" disabled><i class="icon icon-minus-sign"></i> 删除</button>&nbsp;
					<button type="button" class="btn btn-primary  btnSort" onclick="javascript:backFrame();return false;" ><i class="icon icon-sort-by-attributes"></i> 返回</button>
					<button type="button" class="btn btn-primary btnEdit btnSort" id="btnSort" onclick="javascript:sortFrame();return false;" disabled><i class="icon icon-sort-by-attributes"></i> 排序</button>
				</div>
			</div>
			
			<div class="row" style="margin-top:5px;">
				<div class="col-xs-6" style="background-color:#FFF;">
					<div class="row" id="treeDiv" style="overflow:auto;">
						<div id="typeTree" class="ztree">
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<iframe name="rightFrame" id="rightFrame" th:src="@{/sys/sort/childrenAdd.html(edit=0)}" width="100%" height="360px" frameborder="0"></iframe>
				</div>
			</div>
		</form>
	</div>
</body>
 <script type="text/javascript">
var treeObj;
var currentNode = null; //当前节点
$(function(){
	initWindow();
	showTree(); //显示树
});

/*
 * ztree基本配置
 */
 var setting = {
			data : {
				simpleData : {
					enable : true,
					idKey:"id",
					pIdKey:"pid"
				}
			},
			view : {
				expandSpeed : "",
				addDiyDom: addDiyDom
			},
			callback : {
				onClick: onNodeClick
			}
};

 function addDiyDom(treeId, treeNode) {
	 if(!treeNode.isParent){//说明没子节点
		 var aObj = $("#" + treeNode.tId );
	     if(treeNode.ishot==1){
			aObj.append("<span style='color:red;'>[热门]</span>别名：").append(treeNode.aliases);
	     }else{
	    	 aObj.append("<span style='color:#00FF00;'>[普通]</span>别名：").append(treeNode.aliases);
	     }
			
	 }
 }

/**
 * 显示"树"
 */
function showTree(){
	
	
	var url ='[[${sysUrl}]]/sys/sort/getSortList';
	 var params = {'id' : '[[${id}]]'} ;
	$.post(url,params,function(data){
		var typeTree = $("#typeTree");
		typeTree.empty();
		treeObj=$.fn.zTree.init(typeTree, setting, data);
		treeObj.expandAll(true);
	});
	
}

/**
 * 响应单击树节点事件
 */
function onNodeClick(event, treeId, treeNode) {
	currentNode = treeNode; //当前节点
	if(currentNode.pid <= 0){//等级目录
		$(".btnEdit").attr("disabled", true);
		$(".btnAdd").attr("disabled", false);
	}else{
		$(".btnEdit").attr("disabled", false);
		if(currentNode.isParent){//说明有子节点
			$(".btnDel").attr("disabled", true);
		}
	}
	
	if(!currentNode.isParent){
		$("#btnSort").attr("disabled", true);
	}else{
		$("#btnSort").attr("disabled", false);
	}
	
	var src ='[[${sysUrl}]]/sys/sort/childrenAdd?edit=0';
	if($("#rightFrame").attr("src") != src){
		$("#rightFrame").attr("src", src);
	} 
}

/**
 * 全部展开/折叠
 * @param fag:true-全部展开,false-全部折叠
 */
function openAllNode(flag){
	treeObj.expandAll(flag);
}


//增加    0   修改  1
function editFrame(editType){
	var id =0;
	var pid =currentNode.pid;
	if(editType == 1){
		id = currentNode.id;
	}else{
		pid =currentNode.id;
	}
	var src = '[[${sysUrl}]]/sys/sort/childrenAdd?edit=1&id='+id+'&pid='+pid;
	$("#rightFrame").attr("src", src);
}

//修改当前节点名称
function updateCurrentNode(name){
	currentNode.name = name;
	treeObj.updateNode(currentNode);
	$("#rightFrame").attr("src", ctx + "[[${sysUrl}]]/sys/sort/childrenAdd?edit=0");
}

//在当前节点下添加新节点
function addNode(newNodes){
	/*var pNode = null;
	if(newNodes.pId == currentNode.id){
		pNode = currentNode;
	}*/
	var pNode = currentNode;
	treeObj.addNodes(pNode, newNodes);
	$("#rightFrame").attr("src", '[[${sysUrl}]]/sys/sort/childrenAdd?edit=0');
}

//删除节点
function delFrame(){
	if(currentNode == null){
		parent.layer.msg("请选择需要删除的记录",{icon:11});
		return;
	}
	var id = currentNode.id;
	deleteSort(id);
}


function deleteSort(id){
	parent.layer.confirm("删除该记录将自动删除其子节点对应的记录,您确定要删除该记录吗?",
			{icon: 4, btn: ['确定','取消']
	}, function(){
		$.ajax({
			url: '[[${sysUrl}]]/sys/sort/deleteSort',
			type: "post",
			data:{
				'id': id
			},
			dataType: "json",
			success:function(data){
				if (data.meta.success) {
					parent.layer.msg("删除成功",{icon: 1});
					treeObj.removeNode(currentNode);
					currentNode = null;
					$(".btnEdit").attr("disabled", true);
			    }else{
			    	parent.layer.msg(data.msg,{icon: 11});
			    }
			}
		});
	});
}



function initWindow(){
	var bodyHeight = $(window).height();
	$("#treeDiv").height(bodyHeight-50);
	$("#rightFrame").height(bodyHeight-53);
}

/**
 * 刷新
 */
function refreshFrame(){
	queryForm.submit();
}


function backFrame(){
	window.location.href ='[[${sysUrl}]]/sys/sort/list.html';
}

/**
 * 排序
 */
function sortFrame(){
	if(!currentNode.isParent){
		return false;
	}
	 parent.layer.open({
		    type: 2,
		    title: "排序设置",
		    closeBtn: 1, //不显示关闭按钮
		    shift: 2,
		    offset: '100px',
		    area: ['500px', '400px'],
		    content: '[[${sysUrl}]]/sys/sort/childrenSort?pid='+currentNode.id
		});
	 
}
 </script>
</HTML>