ops / monitor-ui · Commits

Go to a project

Authored by simba
Commit bc9fc9afe80fde7d1e04a79db7d0e788c8d6c6be 2 parents d3cf451c 0bdcf1fd

Merge branch 'master' of http://git.yoho.cn/ops/monitor-ui

Inline Side-by-side
Showing 6 changed files with 306 additions and 288 deletions
... ... @@ -7,6 +7,7 @@ public class HttpUriContants {
/*** 机组信息 ****/
public static final String HOST_GROUP_GETALL = "/hostGroup/getHostGroups";
public static final String HOST_GROUP_SAVE = "/hostGroup/saveHostGroup";
public static final String HOST_ALL_GROUPS = "/hostGroup/getAllGroups";
... ...
... ... @@ -31,7 +31,13 @@ public class HostGroupCtrl {
@ResponseBody
public BaseResponse getHostGroups(PageRequest req) {
BaseResponse response=httpRestClient.defaultPost(HttpUriContants.HOST_GROUP_GETALL, req, BaseResponse.class);
System.out.println("*****************************"+ JSON.toJSON(response));
return response;
}
@RequestMapping("/saveHostGroup")
@ResponseBody
public BaseResponse saveHostGroup(String req) {
BaseResponse response = httpRestClient.defaultPost(HttpUriContants.HOST_GROUP_SAVE, req, BaseResponse.class);
return response;
}
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Dynamic table</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div>
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<input type="text" id="" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<input type="text" id="" class="form-control" placeholder=""/>
</div>
<button id="submit" class="btn btn-default">搜索</button>
</div>
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 900px;">新增</button>
</div>
</div>
<div id="table">
</div>
</div>
</div>
</div>
<script>
$(function () {
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
userId: i,
userName: "用户" + i,
status: i % 3 == 0 ? 0 : 1
});
}
$("#table").table({
striped: true,
panelClass: "panel-success",
pagination: true,
columns: [{
title: "用户id",
field: "userId"
}, {
title: "用户名称",
field: "userName"
}, {
title: "状态",
field: "status"
}],
data: data
});
});
</script>
... ... @@ -15,13 +15,33 @@
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div>
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 900px;">新增</button>
</div>
<div>
<a href="#" id="open-modal" class="btn btn-primary">新增主机组</a> </div>
</div>
<div id="hostGroupTable">
</div>
<div id="myModal" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<label class="control-label">机组ID</label>
<div class="controls">
<input type="text" name="editGroupId"/>
</div>
<label class="control-label">机组名称</label>
<div class="controls">
<input type="text" name="editGroupName"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" id="submitBtn" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
</div>
... ... @@ -58,11 +78,25 @@
},{
title : "操作",
field : "op",
width : "15%"
}]
formatter : function(rowData) {
var div = $("<div>");
var editBtn = $("<button onclick='editHostGroup(rowData.id,rowData.groupName)'>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
div.append("&nbsp;");
var delBtn = $("<button onclick='deleteHostGroup(rowData.id)'>").addClass("btn btn-xs btn-danger").html("删除")
.appendTo(div);
delBtn.click(function() {
});
return div;
}
} ]
});
});
//打开新增或修改页面
function editHostGroup(id,groupName) {
}
</script>
 
\ No newline at end of file
... ...
... ... @@ -98,220 +98,9 @@
</script>
<script>
var treeData = [];
var nodeId2id = function (nodeid) {
if (nodeid == "#") {
return 0;
} else {
return nodeid.split("_")[1];
}
};
var getPath = function (nodeid) {
var paths = [];
var num = 0;
var currentId = nodeid;
while (currentId != "#") {
var node = $("#jstree").jstree().get_node(currentId);
console.log(node);
paths.push(node.text);
num++;
currentId = node.parent
}
var strPath = "";
for (var i = 0; i < num; i++) {
strPath += paths.pop() + "/";
}
return strPath;
}
var openTree = function (node_id, level) {
// console.log("open tree" + node_id);
var node = $("#jstree").jstree().get_node(node_id);
$("#jstree").jstree("open_node", node)
var children = node.children;
// console.log("open children" +children);
if (level <= 1)
return;
level--;
$.each(children, function (n, data) {
openTree(data, level);
});
}
var addType = function (node) {
var rel = 0;
var pid;
var name;
var isleaf;
$('#modal_type_update').hide();
$('#modal_type_del').hide();
$('#modal_type_add').show();
$('#myModalLabel').html("添加类型");
$('#tx_type_id').val(nodeId2id(node.id));
$('#tx_type_action').val("add");
$('#tx_new_type_isleaf').val(1);
$('#tx_new_type_parent').val(getPath(node.id));
$('#myModal').modal({keyboard: true});
<script type="text/javascript" src="<%=basePath %>/script/yoho.type.tree.js"></script>
return rel;
};
var delType = function (id) {
var rel = 0;
$('#myModalLabel').html("确认删除?");
$('#tx_type_action').val("del");
$('#modal_type_update').hide();
$('#modal_type_add').hide();
$('#modal_type_del').show();
$('#tx_type_id').val(nodeId2id(id));
$('#myModal').modal({keyboard: true});
return rel;
};
var updateType = function (id, oldName) {
var rel = 0;
$('#myModalLabel').html("更新类型");
$('#tx_type_action').val("update");
$('#tx_type_id').val(nodeId2id(id));
$('#tx_update_type_name_old').val(oldName);
$('#modal_type_update').show();
$('#modal_type_add').hide();
$('#modal_type_del').hide();
$('#myModal').modal({keyboard: true});
return rel;
};
var doAddType = function () {
var pid = $('#tx_type_id').val();
var name = $('#tx_new_type_name').val();
var isleaf = 1;
$.get("type/add", {"pid": pid, "name": name, "isleaf": isleaf},
function (data, state) {
$.toaster('添加成功', '添加', 'info');
refreshTypeTree();
}
);
}
var doUpdateType = function () {
var id = $('#tx_type_id').val();
var name = $('#tx_update_type_name_new').val();
console.log("update " + id + " name " + name);
$.get("type/update", {"id": id, "name": name},
function (data, state) {
$.toaster('更新成功', '更新', 'info');
refreshTypeTree();
}
);
}
var doDelType = function () {
var id = $('#tx_type_id').val();
console.log("delete " + id);
$.get("type/del", {"id": id},
function (data, state) {
$('#jstree').jstree("delete_node", $("#" + id));
}
);
}
$("#btn4type").click(function () {
console.log("frw");
if ($("#tx_type_action").val() == "add") {
doAddType();
}
else if ($("#tx_type_action").val() == "update") {
doUpdateType();
} else if ($("#tx_type_action").val() == "del") {
doDelType();
}
$('#myModal').dialog('hide');
});
var refreshTypeTree = function () {
console.log("refresh tree");
treeData = []; //重置
$.get("type/all", function (data, state) {
console.log(state)
var jsonData = JSON.parse(data);
$.each(jsonData.data, function (n, val) {
var treeNode = {};
treeNode.id = "node_" + val.typeId;
treeNode.parent = (val.typeParentId == 0 ? "#" : "node_" + val.typeParentId);
treeNode.text = val.typeName;
treeNode.data = val.typeIsLeaf;
treeData.push(treeNode)
})
$('#jstree').jstree(true).settings.core.data = treeData;
$('#jstree').jstree().refresh(true, true);
setInterval("openTree('#', 3)", 300); //展开三层
});
}
$(function () {
$('#jstree').jstree({
"plugins": ["themes", "checkbox", "contextmenu", "ui", "types", "crrm", "core", "status"],
'core': {
"themes": {
"icons": false
},
'data': treeData,
'check_callback': true
},
'contextmenu': {
"select_node": false,
"items": {
"ADD": {
"label": "添加类型",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
console.log(obj);
console.log(clickedNode);
console.log("add operation--clickedNode's id is:" + clickedNode.id);
addType(clickedNode);
}
}, "UPDATE": {
"label": "修改类型",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
updateType(clickedNode.id, clickedNode.text);
}
}, "DEL": {
"label": "删除类型",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
console.log("del operation--clickedNode's id is:" + clickedNode.id);
delType(clickedNode.id);
}
}, "ADDM": {
"label": "添加服务对象",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
console.log(obj);
addMObjType(clickedNode);
}
}
}
}
}).bind("loaded.jstree", function (event, data) {
openTree("#", 3); //展开三层
});
refreshTypeTree();
});
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
... ... @@ -362,4 +151,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
... ...
/**
* Created by frw on 2016/6/17.
*/
var treeData = [];
var nodeId2id = function (nodeid) {
if (nodeid == "#") {
return 0;
} else {
return nodeid.split("_")[1];
}
};
var getPath = function (nodeid) {
var paths = [];
var num = 0;
var currentId = nodeid;
while (currentId != "#") {
var node = $("#jstree").jstree().get_node(currentId);
console.log(node);
paths.push(node.text);
num++;
currentId = node.parent
}
var strPath = "";
for (var i = 0; i < num; i++) {
strPath += paths.pop() + "/";
}
return strPath;
}
var openTree = function (node_id, level) {
// console.log("open tree" + node_id);
var node = $("#jstree").jstree().get_node(node_id);
$("#jstree").jstree("open_node", node)
var children = node.children;
// console.log("open children" +children);
if (level <= 1)
return;
level--;
$.each(children, function (n, data) {
openTree(data, level);
});
}
var addType = function (node) {
var rel = 0;
var pid;
var name;
var isleaf;
$('#modal_type_update').hide();
$('#modal_type_del').hide();
$('#modal_type_add').show();
$('#myModalLabel').html("添加类型");
$('#tx_type_id').val(nodeId2id(node.id));
$('#tx_type_action').val("add");
$('#tx_new_type_isleaf').val(1);
$('#tx_new_type_parent').val(getPath(node.id));
$('#myModal').modal({keyboard: true});
return rel;
};
var delType = function (id) {
var rel = 0;
$('#myModalLabel').html("确认删除?");
$('#tx_type_action').val("del");
$('#modal_type_update').hide();
$('#modal_type_add').hide();
$('#modal_type_del').show();
$('#tx_type_id').val(nodeId2id(id));
$('#myModal').modal({keyboard: true});
return rel;
};
var updateType = function (id, oldName) {
var rel = 0;
$('#myModalLabel').html("更新类型");
$('#tx_type_action').val("update");
$('#tx_type_id').val(nodeId2id(id));
$('#tx_update_type_name_old').val(oldName);
$('#modal_type_update').show();
$('#modal_type_add').hide();
$('#modal_type_del').hide();
$('#myModal').modal({keyboard: true});
return rel;
};
var addMObjType = function (nodeid, name) {
var id = nodeId2id(nodeid); //服务对象id
var path = getPath(nodeid); //服务对象完整类型路径
console.log("id: " + id + " path: " + path + " name :" + name);
//TODO 打开新增服务对象对话框
}
var doAddType = function () {
var pid = $('#tx_type_id').val();
var name = $('#tx_new_type_name').val();
var isleaf = 1;
$.get("type/add", {"pid": pid, "name": name, "isleaf": isleaf},
function (data, state) {
$.toaster('添加成功', '添加', 'info');
refreshTypeTree();
}
);
}
var doUpdateType = function () {
var id = $('#tx_type_id').val();
var name = $('#tx_update_type_name_new').val();
console.log("update " + id + " name " + name);
$.get("type/update", {"id": id, "name": name},
function (data, state) {
$.toaster('更新成功', '更新', 'info');
refreshTypeTree();
}
);
}
var doDelType = function () {
var id = $('#tx_type_id').val();
console.log("delete " + id);
$.get("type/del", {"id": id},
function (data, state) {
$('#jstree').jstree("delete_node", $("#" + id));
}
);
}
/**
* 获取所有选择节点
* @param isleaf true:仅获取叶子节点;false:所有节点
* @returns {Array}
*/
var getSelectType = function (isleaf) {
var seltypes = [];
$.each($("#jstree").jstree('get_selected'), function (idx, nodeid) {
var node = $('#jstree').jstree().get_node(nodeid);
if (isleaf == true && node.data != 1)
return;
seltypes.push(nodeId2id(nodeid));
});
return seltypes;
}
/**
* 检查节点是否子节点
* @param nodeid
* @returns {boolean}
*/
var checkIsLeaf = function (nodeid) {
var node = $('#jstree').jstree().get_node(nodeid);
var isLeaf = node.data == 1 ? true : false;
return isLeaf;
}
$("#btn4type").click(function () {
console.log("frw");
if ($("#tx_type_action").val() == "add") {
doAddType();
}
else if ($("#tx_type_action").val() == "update") {
doUpdateType();
} else if ($("#tx_type_action").val() == "del") {
doDelType();
}
$('#myModal').dialog('hide');
});
var refreshTypeTree = function () {
console.log("refresh tree");
treeData = []; //重置
$.get("type/all", function (data, state) {
console.log(state)
var jsonData = JSON.parse(data);
$.each(jsonData.data, function (n, val) {
var treeNode = {};
treeNode.id = "node_" + val.typeId;
treeNode.parent = (val.typeParentId == 0 ? "#" : "node_" + val.typeParentId);
treeNode.text = val.typeName;
treeNode.data = val.typeIsLeaf;
treeData.push(treeNode)
})
$('#jstree').jstree(true).settings.core.data = treeData;
$('#jstree').jstree().refresh(true, true);
setInterval("openTree('#', 3)", 300); //展开三层
});
}
$(function () {
$('#jstree').jstree({
"plugins": ["themes", "checkbox", "contextmenu", "ui", "types", "crrm", "core", "status"],
'core': {
"themes": {
"icons": false
},
'data': treeData,
'check_callback': true
},
'contextmenu': {
"select_node": false,
"items": {
"ADD": {
"label": "添加类型",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
console.log(obj);
console.log(clickedNode);
console.log("add operation--clickedNode's id is:" + clickedNode.id);
addType(clickedNode);
}
}, "UPDATE": {
"label": "修改类型",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
updateType(clickedNode.id, clickedNode.text);
}
}, "DEL": {
"label": "删除类型",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
console.log("del operation--clickedNode's id is:" + clickedNode.id);
delType(clickedNode.id);
}
}, "ADDM": {
"label": "添加服务对象",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
console.log("add minfo--clickedNode's id is : " + clickedNode.id);
addMObjType(clickedNode.id, clickedNode.text);
}
}
}
}
}).bind("loaded.jstree", function (event, data) {
openTree("#", 3); //展开三层
});
refreshTypeTree();
});
\ No newline at end of file
... ...