easyUI tree 实现定位操作

时间：2022-12-08 15:20:21
<%@ 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>

标签：

相关文章