diff --git a/monitor-ui-common/src/main/java/com/ui/contants/HttpUriContants.java b/monitor-ui-common/src/main/java/com/ui/contants/HttpUriContants.java index 9a0c96b..4f7c27c 100644 --- a/monitor-ui-common/src/main/java/com/ui/contants/HttpUriContants.java +++ b/monitor-ui-common/src/main/java/com/ui/contants/HttpUriContants.java @@ -9,6 +9,11 @@ public class HttpUriContants { public static final String HOST_GROUP_GETALL = "/hostGroup/getHostGroups"; /*** 机组信息 ****/ - public static String GET_ALL_TYPE = "/type/query"; + + //类型信息 + public static String TYPE_GET_ALL = "/type/query"; + public static String TYPE_ADD = "/type/add"; + public static String TYPE_DEL = "/type/delete"; + public static String TYPE_UPDATE = "/type/update"; } diff --git a/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TypeCtrl.java b/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TypeCtrl.java new file mode 100644 index 0000000..5ecf9d5 --- /dev/null +++ b/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TypeCtrl.java @@ -0,0 +1,91 @@ +package com.ui.ctrl; + +import com.alibaba.fastjson.JSONObject; +import com.ui.contants.HttpUriContants; +import com.ui.http.HttpRestClient; +import org.slf4j.Logger; +import org.slf4j.LoggerFactory; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.stereotype.Controller; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RequestParam; +import org.springframework.web.bind.annotation.ResponseBody; + +/** + * Created by fruwei on 2016/6/16. + */ +@Controller +@RequestMapping("type") +public class TypeCtrl { + Logger logger = LoggerFactory.getLogger(TypeCtrl.class); + + @Autowired + private HttpRestClient httpClient; + + @RequestMapping("/all") + @ResponseBody + public String getAllType() { + String strType = ""; + + logger.debug("get all type"); + + strType = httpClient.defaultGet(HttpUriContants.TYPE_GET_ALL, String.class); + + logger.info("all type: {}", strType); + + return strType; + } + + + @RequestMapping("/add") + @ResponseBody + public String addType(@RequestParam String name, @RequestParam int pid, @RequestParam int isleaf) { + + String rel; + logger.info("add type name:{},pid:{},isLeaf{}", name, pid, isleaf); + + JSONObject req=new JSONObject(); + req.put("typeName",name); + req.put("typeParentId",pid); + req.put("typeIsLeaf",isleaf); + + rel = httpClient.defaultPost(HttpUriContants.TYPE_ADD, req,String.class); + + logger.info("all type: {}", rel); + + + + return rel; + } + + + @RequestMapping("/del") + @ResponseBody + public String delType(@RequestParam int id) { + String rel = ""; + logger.info("update type id {} ", id); + rel = httpClient.defaultGet(HttpUriContants.TYPE_DEL+"/"+id,String.class); + logger.info("update type: {}", rel); + return "ok"; + } + + + @RequestMapping("/update") + @ResponseBody + public String updateType(@RequestParam int id, @RequestParam String name) { + String rel = ""; + + logger.info("update type id {} ,name {}", id, name); + + JSONObject req=new JSONObject(); + + req.put("typeId",id); + req.put("typeName",name); + + rel = httpClient.defaultPost(HttpUriContants.TYPE_UPDATE, req,String.class); + logger.info("update type: {}", rel); + + return rel; + } + +} diff --git a/monitor-ui-web/src/main/webapp/jsp/table.jsp b/monitor-ui-web/src/main/webapp/jsp/table.jsp index 8bb2182..3da5f29 100644 --- a/monitor-ui-web/src/main/webapp/jsp/table.jsp +++ b/monitor-ui-web/src/main/webapp/jsp/table.jsp @@ -20,7 +20,6 @@ <!-- 树 --> <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;"> <div class="widget-title"> - <h5>Tree Title</h5> </div> <ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;"> @@ -31,8 +30,8 @@ <li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span class="ui-icon ui-icon-minusthick"></span></li> </ul> - <div id="continer"></div> - <div id="jstree"></div> + <div id="jstree" class="jstree jstree-default jstree-default-small" role="tree" aria-multiselectable="true" + tabindex="0" style="height: 400px"></div> </div> <!-- 列表 --> <div class="widget-content nopadding" style="margin-left: 300px;"> @@ -107,10 +106,6 @@ }); - - - - var dom = document.getElementById("icons"); var str = dom.getAttribute("style"); str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, ""); @@ -126,82 +121,149 @@ <script> var treeData = []; - var addType = function (id, pid, name, isleaf) { + var addType = function (node) { var rel = 0; + var pid; + var name; + var isleaf; + $('#modal_type_update').hide(); + $('#modal_type_add').show(); - $.get("type/add", - { - "id": id, "pid": pid, "name": name, "isleaf": isleaf - } - , - function (data, state) { + $('#tx_type_id').val(node.id); + $('#tx_type_action').val("add"); + $('#tx_new_type_isleaf').val(1); + $('#tx_new_type_parent').val(node.id); - } - ); + $('#myModal').modal({keyboard: true}); return rel; }; - var delType = function () { + var delType = function (id) { var rel = 0; - $.get("type/del", function (data, state) { - - - }); + $('#tx_type_action').val("del"); + $('#modal_type_update').hide(); + $('#modal_type_add').hide(); + $('#tx_type_id').val(id); + $('#myModal').modal({keyboard: true}); + $.get("type/del", + {"id": id}, + function (data, state) { + }); return rel; }; - var updateType = function () { + var updateType = function (id, oldName) { var rel = 0; - + $('#tx_type_action').val("update"); + $('#tx_type_id').val(id); + $('#tx_update_type_name_old').val(oldName); + $('#modal_type_update').show(); + $('#modal_type_add').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) { + + + } + ); + } + 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) { + + + } + ); + } + var doDelType = function () { + var id = $('#tx_type_id').val(); + console.log("delete "+id); + $.get("type/del", + {"id": id}, + function (data, state) { + + } + ); + } + $("#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'); + }); + $(function () { $.get("type/all", function (data, state) { - console.log(state) +// console.log(state) console.log(data); var jsonData = JSON.parse(data); - treeData=[]; //重置 + treeData = []; //重置 $.each(jsonData, function (n, val) { var treeNode = {}; treeNode.id = "" + val.typeId; treeNode.parent = "" + (val.typeParentId == 0 ? "#" : val.typeParentId); treeNode.text = val.typeName; + treeNode.isleaf = val.typeIsLeaf; treeData.push(treeNode) }) $('#jstree').jstree({ - "plugins": ["themes", "checkbox", "contextmenu", "ui", "types"], + "plugins": ["themes", "checkbox", "contextmenu", "ui", "types", "crrm", "core"], 'core': { "themes": { "icons": false }, - 'data': treeData + 'data': treeData, + 'check_callback': true }, 'contextmenu': { "items": { "ADD": { - "label": "ADD", + "label": "添加", "action": function (obj) { var inst = jQuery.jstree.reference(obj.reference); var clickedNode = inst.get_node(obj.reference); - alert("add operation--clickedNode's id is:" + clickedNode.id); + console.log(obj); + console.log(clickedNode); + console.log("add operation--clickedNode's id is:" + clickedNode.id); + addType(clickedNode); } }, "DEL": { - "label": "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); - addType() + delType(clickedNode.id); + $('#jstree').jstree("delete_node", clickedNode); } }, "UPDATE": { - "label": "UPDATE", + "label": "修改", "action": function (obj) { var inst = jQuery.jstree.reference(obj.reference); var clickedNode = inst.get_node(obj.reference); - alert("update operation--clickedNode's id is:" + clickedNode.id); + updateType(clickedNode.id, clickedNode.text); } } } @@ -209,19 +271,60 @@ }).bind("loaded.jstree", function (event, data) { $(this).jstree("open_all"); }); - -// .bind("select_node.jstree", function(event, data) { -// -// var evt = window.event || event; -// var button = evt.which || evt.button; -// console.log("fdfdfdf"+button); -// if( button != 1 ) return false; -// -// }) }); }); -</script> \ No newline at end of file +</script> + +<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" style="height: 200px"> + <input type="hidden" id="tx_type_action"/> + <input type="hidden" id="tx_type_id"/> + + <div id="modal_type_add"> + <div class="input-group" style="float: left;"> + <span class="input-group-addon">Name:</span> + <input type="text" id="tx_new_type_name" class="form-control" placeholder=""/> + </div> + <div class="input-group" style="float: left;"> + <span class="input-group-addon">父节点:</span> + <input type="text" id="tx_new_type_parent" class="form-control" placeholder=""/> + </div> + <div class="input-group" style="float: left;"> + <span class="input-group-addon">是否叶子节点:</span> + <input type="text" id="tx_new_type_isleaf" class="form-control" placeholder=""/> + </div> + </div> + <div id="modal_type_update"> + <div class="input-group" style="float: left;"> + <span class="input-group-addon">原名称:</span> + <input type="text" id="tx_update_type_name_old" class="form-control" placeholder=""/> + </div> + <div class="input-group" style="float: left;"> + <span class="input-group-addon">新名称:</span> + <input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> + <button type="button" id="btn4type" class="btn btn-primary">确认</button> + </div> + </div> + </div> +</div> \ No newline at end of file