easyUI tree 实现定位操作

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@include file="../inc/platform.defines.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE"> 
	
	<link rel="stylesheet" type="text/css" href="<%=resPath %>/css/basestyle.css">
   	<link rel="stylesheet" type="text/css" href="<%=modResPath %>/css/index.css">
   	<link rel="stylesheet" type="text/css" href="<%=modResPath %>/css/cate.css">
    <link rel="stylesheet" type="text/css" href="<%=libResPath %>/easyui/css/easyui.css">
	<%-- <link rel="stylesheet" type="text/css" href="<%=libResPath %>/easyui/css/icon.css"> --%>
    <link rel="stylesheet" type="text/css" href="<%=libResPath %>/easyui/css/demo.css">
	<script type="text/javascript" src="<%=libPath %>/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="<%=libPath %>/jquery.easyui.1.3.5.min.js"></script>
	<script type="text/javascript" src="<%=jsPath %>/easyuivalidate.js"></script>
	<script type="text/javascript" src="<%=libPath %>/easyui-lang-zh_CN.js"></script> 
	<script charset="utf-8" src="/common/plugins/kindeditor-4.1.1/kindeditor.js"></script>
	<script charset="utf-8" src="/common/plugins/kindeditor-4.1.1/lang/zh_CN.js"></script>
	<link rel="stylesheet" href="/common/plugins/kindeditor-4.1.1/themes/default/default.css" />
	<style type="text/css">
		.click_change{
			color:red;
		}
	</style>

<title>国家地区管理</title>
<script type="text/javascript">
<%-- 	function selectRoot(){
		var root=$('#countryTree').tree("getRoot");
		$('#countryTree').tree("select",root.target);
		selectNode=root;
		$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+selectNode.attributes.nationalFlag+'?thumb=75x75" />');
		$('#labelOne').css('display','none');	//把选择的是根节点的所属国家隐藏
		
	} --%>
	var currentNode = {id:"",target:""};//当前节点
	$(document).ready(function(){		
		$('#countryTree').tree({
			url:'<%=path %>/service/rest/platform.system.countryStateService/collection/buildTreeData',
			onClick:function(node){
				setCurrentValue(node);
				//$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+root.attributes.nationalFlag+'?thumb=75x75" />');
				//$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+nationalFlag+'?thumb=75x75" />');
			},
			onLoadSuccess:function(node,data){
				if(currentNode.id == ""){//如果为初始化对象,选择第一个节点
					var firstNode = $('#countryTree').tree("getRoot");
					setCurrentValue(firstNode);
				} else {
					var _node = $('#countryTree').tree('find', currentNode.id);
					setCurrentValue(_node);
				}
			},
			onExpand:function(node){
				setCurrentValue(node);
			},
			onCollapse:function(node){
				setCurrentValue(node);
			},
			lines:true,
			dnd:false//设置为不能拖拽
		});
		
	});
	//显示数据到编辑框
	function showData(node){
		document.getElementById("countryParentName").innerHTML=node.attributes.parentName;
		$('#countryForm').form('load',node.attributes);
	}	
	/**
	*设置当前的值
	*/
	function setCurrentValue(node){
		$("#btn_saveOrAlter").val("修改");
		var chineseName ="";
		if(node.attributes.parentId == "root"){
			$(".tr_noation").hide();//隐藏所属国家
			$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+node.attributes.nationalFlag+'?thumb=75x75" />');//设置国旗
			$("#div").show();
			$(".btn_addup").hide();//隐藏上级
		} else {
			$(".tr_noation").show();//显示所属国家
			$(".btn_addup").show();//隐藏上级
			$(".btn_addequal").show();//隐藏同级
			var flag = true;
			var parent_node = node;
			while(flag){
				parent_node = $('#countryTree').tree('getParent',parent_node.target);
				if(parent_node.attributes == undefined ||  parent_node.attributes.parentId == undefined){
					flag = false;
					break;
				}
				if(parent_node.attributes.parentId == "root"){
					$("#div").hide();
					$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+parent_node.attributes.nationalFlag+'?thumb=75x75" />');//设置国旗
					$("#countryParentName").html(parent_node.attributes.chineseName);//设置国家名称
					chineseName = parent_node.attributes.chineseName;
					falg = false;
					break;
				}
			} 
		}
		$('#countryTree').tree("select",node.target);
		showData(node);
		if(node.attributes.parentId != "root"){
			$("#countryParentName").html(chineseName);
		}
		currentNode.id = node.id;
		currentNode.target = node.target;
	}
	
	
</script>
</head>
<body>
	<!--头部信息条start-->

	<jsp:include page="../inc/platform.head.jsp" />
<!--头部信息end-->
<!--主体start-->
<div id="llayout-center">
<div class="col-main">
   	  <div class="main-wrap">
          <!--当前地址start-->
          <div class=" Currentpage">运营中心 > 系统设置 > 国家地区管理</div>
          <!--当前地址end-->
          <!--数据列表start-->
	          <div class="listdiv_body">
	          	<div class="lsitdiv_body_left">
	          		<ul id="countryTree" class="easyui-tree"></ul>
	          	</div>
	          	<!--easyui控件start-->
	          	<div class="listdiv_body_right">
	          		<div class="option">
	          			<span class="btn_add"></span><a class="btn_add" href="javascript:void(0);" id="btn_add">添加国家</a>
	          			<span class="btn_addup"></span><a class="btn_addup" href="javascript:void(0);" id="btn_addup">添加上级</a>
	          			<span class="btn_addup"></span><a class="btn_addequal" href="javascript:void(0);" id="btn_addequal">添加同级</a>		
	          			<span class="btn_addnext"></span><a class="btn_addnext" href="javascript:void(0);" id="btn_addnext">添加下级</a>	
	          			<span class="btn_del"></span><a class="btn_del" href="javascript:void(0);" id="btn_del">删除</a>
	          		</div>
	          		<form id="countryForm" method="post">
						<table class="tab">
							<tr class="tr_noation">
								<td>
									<label id="labelOne" >所属国家:</label>
								</td>
								<td>
									<label id="countryParentName"></label>
								</td>
							</tr>
							<tr>
								<td>
									<label>
										<span class="red">*</span>中文名称:
									</label>
								</td>
								<td>
									<input type="text" class="input_long easyui-validatebox" id="chineseName" data-options="required:true,validType:['length[1,100]']" name="chineseName" />
								</td>
							</tr>
							<tr>
								<td>
									<label><span class="red">*</span>英文名称:</label>
								</td>
								<td>
									<input type="text" class="input_long easyui-validatebox" id="name" data-options="required:true,validType:['length[1,100]']" name="name" />
								</td>
							</tr>
							<tr>
								<td>
									<label><span class="red">*</span>区号:</label>
								</td>
								<td>
									<input type="text" class="input_long easyui-validatebox" id="phoneCode" data-options="required:true,validType:['integer','length[1,100]'],invalidMessage:'请输入正确的区号'" name="phoneCode" />
									<input type="hidden" class="input_long easyui-validatebox" id="id" name="id">
								</td>
							</tr>
							<tr>
								<td>
									<label><span class="red">*</span>国旗:</label>
								</td>
								<td>
									<span id="showPic"></span>
									<div id="div">
										<input id="addsortname" type="button" name="imgFile" value="上传图片" />
										<input id="scansortname" type="button" value="选择图片" />
									</div>
									<input type="hidden" name="nationalFlag" id="nationalFlag" data-options="required:true,validType:'length[0,32]'">
								</td>
							</tr>
							<tr>
								<td>
									<input type="hidden" name="parentId" id="parentId" value=""/>
					      	    	<input id="countryId" name="id" type="hidden" value=""/>
					      	    </td>
								<td style="text-align: center;" id="note">
									<input type="button" class="button button-pill button-caution" value="保存" id="btn_saveOrAlter" />
								 	<input type="button" id="btn_reset" class="button button-pill" value="取消" />
								 </td>
							</tr>
						</table>
					</form>
	          	</div>
	            <div class="clear"></div>
	            <!--easyui控件end-->
	          </div>
          <!--数据列表end-->
      </div>
    </div>
    <!--左边导航start-->
		<jsp:include page="../inc/platform.left.jsp" />
    <!--左边导航end-->
<div class="clear"></div>
</div>
<!--主体end-->
<!--底部信息start-->
<jsp:include page="../inc/platform.bottom.jsp" />
<!--底部信息end-->
<script>

//上传图片
KindEditor.ready(function(K) {
	var uploadbutton = K.uploadbutton({
		button : K('#addsortname')[0],
		fieldName : 'imgFile',
		url : '<%=path%>/platform/upload_json_p.jsp?owner=country',
		afterUpload : function(data) {
			if (data.error === 0) {
				$('#nationalFlag').val(data.fileId);
				$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+data.fileId+'?thumb=75x75" />');
			} else {
				$.messager.alert('提示',data.message,info);
			}
		},
		afterError : function(str) {
			$.messager.alert('提示','自定义错误信息: ' + str,'err');
		}
	});
	uploadbutton.fileBox.change(function(e) {
		uploadbutton.submit();
	});
	
	var tempContent = K.editor({
		fileManagerJson : '<%=path%>/platform/file_manager_json_p.jsp?owner=country'
	});
	K('#scansortname').click(function() {
		tempContent.loadPlugin('filemanager', function() {
			tempContent.plugin.filemanagerDialog({
				viewType : 'VIEW',
				dirName : 'image',
				clickFn : function(url, title) {
					var temp = url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.'));	//图片ID
					$('#nationalFlag').val(temp);
					$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+temp+'?thumb=75x75" />');
					tempContent.hideDialog();
				}
			});
		});
	});
	
	$('input[name=imgFile]').css('width','72px');
});

//增加国家

$('#btn_add').click(function(){
	clickChange(this);
	$("#nationalFlag").val("");//设置国旗id为空
	$("#btn_saveOrAlter").val("保存");
	$(".tr_noation").hide();//隐藏所属国家
	$('#showPic').html('');//设置国旗为空
	$("#div").show();
	$(".btn_addup").hide();//隐藏上级
	//$(".btn_addequal").hide();//隐藏同级s
	setAddValue("root");//设置值
});

function clickChange($doc){
	$(".click_change").removeClass("click_change");
	$($doc).addClass("click_change");
}
//增加下级
$('#btn_addnext').click(function(){
	$("#btn_saveOrAlter").val("保存");
	if(!isSelectedNode("countryTree")){
		return $.messager.alert('提示','请选择一个节点!');
	}
	clickChange(this);
	$("#nationalFlag").val("");//设置国旗id为空
	var temp_node = getSelecteNode("countryTree");//获得当前节点
	setAddValue(temp_node.attributes.id);//设置值
	if(temp_node.attributes.parentId == "root"){
		$("#countryParentName").html(temp_node.attributes.chineseName);//设置国家名称
		$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+temp_node.attributes.nationalFlag+'?thumb=75x75" />');//设置国旗
		$(".tr_noation").show();//显示所属国家
		$(".btn_addup").show();//隐藏上级
		$(".btn_addequal").show();//隐藏同级
		$("#div").hide();
	} else {
		var parent_node = temp_node;
		while(flag){
			parent_node = $('#countryTree').tree('getParent',parent_node.target);
			if(parent_node.attributes.parentId == undefined){
				flag = false;
				break;
			}
			if(parent_node.attributes.parentId == "root"){
				$('#showPic').html('<img src="<%=path%>/service/rest/tk.File/'+parent_node.attributes.nationalFlag+'?thumb=75x75" />');//设置国旗
				falg = false;
				break;
			}
		} 
	}
});	

//增加上级
$('#btn_addup').click(function(){
	$("#btn_saveOrAlter").val("保存");
	if(!isSelectedNode("countryTree")){
		return $.messager.alert('提示','请选择一个节点!');
	}
	clickChange(this);
	$("#nationalFlag").val("");//设置国旗id为空
	var temp_node = getSelecteNode("countryTree");//获得当前节点
	if(temp_node.attributes.parentId == "root"){
		setCurrentValue(temp_node);
		return $.messager.alert('提示','当前节点不能添加上一级,请重新选择!');
	}
	var temp_parent_node =  $("#countryTree").tree("getParent",temp_node.target);//获得当前节点的父节点
	setAddValue(temp_parent_node.attributes.parentId);//设置值
	if(temp_parent_node.attributes.parentId == "root"){
		$(".tr_noation").hide();//隐藏所属国家
		$('#showPic').html('');//设置国旗为空
		$("#div").show();
	} else {
		$(".tr_noation").show();//显示所属国家
		$(".btn_addup").show();//隐藏上级
		$(".btn_addequal").show();//隐藏同级
		$("#div").hide();
		var flag = true;
		var parent_node = temp_node;
		while(flag){
			parent_node = $('#countryTree').tree('getParent',parent_node.target);
			if(parent_node.attributes.parentId == undefined){
				flag = false;
				break;
			}
			if(parent_node.attributes.parentId == "root"){
				$("#countryParentName").html(parent_node.attributes.chineseName);//设置国家名称
				falg = false;
				break;
			}
		} 
	}
});

//增加同级
$('#btn_addequal').click(function(){
	$("#btn_saveOrAlter").val("保存");
	if(!isSelectedNode("countryTree")){
		return $.messager.alert('提示','请选择一个节点!');
	}
	clickChange(this);
	$("#nationalFlag").val("");//设置国旗id为空
	var temp_node = getSelecteNode("countryTree");//获得当前节点
	setAddValue(temp_node.attributes.parentId);//设置值
	if(temp_node.attributes.parentId == "root"){
		$(".tr_noation").hide();//隐藏所属国家
		$('#showPic').html('');//设置国旗
		$("#div").show();
		$(".btn_addup").hide();//隐藏上级
	} else {
		$(".tr_noation").show();//显示所属国家
		$(".btn_addup").show();//隐藏上级
		$(".btn_addequal").show();//隐藏同级
		$("#div").hide();
		var flag = true;
		var parent_node = temp_node;
		while(flag){
			parent_node = $('#countryTree').tree('getParent',parent_node.target);
			if(parent_node.attributes.parentId == undefined){
				flag = false;
				break;
			}
			if(parent_node.attributes.parentId == "root"){
				$("#countryParentName").html(parent_node.attributes.chineseName);//设置国家名称
				falg = false;
				break;
			}
		} 
	}
});

function setAddValue(parent_id){
	$("#parentId").val(parent_id);//设置父id为当前节点的父id
	$("#countryId").val("");//设置id为空
	$("#chineseName").val("");//设置中文名为空
	$("#name").val("");//设置英文名为空
	$("#phoneCode").val("");//设置区号为空
}
/**
 * 判断当前是否选中节点
 */
function isSelectedNode(tree_id){
	var current = $('#'+tree_id).tree('getSelected');
	if(current == undefined || current == null){
		 return false;
	}
	return true;
}
/**
 * 获得当前选中节点
 */
function getSelecteNode(tree_id){
	return $('#'+tree_id).tree('getSelected');
}

//删除
 $('#btn_del').click(function(){
	 if(!isSelectedNode("countryTree")){
		return $.messager.alert('提示','请选择要删除的数据!');
	 }
	 var isLeaf = $('#countryTree').tree('isLeaf',$('#countryTree').tree('getSelected').target);//获得选中节点并判断
	 if(!isLeaf){
		 return $.messager.alert('提示','该数据包含下一级,请先删除!');
	 }
	 $.messager.confirm("提示", "确定要删除‘"+getSelecteNode("countryTree").text+"’吗?", function(isconfirm){
		if (isconfirm){
			var id = document.getElementById("countryId").value;
			var _node = $('#countryTree').tree('find', id);
			var parent_node = $('#countryTree').tree('getParent',_node.target);//获得父节点
			var url = '<%=path %>/service/rest/platform.system.countryStateService/collection/delete';
			$.postExtend(url,{id:id},function(result){
				if(result.code == 1){
					//如果父节点不存在
					if(parent_node == undefined || parent_node == null){
						currentNode.id = "";
						currentNode.target ="";
						$('#countryTree').tree('reload');//重新加载所有的树 
					} else {
						currentNode.id = parent_node.id;
						currentNode.target = parent_node.target;
						$('#countryTree').tree('reload');//重新加载父节点
					}
					$.messager.alert('提示', "操作成功!");	//操作成功
				}else{
					$.messager.alert('提示', result.description);	//异常提示
				}
				$(".click_change").removeClass("click_change");
			});
		}
	});
}); 

$('#btn_reset').click(function(){
	currentNode = {id:"",target:""};//重置的时候设置当前节点的值
	$('#countryTree').tree('reload');
});

function reload(){
	var node = $('#countryTree').tree('getSelected');
	if(node){
		$('#countryTree').tree('reload', node.target); 
	}else{
		$('#countryTree').tree('reload'); 
	}
}


//保存
$('#btn_saveOrAlter').click(function(){
	var nationalFlag = $('#nationalFlag').val();
	if($('#countryForm').form('validate')){
		var id = document.getElementById("countryId").value;//获得当前id
		var parentId = document.getElementById("parentId").value;//获得父节点id
		if(id == ""){
			url = '';
		} else {
			url = '';
		}
		var params = $('#countryForm').serialize();
		$.postExtend(url,params,function(result){
			if(result.code == 1){
				if(id == ""){
					currentNode.id = result.description;
					currentNode.target = "";
					if(parentId == "root"){
						$('#countryTree').tree('reload');
					} else {
						$('#countryTree').tree('reload');
					}
				} else {
					var temp_node = getSelecteNode("countryTree");
					currentNode.id = temp_node.id;
					currentNode.target = temp_node.target;
					$('#countryTree').tree('reload');
				}
				$.messager.alert('提示',"操作成功",'info');
			}
			if(result.code == 9){
				$.messager.alert('提示',result.description,'info');
			}
		});
	}
	
});


//重置表单
function reset(){
	document.getElementById("countryForm").reset();
	$('#countryParentId').val('');
	$('#countryId').val('');
}
</script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
公众号推荐
   一个历史类的公众号,欢迎关注
一两拨千金