|
|
<%@page language="java" contentType="text/html;charset=utf-8" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<%
|
|
|
String path = request.getContextPath();
|
|
|
String basePath = request.getScheme() + "://"
|
|
|
+ request.getServerName() + ":" + request.getServerPort()
|
|
|
+ path + "/";
|
|
|
%>
|
|
|
|
|
|
<!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">
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
|
|
|
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/select2-4.0.3.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
|
|
|
<script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
|
|
|
<script src="<%=basePath %>/js/unicorn.js"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
|
|
|
type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
|
|
|
type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
|
|
|
type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
|
|
|
type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
|
|
|
type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
|
|
|
type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
|
|
|
<script src="<%=basePath%>js/select2-4.0.3.min.js"></script>
|
|
|
<script src="<%=basePath %>js/jstree/jstree.min.js"></script>
|
|
|
<script src="<%=basePath %>js/jquery.toaster.js"></script>
|
|
|
<script src="<%=basePath %>js/bootstrap-plugin/treegrid/js/issueTreeGrid.js"></script>
|
|
|
<script>
|
|
|
var contextPath = '<%=basePath %>';
|
|
|
</script>
|
|
|
<title>YOHO!运维</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<!-- 头部 -->
|
|
|
<div id="head">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 右侧具体内容 -->
|
|
|
<div id="content">
|
|
|
|
|
|
|
|
|
<div id="breadcrumb">
|
|
|
<a href="#" title="Go to Home" class="tip-bottom"><i
|
|
|
class="icon-home"></i> Home</a> <a href="#" class="current">标签</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
<div class="widget-box">
|
|
|
<div class="widget-title">
|
|
|
<h5>标签操作</h5>
|
|
|
</div>
|
|
|
<div class="widget-content nopadding">
|
|
|
<div class="widget-title" style="height: 53px;margin-top: 12px;">
|
|
|
<div class="form-inline" role="form" id="inBoxQueryDiv">
|
|
|
<div class="input-group" style="float: left;margin-left: 5px">
|
|
|
<span class="input-group-addon">tag关键字:</span>
|
|
|
<input type="text" id="searchContent" class="form-control" placeholder="" />
|
|
|
</div>
|
|
|
|
|
|
<div class="input-group" style="float: left;margin-left: 5px">
|
|
|
<span class="input-group-addon">所属类别:</span>
|
|
|
<select id="tagType" class="form-control">
|
|
|
<option value="">全部</option>
|
|
|
<c:forEach var="tagType" items="${tagTypeList}" varStatus="index">
|
|
|
<option value="${tagType.val}">${tagType.desc}</option>
|
|
|
</c:forEach>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
<button id="btnSearch" class="btn btn-primary" style="margin-left: 10px" onclick="btnSearch()">
|
|
|
搜 索
|
|
|
</button>
|
|
|
|
|
|
<a href="#" id="addHostGroup" class="btn btn-success" style="margin-left: 0px;" onclick="editHostGroup(0,0)">新增标签</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="hostGroupTable">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 新增子标签 -->
|
|
|
<div class="modal fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
|
aria-hidden="true">×</button>
|
|
|
<h4 class="modal-title" id="myModalSecondLabel"></h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="hostGroupForm_second" class="form-horizontal">
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>标签名称:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" name="editGroupName_second"
|
|
|
placeholder="输入标签名称" maxlength="30" size="40"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<input type="hidden" name="tagType_second"/>
|
|
|
<input type="hidden" name="pid_second"/>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label">备注:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" name="editDescr_second"
|
|
|
placeholder="" maxlength="30" size="40"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> </label>
|
|
|
|
|
|
<div class="col-sm-8" id="messageAlert"></div>
|
|
|
</div>
|
|
|
<input type="hidden" name="editGroupId"/>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
|
|
|
<button type="button" class="btn btn-success" value="Validate" onclick="saveSecondHostGroup()">提交</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- /.modal-content -->
|
|
|
</div>
|
|
|
<!-- /.modal -->
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
|
aria-hidden="true">×</button>
|
|
|
<h4 class="modal-title" id="myModalLabel"></h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="hostGroupForm" class="form-horizontal">
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>标签名称:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" id="editGroupName" name="editGroupName"
|
|
|
placeholder="输入标签名称" maxlength="30" size="40"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>所属类型:</label>
|
|
|
<div class="col-sm-8">
|
|
|
<select id="model_tagType" class="form-control" style="width:285px" onchange="refreshTagsByType();">
|
|
|
<c:forEach var="tagType" items="${tagTypeList}" varStatus="index">
|
|
|
<option value="${tagType.val}">${tagType.desc}</option>
|
|
|
</c:forEach>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label">父标签:</label>
|
|
|
<div class="col-sm-8" id="parentTagDiv">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label">备注:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" id="editDescr" name="editDescr"
|
|
|
placeholder="" maxlength="30" size="40"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> </label>
|
|
|
|
|
|
<div class="col-sm-8" id="messageAlert"></div>
|
|
|
</div>
|
|
|
<input type="hidden" name="editGroupId"/>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
|
|
|
<button type="button" class="btn btn-success" value="Validate" onclick="saveHostGroup()">提交</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- /.modal-content -->
|
|
|
</div>
|
|
|
<!-- /.modal -->
|
|
|
</div>
|
|
|
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
$("#li_host").addClass("active open");
|
|
|
$("#li_hostGroupList").addClass("active");
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
<script>
|
|
|
var tagTypes = eval(${tagTypeMapJson});
|
|
|
|
|
|
function refreshTagsByType(parentId,tagTypeTmp){
|
|
|
$("#parentTagDiv").html("");
|
|
|
var tagType=$("#model_tagType").val();
|
|
|
if(tagTypeTmp!=null&&tagTypeTmp!=""){
|
|
|
tagType=tagTypeTmp;
|
|
|
}
|
|
|
$.ajax({
|
|
|
url : contextPath +"hostInfoList/getHostTagsByType?type="+tagType,
|
|
|
type : 'post',
|
|
|
async : false,
|
|
|
dataType : "json",
|
|
|
success : function(respone) {
|
|
|
var selectHtml='<select id="parentTag" class="form-control" style="width:285px" >';
|
|
|
selectHtml += '<option value="">---------</option>';
|
|
|
for(var jj=0;jj<respone.data.length;jj++){
|
|
|
selectHtml += '<option ';
|
|
|
if(parentId>0&&parentId==respone.data[jj].id){
|
|
|
selectHtml += ' selected=true ';
|
|
|
}
|
|
|
selectHtml += ' value="'+respone.data[jj].id +'">'+ respone.data[jj].text+'</option>';
|
|
|
}
|
|
|
selectHtml += '</select>';
|
|
|
console.log(selectHtml);
|
|
|
$("#parentTagDiv").html(selectHtml);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function createTreeGrid(e){
|
|
|
var config = {
|
|
|
id : "id",
|
|
|
width : "800",
|
|
|
renderTo : "hostGroupTable",
|
|
|
headerAlign : "left",
|
|
|
headerHeight : "30",
|
|
|
dataAlign : "left",
|
|
|
indentation : "20",
|
|
|
folderOpenIcon : contextPath + "img/treegrid/collapse.png",
|
|
|
folderCloseIcon : contextPath + "img/treegrid/collapse.png",
|
|
|
defaultLeafIcon : contextPath + "img/treegrid/expand.png",
|
|
|
hoverRowBackground : "false",
|
|
|
folderColumnIndex : "1",
|
|
|
itemClick : "itemClickEvent",
|
|
|
columns : [
|
|
|
{
|
|
|
headerText : "归属类别",
|
|
|
dataField : "tagType",
|
|
|
headerAlign : "center",
|
|
|
width : "20%"
|
|
|
}, {
|
|
|
headerText : "名称",
|
|
|
dataField : "groupName",
|
|
|
headerAlign : "center",
|
|
|
width : "30%"
|
|
|
}, {
|
|
|
headerText : "备注",
|
|
|
dataField : "descr",
|
|
|
headerAlign : "center",
|
|
|
dataAlign : "center",
|
|
|
width : "30%"
|
|
|
}, {
|
|
|
headerText : "操作",
|
|
|
headerAlign : "center",
|
|
|
dataAlign : "center",
|
|
|
width : "20%"
|
|
|
}],
|
|
|
data : e
|
|
|
};
|
|
|
|
|
|
//创建一个组件对象
|
|
|
var treeGrid = new TreeGrid(config);
|
|
|
treeGrid.show();
|
|
|
|
|
|
var TAG = "N";
|
|
|
$("#hostGroupTable").find("tr").each(function(i, e){
|
|
|
var id = $(e).attr('id');
|
|
|
var pid = $(e).attr('data-pid');
|
|
|
$(e).attr('data-open', TAG);
|
|
|
if(id != undefined && pid == 0){
|
|
|
showHiddenNode(id, TAG);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
$(function () {
|
|
|
//加载表格
|
|
|
btnSearch();
|
|
|
});
|
|
|
|
|
|
function btnSearch(){
|
|
|
$("#hostGroupTable").empty();
|
|
|
var content = $.trim($("#searchContent").val());
|
|
|
$.ajax({
|
|
|
type: 'post',
|
|
|
url: "getHostGroupsWithTreegrid.do",
|
|
|
data: {'searchContent': content,'tagTypeContent':$.trim($("#tagType").val())},
|
|
|
dataType: 'json',
|
|
|
success: function (resp) {
|
|
|
createTreeGrid(resp.data);
|
|
|
},
|
|
|
error: function (resp) {
|
|
|
localAlert('系统异常', data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//新增子标签
|
|
|
function editHostGroupForChildren(pid,tagType){
|
|
|
$("input[name='editGroupName_second']").val("");
|
|
|
$("input[name='editDescr_second']").val("");
|
|
|
$("input[name='pid_second']").val(pid);
|
|
|
$("input[name='tagType_second']").val(tagType);
|
|
|
$("#myModalSecondLabel").text("新增子标签信息");
|
|
|
$("#mySecondModal").modal('show');
|
|
|
}
|
|
|
//打开新增或修改页面
|
|
|
function editHostGroup(id, pid,groupName,tagType,descr) {
|
|
|
refreshTagsByType(pid,tagType);
|
|
|
|
|
|
$("#hostGroupForm #messageAlert").hide();
|
|
|
if (id == 0) {//新增页面
|
|
|
$("input[name='editGroupId']").val(0);
|
|
|
$("input[name='editGroupName']").val("");
|
|
|
$("input[name='editDescr']").val("");
|
|
|
|
|
|
$("#myModalLabel").text("新增标签信息");
|
|
|
} else {
|
|
|
$("#myModalLabel").text("修改标签信息");
|
|
|
$("input[name='editGroupId']").val(id);
|
|
|
$("input[name='editGroupName']").val(groupName);
|
|
|
$("input[name='editDescr']").val(descr);
|
|
|
$("#model_tagType").val(tagType);
|
|
|
}
|
|
|
$("#myModal").modal('show');
|
|
|
}
|
|
|
|
|
|
function saveSecondHostGroup(){
|
|
|
var groupName = $("input[name='editGroupName_second']").val();
|
|
|
if (groupName == null || groupName == "") {
|
|
|
$("#hostGroupForm #messageAlert").alerts({
|
|
|
content: "请输入标签名称!",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
var tagType =$("input[name='tagType_second']").val();
|
|
|
var pid =$("input[name='pid_second']").val();
|
|
|
|
|
|
var param = {
|
|
|
id: 0,
|
|
|
tagType:tagType,
|
|
|
pid:pid,
|
|
|
descr:$("input[name='editDescr_second']").val(),
|
|
|
groupName: groupName
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: 'post',
|
|
|
url: "saveHostGroup.do",
|
|
|
data: param,
|
|
|
dataType: 'json',
|
|
|
success: function (data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
localAlert('删除失败', data.message);
|
|
|
} else {
|
|
|
$("#mySecondModal").modal('hide');
|
|
|
btnSearch();
|
|
|
}
|
|
|
},
|
|
|
error: function (data) {
|
|
|
localAlert('系统异常', data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//打开新增或修改页面
|
|
|
function saveHostGroup() {
|
|
|
var id = $("input[name='editGroupId']").val();
|
|
|
var groupName = $("input[name='editGroupName']").val();
|
|
|
var tagType =$("#model_tagType").val();
|
|
|
if (groupName == null || groupName == "") {
|
|
|
$("#hostGroupForm #messageAlert").alerts({
|
|
|
content: "请输入标签名称!",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (tagType == null || tagType == "") {
|
|
|
$("#hostGroupForm #messageAlert").alerts({
|
|
|
content: "请选择标签归属类型!",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
var pid=$("#parentTag").val();
|
|
|
if(pid==null||pid==""){
|
|
|
pid=0;
|
|
|
}
|
|
|
var param = {
|
|
|
id: id,
|
|
|
tagType:tagType,
|
|
|
pid:pid,
|
|
|
descr:$("input[name='editDescr']").val(),
|
|
|
groupName: groupName
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'post',
|
|
|
url: "saveHostGroup.do",
|
|
|
data: param,
|
|
|
dataType: 'json',
|
|
|
success: function (data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
localAlert('删除失败', data.message);
|
|
|
} else {
|
|
|
$("#myModal").modal('hide');
|
|
|
btnSearch();
|
|
|
}
|
|
|
},
|
|
|
error: function (data) {
|
|
|
localAlert('系统异常', data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//打开新增或修改页面
|
|
|
function deleteHostGroup(id) {
|
|
|
var dialog = $("<div>").appendTo($("body"));
|
|
|
dialog.dialog({
|
|
|
title: "你确定删除吗",
|
|
|
backdrop: "static",
|
|
|
content: "你确定要删除该标签信息吗?",
|
|
|
buttons: [{
|
|
|
text: "否",
|
|
|
className: "btn-danger",
|
|
|
onclick: function () {
|
|
|
$(dialog).dialog("hide");
|
|
|
}
|
|
|
}, {
|
|
|
text: "是",
|
|
|
className: "btn-success",
|
|
|
onclick: function () {
|
|
|
$(dialog).dialog("hide");
|
|
|
$.ajax({
|
|
|
url: "deleteHostGroup",
|
|
|
type: 'post',
|
|
|
async: false,
|
|
|
data: {
|
|
|
id: id
|
|
|
},
|
|
|
dataType: "json",
|
|
|
success: function (data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
localAlert('删除失败', data.message);
|
|
|
}
|
|
|
btnSearch();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}]
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
\ No newline at end of file |
...
|
...
|
|