<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" href="../resource/css/pintuer.css">
<link rel="stylesheet" href="../resource/css/admin.css">
<link rel="stylesheet" href="../resource/css/style.css">
<link rel="stylesheet" href="../resource/js/kindeditor/themes/default/default.css" />
<script type="text/javascript" src="../resource/js/jquery.js"></script>
<script type="text/javascript" src="../resource/js/pintuer.js"></script>
<script type="text/javascript" src="../resource/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../resource/js/tagsinput/jquery.tagsinput.js"></script>
<script type="text/javascript" src="../resource/js/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../resource/js/utils.js"></script>
<!-- <script type="text/javascript" src="../resource/js/util_tab.js"></script> -->
<script type="text/javascript" src="../resource/js/json2.js"></script>
<script charset="utf-8" src="../resource/js/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="../resource/js/kindeditor/lang/zh-CN.js"></script>
</head>
<body>
<!-- 用来动态的显示滚动条 -->
<div class="easyui-panel panel-body panel-body-noheader" style="padding: 5px; 298px; height: 648px;">
<!-- 用来显示加载的树 -->
<ul id="tt"></ul>
</div>
<!-- 用来在右侧显示详细的节点数据， class="iframe-admin" 使用的是已经写好的样式-->
<div class="iframe-admin">
<div class="panel-head clearfix lh30">
<strong class="icon-reorder"> 组织机构管理</strong>
<a class="button border-main icon-plus-square-o small-btn pull-right" href="javascript:goAdd()"> +添加信息</a>
<a class="button border-main icon-plus-square-o small-btn pull-right" href="javascript:del()"> -删除信息</a>
</div>
<!-- 用来显示div,显示要添加的数据 -->
<div id="codeAdd" style="margin-top:20px;100%;display:none;border:1px solid;border-color:#ccccff;height: 85%;padding-top: 70px">
<form id="addForm" method="post" class="form-x" >
<table class="form_table" style="height: 80%" >
<tr>
<td class="label-title" style=" 280px"><label for=""><span class="text-red">*</span>组织机构名称：</label></td>
<td>
<div class="form-group">
<div class="field"> <input type="text" name="orgName" id="orgName" class="input w260"
maxlength="100" data-validate="required:请输入功能名称" /></div>
</div>
</td>
<td class="label-title"><label for=""><span class="text-red">*</span>上级名称：</label></td>
<td>
<div class="form-group">
<div class="field" style="font-size: 14px; 260px" >
<span id="pname"></span>
</div>
</div>
</td>
</tr>
<tr>
<td class="label-title"><label for=""><span class="text-red">*</span>相关描述：</label></td>
<td>
<div class="form-group">
<div class="field"> <input type="text" name="describes" id="describes" class="input w260"
maxlength="500" value="" /></div>
</div>
</td>
<td class="label-title"><label for=""><span class="text-red">*</span>创建人员：</label></td>
<td>
<div class="form-group">
<div id="crtoper" class="field" style="font-size: 14px; 260px" ></div>
</div>
</td>
</tr>
<tr>
<td>
<!-- 这里的信息是被选中节点的信息 -->
<input type="hidden" name="pId" id="pId"><!-- 上级id -->
<input type="hidden" name="id" id="id"><!-- 主键 -->
</td>
</tr>
<tr>
<td></td>
<td>
<button class="button bg-main icon-check-square-o" type="button" onclick="save()"> 保存</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
//标记是修改还是添加
var flag=null;
$("#tt").tree({
url:'${ctx}/org/findTreeDate.do?id=0',
lines:true,//显示加减号
animate:true, //动画效果
//展开前加载子节点
onBeforeExpand:function(node){
$("#tt").tree("options").url="${ctx}/org/findTreeDate.do?id="+node.id;
},
//当节点被选中的时候将节点的详细信息显示在右侧div中
onSelect:function(node){
clear();
$("#codeAdd").css("display","");
$("#id").val(node.id);
$("#orgName").val(node.text);
$("#describes").val(node.attributes.describes);
$("#pId").val(node.attributes.pId);
if(node.attributes.pId!='0'&&$.trim(node.attributes.pId)!=""){
$("#pname").html(node.attributes.pname);
}else{
$("#pname").html("没有上级节点");
}
$("#crtoper").html(node.attributes.crtoper);
flag="update";
}
});
//进行信息的添加
function goAdd(){
//先清空表格内信息
clear();
//在添加子节点之前先展开选中的节点
var selected = $('#tt').tree('getSelected');
if(selected==null){
$("#pId").val("0");
$("#pname").html("没有上级节点");
}else{
$("#pId").val(selected.id);
$("#pname").html(selected.text);
}
//显示添加信息的div
if($("#codeAdd").css("display")=="none"){
$("#codeAdd").css("display","");
}
//标记为设置为添加
flag="add";
}
//删除指定的节点和子节点
function del(){
var note=$("#tt").tree("getSelected");
if(note==null){
$.messager.alert('提示','请选择要删除的信息！');
return;
}
$.messager.confirm('提示', '确定要删除吗？',function(r){
if(r){
var args={"id":note.id};
var url="${ctx}/org/delete.do";
$.post(url,args,function(data){
if(data.success==true){
flushTree(); //刷新树
$("#codeAdd").css("display","none");
}
$.messager.show({
title: '提示信息',
msg: data.message,
timeout: 3000
})
});
}else{
return;
}
});
}
//刷新树
function flushTree(){
//更新整个树
$('#tt').tree({
url:'${ctx}/org/findTreeDate.do?id=0',
lines:true,//显示加减号
animate:true,//动画效果
});
}
//清空数据
function clear(){
$("#id").val("");
$("#orgName").val("");
$("#pId").val("");
$("#pname").empty();
$("#describes").val("");
$("#crtoper").empty();
}
//将信息保存
function save(){
if($("#orgName").val().trim()==""){
$.messager.alert('提示','请输入组织机构名称！');
return;
}
var orgName=$("#orgName").val();
var describes=$("#describes").val();
var pId=$("#pId").val();
$.messager.confirm('提示', '确定要保存吗？',function(r){
if(r){
if(flag=="update"){
var id=$("#id").val();
var args={"id":id,"orgName":orgName,"describes":describes,"pId":pId};
var url="${ctx}/org/update.do";
$.post(url,args,function(data){
if(data.success==true){
$("#codeAdd").css("display","none");
flushTree(); //刷新树
}
$.messager.show({
title: '提示信息',
msg: data.message,
timeout: 3000
})
});
return;
}
var args={"pId":pId,"orgName":orgName,"describes":describes};
var url="${ctx}/org/add.do";
$.post(url,args,function(data){
if(data.success==true){
$("#codeAdd").css("display","none");
flushTree(); //刷新树
}
$.messager.show({
title: '提示信息',
msg: data.message,
timeout: 3000
})
});
}
});
}
</script>
</body>
</html>