ops / monitor-ui · Commits

Go to a project

Authored by zhengyouwei
Commit 98d422a232820b263a67a0c216f5aca6c111f908 2 parents 46c3ceae 715f0a5d

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

Inline Side-by-side
Showing 11 changed files with 690 additions and 301 deletions
@@ -9,7 +9,14 @@ public class HttpUriContants { @@ -9,7 +9,14 @@ public class HttpUriContants {
9 public static final String HOST_GROUP_GETALL = "/hostGroup/getHostGroups"; 9 public static final String HOST_GROUP_GETALL = "/hostGroup/getHostGroups";
10 public static final String HOST_GROUP_SAVE = "/hostGroup/saveHostGroup"; 10 public static final String HOST_GROUP_SAVE = "/hostGroup/saveHostGroup";
11 11
  12 + public static final String HOST_ALL_GROUPS = "/hostGroup/getAllGroups";
  13 +
12 /*** 机组信息 ****/ 14 /*** 机组信息 ****/
13 - public static String GET_ALL_TYPE = "/type/query"; 15 +
  16 + //类型信息
  17 + public static String TYPE_GET_ALL = "/type/query";
  18 + public static String TYPE_ADD = "/type/add";
  19 + public static String TYPE_DEL = "/type/delete";
  20 + public static String TYPE_UPDATE = "/type/update";
14 21
15 } 22 }
@@ -42,5 +42,20 @@ public class HostGroupCtrl { @@ -42,5 +42,20 @@ public class HostGroupCtrl {
42 } 42 }
43 43
44 44
  45 +
  46 + @RequestMapping("/getAllGroups")
  47 + @ResponseBody
  48 + public BaseResponse getAllGroups() {
  49 + try{
  50 + BaseResponse response=httpRestClient.defaultPost(HttpUriContants.HOST_ALL_GROUPS, null, BaseResponse.class);
  51 + return response;
  52 + }catch (Exception e){
  53 + log.error("getAllGroups error",e);
  54 + return null;
  55 + }
  56 +
  57 + }
  58 +
  59 +
45 } 60 }
46 61
1 -package com.ui.ctrl.type; 1 +package com.ui.ctrl;
2 2
  3 +import com.alibaba.fastjson.JSONObject;
3 import com.ui.contants.HttpUriContants; 4 import com.ui.contants.HttpUriContants;
4 import com.ui.http.HttpRestClient; 5 import com.ui.http.HttpRestClient;
5 import org.slf4j.Logger; 6 import org.slf4j.Logger;
@@ -10,8 +11,6 @@ import org.springframework.web.bind.annotation.RequestMapping; @@ -10,8 +11,6 @@ import org.springframework.web.bind.annotation.RequestMapping;
10 import org.springframework.web.bind.annotation.RequestParam; 11 import org.springframework.web.bind.annotation.RequestParam;
11 import org.springframework.web.bind.annotation.ResponseBody; 12 import org.springframework.web.bind.annotation.ResponseBody;
12 13
13 -import java.util.HashMap;  
14 -  
15 /** 14 /**
16 * Created by fruwei on 2016/6/16. 15 * Created by fruwei on 2016/6/16.
17 */ 16 */
@@ -30,7 +29,7 @@ public class TypeCtrl { @@ -30,7 +29,7 @@ public class TypeCtrl {
30 29
31 logger.debug("get all type"); 30 logger.debug("get all type");
32 31
33 - strType = httpClient.defaultGet(HttpUriContants.GET_ALL_TYPE, String.class); 32 + strType = httpClient.defaultGet(HttpUriContants.TYPE_GET_ALL, String.class);
34 33
35 logger.info("all type: {}", strType); 34 logger.info("all type: {}", strType);
36 35
@@ -40,33 +39,53 @@ public class TypeCtrl { @@ -40,33 +39,53 @@ public class TypeCtrl {
40 39
41 @RequestMapping("/add") 40 @RequestMapping("/add")
42 @ResponseBody 41 @ResponseBody
43 - public String addType(@RequestParam int id, @RequestParam int name, @RequestParam int pid, @RequestParam boolean isLeaf) { 42 + public String addType(@RequestParam String name, @RequestParam int pid, @RequestParam int isleaf) {
44 43
  44 + String rel;
  45 + logger.info("add type name:{},pid:{},isLeaf{}", name, pid, isleaf);
45 46
46 - return "ok"; 47 + JSONObject req=new JSONObject();
  48 + req.put("typeName",name);
  49 + req.put("typeParentId",pid);
  50 + req.put("typeIsLeaf",isleaf);
  51 +
  52 + rel = httpClient.defaultPost(HttpUriContants.TYPE_ADD, req,String.class);
  53 +
  54 + logger.info("all type: {}", rel);
  55 +
  56 +
  57 +
  58 + return rel;
47 } 59 }
48 60
49 61
50 @RequestMapping("/del") 62 @RequestMapping("/del")
51 @ResponseBody 63 @ResponseBody
52 - public String delType() {  
53 - 64 + public String delType(@RequestParam int id) {
  65 + String rel = "";
  66 + logger.info("update type id {} ", id);
  67 + rel = httpClient.defaultGet(HttpUriContants.TYPE_DEL+"/"+id,String.class);
  68 + logger.info("update type: {}", rel);
54 return "ok"; 69 return "ok";
55 } 70 }
56 71
57 72
58 @RequestMapping("/update") 73 @RequestMapping("/update")
59 @ResponseBody 74 @ResponseBody
60 - public String updateType(@RequestParam int id, @RequestParam int name) {  
61 - String strType = ""; 75 + public String updateType(@RequestParam int id, @RequestParam String name) {
  76 + String rel = "";
62 77
63 - logger.debug("get all type"); 78 + logger.info("update type id {} ,name {}", id, name);
64 79
65 - strType = httpClient.defaultGet(HttpUriContants.GET_ALL_TYPE, String.class); 80 + JSONObject req=new JSONObject();
66 81
67 - logger.info("all type: {}", strType); 82 + req.put("typeId",id);
  83 + req.put("typeName",name);
68 84
69 - return strType; 85 + rel = httpClient.defaultPost(HttpUriContants.TYPE_UPDATE, req,String.class);
  86 + logger.info("update type: {}", rel);
  87 +
  88 + return rel;
70 } 89 }
71 90
72 } 91 }
@@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
60 </appender> 60 </appender>
61 61
62 <!-- root级别 DEBUG --> 62 <!-- root级别 DEBUG -->
63 - <root level="DEBUG"> 63 + <root level="INFO">
64 <!-- 控制台输出 --> 64 <!-- 控制台输出 -->
65 <appender-ref ref="STDOUT" /> 65 <appender-ref ref="STDOUT" />
66 <!-- 文件输出 --> 66 <!-- 文件输出 -->
@@ -48,7 +48,7 @@ @@ -48,7 +48,7 @@
48 console.log(state) 48 console.log(state)
49 console.log(data); 49 console.log(data);
50 var jsonData = JSON.parse(data); 50 var jsonData = JSON.parse(data);
51 - treeData.removeAll(); //重置 51 + treeData=[]; //重置
52 $.each(jsonData, function (n, val) { 52 $.each(jsonData, function (n, val) {
53 var treeNode = {}; 53 var treeNode = {};
54 treeNode.id = "" + val.typeId; 54 treeNode.id = "" + val.typeId;
@@ -21,6 +21,7 @@ @@ -21,6 +21,7 @@
21 <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css" /> 21 <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css" />
22 <link rel="stylesheet" href="<%=basePath %>css/uniform.css" /> 22 <link rel="stylesheet" href="<%=basePath %>css/uniform.css" />
23 <link rel="stylesheet" href="<%=basePath %>css/select2.css" /> 23 <link rel="stylesheet" href="<%=basePath %>css/select2.css" />
  24 + <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/default/style.css"/>
24 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script> 25 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
25 <script src="<%=basePath %>/js/bootstrap.min.js"></script> 26 <script src="<%=basePath %>/js/bootstrap.min.js"></script>
26 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script> 27 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
@@ -34,8 +35,9 @@ @@ -34,8 +35,9 @@
34 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script> 35 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script>
35 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script> 36 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script>
36 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script> 37 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
37 - <link rel="stylesheet" href="./js/jstree/themes/default/style.min.css"/>  
38 - <script src="./js/jstree/jstree.min.js"></script> 38 +
  39 + <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
  40 + <script src="<%=basePath %>js/jquery.toaster.js"></script>
39 <script> 41 <script>
40 var contextPath='<%=basePath %>'; 42 var contextPath='<%=basePath %>';
41 </script> 43 </script>
@@ -53,11 +55,10 @@ @@ -53,11 +55,10 @@
53 <div id="sidebar"> 55 <div id="sidebar">
54 <ul> 56 <ul>
55 <li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li> 57 <li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
56 - <li class="" id="jsptablejsp" onclick="clickMenuToPage('/jsp/table.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>Tables</span></a></li> 58 + <li class="" id="jsptablejsp" onclick="clickMenuToPage('jsp/table.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>test</span></a></li>
  59 + <li class="" id="jspmobjectmobjectInfojsp" onclick="clickMenuToPage('jsp/mobject/mobjectInfo.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>Tables</span></a></li>
57 <li class="" id="jsphosthostGroupListjsp" onclick="clickMenuToPage('jsp/host/hostGroupList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机组</span></a></li> 60 <li class="" id="jsphosthostGroupListjsp" onclick="clickMenuToPage('jsp/host/hostGroupList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机组</span></a></li>
58 <li class="" id="jsphosthostInfoListjsp" onclick="clickMenuToPage('jsp/host/hostInfoList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机信息</span></a></li> 61 <li class="" id="jsphosthostInfoListjsp" onclick="clickMenuToPage('jsp/host/hostInfoList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机信息</span></a></li>
59 -  
60 -  
61 </ul> 62 </ul>
62 </div> 63 </div>
63 <!-- 右侧具体内容 --> 64 <!-- 右侧具体内容 -->
  1 +/***********************************************************************************
  2 +* Add Array.indexOf *
  3 +***********************************************************************************/
  4 +(function ()
  5 +{
  6 + if (typeof Array.prototype.indexOf !== 'function')
  7 + {
  8 + Array.prototype.indexOf = function(searchElement, fromIndex)
  9 + {
  10 + for (var i = (fromIndex || 0), j = this.length; i < j; i += 1)
  11 + {
  12 + if ((searchElement === undefined) || (searchElement === null))
  13 + {
  14 + if (this[i] === searchElement)
  15 + {
  16 + return i;
  17 + }
  18 + }
  19 + else if (this[i] === searchElement)
  20 + {
  21 + return i;
  22 + }
  23 + }
  24 + return -1;
  25 + };
  26 + }
  27 +})();
  28 +/**********************************************************************************/
  29 +
  30 +(function ($,undefined)
  31 +{
  32 + var toasting =
  33 + {
  34 + gettoaster : function ()
  35 + {
  36 + var toaster = $('#' + settings.toaster.id);
  37 +
  38 + if(toaster.length < 1)
  39 + {
  40 + toaster = $(settings.toaster.template).attr('id', settings.toaster.id).css(settings.toaster.css).addClass(settings.toaster['class']);
  41 +
  42 + if ((settings.stylesheet) && (!$("link[href=" + settings.stylesheet + "]").length))
  43 + {
  44 + $('head').appendTo('<link rel="stylesheet" href="' + settings.stylesheet + '">');
  45 + }
  46 +
  47 + $(settings.toaster.container).append(toaster);
  48 + }
  49 +
  50 + return toaster;
  51 + },
  52 +
  53 + notify : function (title, message, priority)
  54 + {
  55 + var $toaster = this.gettoaster();
  56 + var delimiter = (title && message) ? settings.toast.defaults.delimiter : '';
  57 + var $toast = $(settings.toast.template.replace('%priority%', priority).replace('%delimiter%', delimiter)).hide().css(settings.toast.css).addClass(settings.toast['class']);
  58 +
  59 + $('.title', $toast).css(settings.toast.csst).html(title);
  60 + $('.message', $toast).css(settings.toast.cssm).html(message);
  61 +
  62 + if ((settings.debug) && (window.console))
  63 + {
  64 + console.log(toast);
  65 + }
  66 +
  67 + $toaster.append(settings.toast.display($toast));
  68 +
  69 + if (settings.donotdismiss.indexOf(priority) === -1)
  70 + {
  71 + var timeout = (typeof settings.timeout === 'number') ? settings.timeout : ((typeof settings.timeout === 'object') && (priority in settings.timeout)) ? settings.timeout[priority] : 1500;
  72 + setTimeout(function()
  73 + {
  74 + settings.toast.remove($toast, function()
  75 + {
  76 + $toast.remove();
  77 + });
  78 + }, timeout);
  79 + }
  80 + }
  81 + };
  82 +
  83 + var defaults =
  84 + {
  85 + 'toaster' :
  86 + {
  87 + 'id' : 'toaster',
  88 + 'container' : 'body',
  89 + 'template' : '<div></div>',
  90 + 'class' : 'toaster',
  91 + 'css' :
  92 + {
  93 + 'position' : 'fixed',
  94 + 'top' : '10px',
  95 + 'right' : '10px',
  96 + 'width' : '300px',
  97 + 'zIndex' : 50000
  98 + }
  99 + },
  100 +
  101 + 'toast' :
  102 + {
  103 + 'template' :
  104 + '<div class="alert alert-%priority% alert-dismissible" role="alert">' +
  105 + '<button type="button" class="close" data-dismiss="alert">' +
  106 + '<span aria-hidden="true">&times;</span>' +
  107 + '<span class="sr-only">Close</span>' +
  108 + '</button>' +
  109 + '<span class="title"></span>%delimiter% <span class="message"></span>' +
  110 + '</div>',
  111 +
  112 + 'defaults' :
  113 + {
  114 + 'title' : 'Notice',
  115 + 'priority' : 'success',
  116 + 'delimiter' : ':'
  117 + },
  118 +
  119 + 'css' : {},
  120 + 'cssm' : {},
  121 + 'csst' : { 'fontWeight' : 'bold' },
  122 +
  123 + 'fade' : 'slow',
  124 +
  125 + 'display' : function ($toast)
  126 + {
  127 + return $toast.fadeIn(settings.toast.fade);
  128 + },
  129 +
  130 + 'remove' : function ($toast, callback)
  131 + {
  132 + return $toast.animate(
  133 + {
  134 + opacity : '0',
  135 + padding : '0px',
  136 + margin : '0px',
  137 + height : '0px'
  138 + },
  139 + {
  140 + duration : settings.toast.fade,
  141 + complete : callback
  142 + }
  143 + );
  144 + }
  145 + },
  146 +
  147 + 'debug' : false,
  148 + 'timeout' : 1500,
  149 + 'stylesheet' : null,
  150 + 'donotdismiss' : []
  151 + };
  152 +
  153 + var settings = {};
  154 + $.extend(settings, defaults);
  155 +
  156 + $.toaster = function (options)
  157 + {
  158 + if (typeof options === 'object')
  159 + {
  160 + if ('settings' in options)
  161 + {
  162 + settings = $.extend(true, settings, options.settings);
  163 + }
  164 + }
  165 + else
  166 + {
  167 + var values = Array.prototype.slice.call(arguments, 0);
  168 + var labels = ['message', 'title', 'priority'];
  169 + options = {};
  170 +
  171 + for (var i = 0, l = values.length; i < l; i += 1)
  172 + {
  173 + options[labels[i]] = values[i];
  174 + }
  175 + }
  176 +
  177 + var title = (('title' in options) && (typeof options.title === 'string')) ? options.title : settings.toast.defaults.title;
  178 + var message = ('message' in options) ? options.message : null;
  179 + var priority = (('priority' in options) && (typeof options.priority === 'string')) ? options.priority : settings.toast.defaults.priority;
  180 +
  181 + if (message !== null)
  182 + {
  183 + toasting.notify(title, message, priority);
  184 + }
  185 + };
  186 +
  187 + $.toaster.reset = function ()
  188 + {
  189 + settings = {};
  190 + $.extend(settings, defaults);
  191 + };
  192 +})(jQuery);
@@ -300,7 +300,7 @@ @@ -300,7 +300,7 @@
300 box-shadow: inset 0 0 1px #cccccc; 300 box-shadow: inset 0 0 1px #cccccc;
301 } 301 }
302 .jstree-default .jstree-clicked { 302 .jstree-default .jstree-clicked {
303 - background: #beebff; 303 + background: #EAEAEA;
304 border-radius: 2px; 304 border-radius: 2px;
305 box-shadow: inset 0 0 1px #999999; 305 box-shadow: inset 0 0 1px #999999;
306 } 306 }
@@ -71,5 +71,19 @@ @@ -71,5 +71,19 @@
71 } 71 }
72 }); 72 });
73 } 73 }
  74 +
  75 + $("#groupId").select({
  76 + firstText : "请选择分组类型",
  77 + firstValue : 0,
  78 + className : "form-control",
  79 + url : contextPath + "/NoFilterController.do?method=getEnumForSelect",
  80 + queryParams : {
  81 + className : "GroupTypeEnum"
  82 + },
  83 + loadFilter : function(data) {
  84 + return defaultLoadFilter(data);
  85 + },
  86 + value : 0
  87 + });
74 }); 88 });
75 </script> 89 </script>
@@ -49,13 +49,75 @@ @@ -49,13 +49,75 @@
49 </div> 49 </div>
50 <button id="submit" class="btn btn-default">搜索</button> 50 <button id="submit" class="btn btn-default">搜索</button>
51 </div> 51 </div>
52 - <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button> 52 + <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;" data-target="#myModal" data-toggle="modal">新增</button>
53 </div> 53 </div>
54 </div> 54 </div>
55 <div id="table"></div> 55 <div id="table"></div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
  59 +
  60 +
  61 +
  62 +<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  63 + <div class="modal-dialog">
  64 + <div class="modal-content">
  65 + <div class="modal-header">
  66 + <button type="button" class="close" data-dismiss="modal"
  67 + aria-hidden="true">&times;</button>
  68 + <h4 class="modal-title" id="myModalLabel">新增</h4>
  69 + </div>
  70 + <div class="modal-body">
  71 + <div class="row-fluid">
  72 + <div class="span12">
  73 + <div class="widget-content nopadding">
  74 + <form action="/mobject/add" method="post" class="form-horizontal">
  75 + <div class="control-group">
  76 + <label class="control-label" style="float: left;">名称</label>
  77 + <div class="controls">
  78 + <input type="text" />
  79 + </div>
  80 + </div>
  81 + <div class="control-group">
  82 + <label class="control-label" style="float: left;">所属主机</label>
  83 + <div class="controls">
  84 + <input type="text" placeholder="请填写主机IP" />
  85 + </div>
  86 + </div>
  87 + <div class="control-group">
  88 + <label class="control-label" style="float: left;">类型</label>
  89 + <div class="controls">
  90 + <input type="text" value="" readonly="readonly" />
  91 + </div>
  92 + </div>
  93 + <div class="control-group">
  94 + <label class="control-label" style="float: left;">标签</label>
  95 + <div class="controls">
  96 + <input type="text" />
  97 + </div>
  98 + </div>
  99 + <div class="control-group">
  100 + <label class="control-label" style="float: left;">域名</label>
  101 + <div class="controls">
  102 + <input type="text" />
  103 + </div>
  104 + </div>
  105 + </form>
  106 + </div>
  107 + </div>
  108 + </div>
  109 + </div>
  110 + <div class="modal-footer">
  111 + <button type="button" class="btn btn-default" data-dismiss="modal">关闭
  112 + </button>
  113 + <button type="submit" class="btn btn-primary" value="Validate">提交</button>
  114 + </div>
  115 + </div>
  116 + <!-- /.modal-content -->
  117 + </div>
  118 + <!-- /.modal -->
  119 +</div>
  120 +</div>
59 <script> 121 <script>
60 $(function () { 122 $(function () {
61 $("#table").table({ 123 $("#table").table({
@@ -87,10 +149,9 @@ @@ -87,10 +149,9 @@
87 149
88 formatter: function (value, rowData, rowIndex) { 150 formatter: function (value, rowData, rowIndex) {
89 var div = $("<div>"); 151 var div = $("<div>");
90 - var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div); 152 + var editBtn = $("<button data-target='#myModal' data-toggle='modal'>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
91 //修改 153 //修改
92 editBtn.click(function () { 154 editBtn.click(function () {
93 - alert(rowData.moId);  
94 }); 155 });
95 div.append("&nbsp;"); 156 div.append("&nbsp;");
96 var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div); 157 var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
@@ -163,5 +224,16 @@ @@ -163,5 +224,16 @@
163 function editbtn() { 224 function editbtn() {
164 alert(2); 225 alert(2);
165 } 226 }
  227 +
  228 +
166 </script> 229 </script>
  230 +
  231 +<script src="js/jquery.min.js"></script>
  232 +<script src="js/jquery.ui.custom.js"></script>
  233 +<script src="js/bootstrap.min.js"></script>
  234 +<script src="js/jquery.uniform.js"></script>
  235 +<script src="js/select2.min.js"></script>
  236 +<script src="js/jquery.validate.js"></script>
  237 +<script src="js/unicorn.js"></script>
  238 +<script src="js/unicorn.form_validation.js"></script>
167   239  
1 -<%@page language="java" contentType="text/html;charset=utf-8"%>  
2 -<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 1 +<%@page language="java" contentType="text/html;charset=utf-8" %>
  2 +<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
3 <% 3 <%
4 - String path = request.getContextPath();  
5 - String basePath = request.getScheme() + "://"  
6 - + request.getServerName() + ":" + request.getServerPort()  
7 - + path + "/"; 4 + String path = request.getContextPath();
  5 + String basePath = request.getScheme() + "://"
  6 + + request.getServerName() + ":" + request.getServerPort()
  7 + + path + "/";
8 %> 8 %>
9 <div id="breadcrumb"> 9 <div id="breadcrumb">
10 - <a href="#" title="Go to Home" class="tip-bottom"><i  
11 - class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a> 10 + <a href="#" title="Go to Home" class="tip-bottom"><i
  11 + class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
12 </div> 12 </div>
13 13
14 <div class="container-fluid"> 14 <div class="container-fluid">
15 - <div class="widget-box">  
16 - <div class="widget-title"> 15 + <div class="widget-box">
  16 + <div class="widget-title">
  17 + <h5>Dynamic table</h5>
  18 + </div>
  19 + <!-- 树 -->
  20 + <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
  21 + <div class="widget-title">
  22 + <h5>Tree Title</h5>
  23 + </div>
  24 + <div id="jstree" class="jstree jstree-default" role="tree" aria-multiselectable="true"
  25 + tabindex="0" style="height: 400px;color: black"></div>
  26 + </div>
  27 + <!-- 列表 -->
  28 + <div class="widget-content nopadding" style="margin-left: 300px;">
  29 + <div class="widget-title" style="height: 53px;">
  30 + <div>
  31 + <div class="form-inline" role="form" id="inBoxQueryDiv"
  32 + style=" margin-top: 12px;margin-left: 25px;float: left;">
  33 + <div class="input-group" style="float: left;">
  34 + <span class="input-group-addon">IP：</span>
  35 + <input type="text" id="" class="form-control" placeholder=""/>
  36 + </div>
  37 + <div class="input-group" style="float: left;">
  38 + <span class="input-group-addon">IP：</span>
  39 + <input type="text" id="" class="form-control" placeholder=""/>
  40 + </div>
  41 + <button id="submit" class="btn btn-default">搜索</button>
  42 + </div>
  43 + <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
  44 + </div>
  45 + </div>
  46 + <div id="table"></div>
  47 + </div>
  48 + </div>
  49 +</div>
  50 +<script>
  51 + $(function () {
  52 + var data = [];
  53 + for (var i = 0; i < 20; i++) {
  54 + data.push({
  55 + moName: i,
  56 + moHostIp: "用户" + i,
  57 + moType: i % 3 == 0 ? 0 : 1,
  58 + moStatus: "normal"
  59 + });
  60 + }
  61 + $("#table").table({
  62 + striped: true,
  63 + panelClass: "panel-success",
  64 + pagination: true,
  65 + columns: [{
  66 + title: "监控网元",
  67 + field: "moName"
  68 + }, {
  69 + title: "主机地址",
  70 + field: "moHostIp"
  71 + }, {
  72 + title: "网元类型",
  73 + field: "moType"
  74 + }, {
  75 + title: "网元状态",
  76 + field: "moStatus"
  77 + }, {
  78 + title: "操作",
  79 + formatter: function (value, rowData, rowIndex) {
  80 + var div = $("<div>");
  81 + var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
  82 + //修改
  83 + editBtn.click(function () {
  84 + editTemplate(rowData.inboxTemplateId);
  85 + });
  86 + div.append("&nbsp;");
  87 + var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
  88 + delBtn.click(function () {
17 89
18 - <h5>Dynamic table</h5>  
19 - </div> 90 + });
  91 + return div;
  92 + }
  93 + }],
  94 + data: data
  95 + });
20 96
21 - <!-- 树 -->  
22 - <div  
23 - style="margin-top: 45px; float: left; margin-top: 54px; border: dashed; width: 300px; color: #D3D3D3; height: 580px;">  
24 - <div class="widget-title"> 97 + });
25 98
26 - <h5>Tree Title</h5>  
27 - </div>  
28 - <ul class="ui-widget ui-helper-clearfix" id="icons"  
29 - style="float: left; margin-left: 165px;">  
30 - <li title=".ui-icon-plusthick"  
31 - class="ui-state-default ui-corner-all" onclick="deletebtn()"><span  
32 - class="ui-icon ui-icon-plusthick"></span></li>  
33 - </ul>  
34 - <ul class="ui-widget ui-helper-clearfix" id="icons"  
35 - style="margin-right: 12px;">  
36 - <li title=".ui-icon-minusthick"  
37 - class="ui-state-default ui-corner-all" onclick="editbtn()"><span  
38 - class="ui-icon ui-icon-minusthick"></span></li>  
39 - </ul>  
40 - <div id="continer"></div>  
41 - </div>  
42 - <!-- 列表 -->  
43 - <div class="widget-content nopadding" style="margin-left: 300px;">  
44 - <div class="widget-title" style="height: 53px;">  
45 - <div>  
46 - <div class="form-inline" role="form" id="inBoxQueryDiv"  
47 - style="margin-top: 12px; margin-left: 25px; float: left;">  
48 - <div class="input-group" style="float: left;">  
49 - <span class="input-group-addon">IP：</span> <input type="text"  
50 - id="" class="form-control" placeholder="" />  
51 - </div>  
52 - <div class="input-group" style="float: left;">  
53 - <span class="input-group-addon">IP：</span> <input type="text"  
54 - id="" class="form-control" placeholder="" />  
55 - </div>  
56 - <button id="submit" class="btn btn-default">搜索</button>  
57 - </div>  
58 - <button id="addBtn" class="btn btn-primary"  
59 - style="margin-top: 12px; margin-left: 500px;"  
60 - data-target="#myModal" data-toggle="modal">新增</button>  
61 - </div>  
62 - </div>  
63 - <div id="table"></div>  
64 - </div> 99 +</script>
65 100
66 - <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  
67 - aria-labelledby="myModalLabel" aria-hidden="true">  
68 - <div class="modal-dialog">  
69 - <div class="modal-content">  
70 - <div class="modal-header">  
71 - <button type="button" class="close" data-dismiss="modal"  
72 - aria-hidden="true">&times;</button>  
73 - <h4 class="modal-title" id="myModalLabel">新增</h4>  
74 - </div>  
75 - <div class="modal-body">  
76 - <div class="row-fluid">  
77 - <div class="span12">  
78 - <div class="widget-content nopadding">  
79 - <form action="#" method="get" class="form-horizontal">  
80 - <div class="control-group">  
81 - <label class="control-label" style="float: left;">Normal  
82 - text input</label>  
83 - <div class="controls">  
84 - <input type="text" />  
85 - </div>  
86 - </div>  
87 - <div class="control-group">  
88 - <label class="control-label" style="float: left;">Password  
89 - input</label>  
90 - <div class="controls">  
91 - <input type="password" />  
92 - </div>  
93 - </div>  
94 - <div class="control-group">  
95 - <label class="control-label" style="float: left;">Input  
96 - with description</label>  
97 - <div class="controls">  
98 - <input type="text" />  
99 - </div>  
100 - </div>  
101 - </form>  
102 - </div>  
103 - </div>  
104 - </div>  
105 - </div>  
106 - <div class="modal-footer">  
107 - <button type="button" class="btn btn-default" data-dismiss="modal">关闭  
108 - </button>  
109 - <button type="button" id="submitBtn" class="btn btn-primary">提交更改</button>  
110 - </div>  
111 - </div>  
112 - <!-- /.modal-content -->  
113 - </div>  
114 - <!-- /.modal -->  
115 - </div>  
116 - </div>  
117 -</div>  
118 <script> 101 <script>
119 - $(function() {  
120 - var data = [];  
121 - for (var i = 0; i < 20; i++) {  
122 - data.push({  
123 - moName : i,  
124 - moHostIp : "用户" + i,  
125 - moType : i % 3 == 0 ? 0 : 1,  
126 - moStatus : "normal"  
127 - });  
128 - }  
129 - $("#table").table(  
130 - {  
131 - striped : true,  
132 - panelClass : "panel-success",  
133 - pagination : true,  
134 - columns : [  
135 - {  
136 - title : "监控网元",  
137 - field : "moName"  
138 - },  
139 - {  
140 - title : "主机地址",  
141 - field : "moHostIp"  
142 - },  
143 - {  
144 - title : "网元类型",  
145 - field : "moType"  
146 - },  
147 - {  
148 - title : "网元状态",  
149 - field : "moStatus"  
150 - },  
151 - {  
152 - title : "操作",  
153 - formatter : function(value, rowData, rowIndex) {  
154 - var div = $("<div>");  
155 - var editBtn = $("<button value='"+rowData.mid+"' data-target='#myModal' data-toggle='modal'>").addClass("btn btn-xs btn-success").html("edit").appendTo(div);  
156 - div.append("&nbsp;");  
157 - var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("delete")  
158 - .appendTo(div);  
159 - delBtn.click(function() { 102 + var treeData = [];
  103 + var nodeId2id = function (nodeid) {
  104 + if (nodeid == "#") {
  105 + return 0;
  106 + } else {
  107 + return nodeid.split("_")[1];
  108 + }
  109 + };
  110 +
  111 + var getPath = function (nodeid) {
  112 + var paths = [];
  113 + var num = 0;
  114 + var currentId = nodeid;
  115 + while (currentId != "#") {
  116 + var node = $("#jstree").jstree().get_node(currentId);
  117 + console.log(node);
  118 + paths.push(node.text);
  119 + num++;
  120 + currentId = node.parent
  121 + }
  122 +
  123 + var strPath = "";
  124 + for (var i = 0; i < num; i++) {
  125 + strPath += paths.pop() + "/";
  126 + }
  127 +
  128 + return strPath;
  129 +
  130 + }
160 131
161 - });  
162 - return div;  
163 - }  
164 - } ],  
165 - data : data  
166 - }); 132 + var openTree = function (node_id, level) {
  133 +// console.log("open tree" + node_id);
  134 + var node = $("#jstree").jstree().get_node(node_id);
  135 + $("#jstree").jstree("open_node", node)
  136 + var children = node.children;
  137 +// console.log("open children" +children);
  138 + if (level <= 1)
  139 + return;
  140 + level--;
  141 + $.each(children, function (n, data) {
  142 + openTree(data, level);
  143 + });
  144 + }
167 145
168 - }); 146 + var addType = function (node) {
  147 + var rel = 0;
  148 + var pid;
  149 + var name;
  150 + var isleaf;
  151 + $('#modal_type_update').hide();
  152 + $('#modal_type_del').hide();
  153 + $('#modal_type_add').show();
  154 + $('#myModalLabel').html("添加类型");
  155 + $('#tx_type_id').val(nodeId2id(node.id));
  156 + $('#tx_type_action').val("add");
  157 + $('#tx_new_type_isleaf').val(1);
  158 + $('#tx_new_type_parent').val(getPath(node.id));
169 159
170 - //模拟数据  
171 - var jsonData = [ {  
172 - "id" : "1",  
173 - "name" : "父节点1",  
174 - "url" : "www.baidu.com",  
175 - "pid" : "0"  
176 - }, {  
177 - "id" : "4",  
178 - "name" : "父节点11",  
179 - "url" : "",  
180 - "pid" : "1"  
181 - }, 160 + $('#myModal').modal({keyboard: true});
182 161
183 - {  
184 - "id" : "14",  
185 - "name" : "父节点112",  
186 - "url" : "",  
187 - "pid" : "4"  
188 - }, {  
189 - "id" : "5",  
190 - "name" : "父节点12",  
191 - "url" : "",  
192 - "pid" : "1"  
193 - }, {  
194 - "id" : "6",  
195 - "name" : "父节点13",  
196 - "url" : "",  
197 - "pid" : "1"  
198 - }, {  
199 - "id" : "2",  
200 - "name" : "父节点4",  
201 - "url" : "",  
202 - "pid" : "0"  
203 - }, {  
204 - "id" : "7",  
205 - "name" : "父节点41",  
206 - "url" : "",  
207 - "pid" : "2"  
208 - }, {  
209 - "id" : "8",  
210 - "name" : "父节点42",  
211 - "url" : "",  
212 - "pid" : "2"  
213 - }, {  
214 - "id" : "9",  
215 - "name" : "父节点43",  
216 - "url" : "",  
217 - "pid" : "2"  
218 - }, {  
219 - "id" : "3",  
220 - "name" : "父节点5",  
221 - "url" : "",  
222 - "pid" : "0"  
223 - }, {  
224 - "id" : "10",  
225 - "name" : "父节点51",  
226 - "url" : "",  
227 - "pid" : "3"  
228 - }, {  
229 - "id" : "13",  
230 - "name" : "父节点111",  
231 - "url" : "",  
232 - "pid" : "4"  
233 - }, {  
234 - "id" : "11",  
235 - "name" : "父节点52",  
236 - "url" : "",  
237 - "pid" : "3"  
238 - }, {  
239 - "id" : "12",  
240 - "name" : "父节点53",  
241 - "url" : "",  
242 - "pid" : "3"  
243 - } ]; 162 + return rel;
  163 + };
  164 + var delType = function (id) {
  165 + var rel = 0;
  166 + $('#myModalLabel').html("确认删除?");
  167 + $('#tx_type_action').val("del");
  168 + $('#modal_type_update').hide();
  169 + $('#modal_type_add').hide();
  170 + $('#modal_type_del').show();
  171 + $('#tx_type_id').val(nodeId2id(id));
  172 + $('#myModal').modal({keyboard: true});
  173 + return rel;
  174 + };
  175 + var updateType = function (id, oldName) {
  176 + var rel = 0;
  177 + $('#myModalLabel').html("更新类型");
  178 + $('#tx_type_action').val("update");
  179 + $('#tx_type_id').val(nodeId2id(id));
  180 + $('#tx_update_type_name_old').val(oldName);
  181 + $('#modal_type_update').show();
  182 + $('#modal_type_add').hide();
  183 + $('#modal_type_del').hide();
  184 + $('#myModal').modal({keyboard: true});
244 185
245 - //主方法，运用递归实现  
246 - function createTree(jsons, pid) {  
247 - if (jsons != null) {  
248 - var ul = '<ul class="" style="width: 120px;" >';  
249 - for (var i = 0; i < jsons.length; i++) {  
250 - if (jsons[i].pid == pid) {  
251 - ul += '<input type="checkbox" name="checkBox" value='+jsons[i].id+' style="float: left;margin-top: 6px;width:10px;height:10px;"><li class="tree" value='+jsons[i].id+'><a href="#">'  
252 - + jsons[i].name + "</a></li>";  
253 - ul += createTree(jsons, jsons[i].id);  
254 - }  
255 - }  
256 - ul += "</ul>";  
257 - }  
258 - return ul;  
259 - } 186 + return rel;
  187 + };
260 188
261 - $(function() {  
262 - var ul = createTree(jsonData, 0);  
263 - $("#continer").append(ul);  
264 - //控制菜单的隐藏显示  
265 - $("ul[class] li").each(function() {  
266 - $(this).click(function() {  
267 - $(this).next().toggle();  
268 - });  
269 - }); 189 + var doAddType = function () {
  190 + var pid = $('#tx_type_id').val();
  191 + var name = $('#tx_new_type_name').val();
  192 + var isleaf = 1;
  193 + $.get("type/add", {"pid": pid, "name": name, "isleaf": isleaf},
  194 + function (data, state) {
  195 + $.toaster('添加成功', '添加', 'info');
  196 + refreshTypeTree();
  197 + }
  198 + );
  199 + }
  200 + var doUpdateType = function () {
  201 + var id = $('#tx_type_id').val();
  202 + var name = $('#tx_update_type_name_new').val();
  203 + console.log("update " + id + " name " + name);
  204 + $.get("type/update", {"id": id, "name": name},
  205 + function (data, state) {
  206 + $.toaster('更新成功', '更新', 'info');
  207 + refreshTypeTree();
  208 + }
  209 + );
  210 + }
  211 + var doDelType = function () {
  212 + var id = $('#tx_type_id').val();
  213 + console.log("delete " + id);
  214 + $.get("type/del", {"id": id},
  215 + function (data, state) {
  216 + $('#jstree').jstree("delete_node", $("#" + id));
  217 + }
  218 + );
  219 + }
  220 + $("#btn4type").click(function () {
  221 + console.log("frw");
  222 + if ($("#tx_type_action").val() == "add") {
  223 + doAddType();
  224 + }
  225 + else if ($("#tx_type_action").val() == "update") {
  226 + doUpdateType();
  227 + } else if ($("#tx_type_action").val() == "del") {
  228 + doDelType();
  229 + }
  230 + $('#myModal').dialog('hide');
  231 + });
270 232
271 - });  
272 233
273 - function deletebtn() {  
274 - alert(1);  
275 - } 234 + var refreshTypeTree = function () {
  235 + console.log("refresh tree");
  236 + treeData = []; //重置
  237 + $.get("type/all", function (data, state) {
  238 + console.log(state)
  239 + var jsonData = JSON.parse(data);
  240 + $.each(jsonData.data, function (n, val) {
  241 + var treeNode = {};
  242 + treeNode.id = "node_" + val.typeId;
  243 + treeNode.parent = (val.typeParentId == 0 ? "#" : "node_" + val.typeParentId);
  244 + treeNode.text = val.typeName;
  245 + treeNode.data = val.typeIsLeaf;
  246 + treeData.push(treeNode)
  247 + })
  248 + $('#jstree').jstree(true).settings.core.data = treeData;
  249 + $('#jstree').jstree().refresh(true, true);
  250 +
  251 + setInterval("openTree('#', 3)", 300); //展开三层
  252 + });
  253 + }
  254 +
  255 + $(function () {
  256 +
  257 +
  258 + $('#jstree').jstree({
  259 + "plugins": ["themes", "checkbox", "contextmenu", "ui", "types", "crrm", "core", "status"],
  260 + 'core': {
  261 + "themes": {
  262 + "icons": false
  263 + },
  264 + 'data': treeData,
  265 + 'check_callback': true
  266 + },
  267 + 'contextmenu': {
  268 + "select_node": false,
  269 + "items": {
  270 + "ADD": {
  271 + "label": "添加类型",
  272 + "action": function (obj) {
  273 + var inst = jQuery.jstree.reference(obj.reference);
  274 + var clickedNode = inst.get_node(obj.reference);
  275 + console.log(obj);
  276 + console.log(clickedNode);
  277 + console.log("add operation--clickedNode's id is:" + clickedNode.id);
  278 + addType(clickedNode);
  279 + }
  280 + }, "UPDATE": {
  281 + "label": "修改类型",
  282 + "action": function (obj) {
  283 + var inst = jQuery.jstree.reference(obj.reference);
  284 + var clickedNode = inst.get_node(obj.reference);
  285 + updateType(clickedNode.id, clickedNode.text);
  286 + }
  287 + }, "DEL": {
  288 + "label": "删除类型",
  289 + "action": function (obj) {
  290 + var inst = jQuery.jstree.reference(obj.reference);
  291 + var clickedNode = inst.get_node(obj.reference);
  292 + console.log("del operation--clickedNode's id is:" + clickedNode.id);
  293 + delType(clickedNode.id);
  294 + }
  295 + }, "ADDM": {
  296 + "label": "添加服务对象",
  297 + "action": function (obj) {
  298 + var inst = jQuery.jstree.reference(obj.reference);
  299 + var clickedNode = inst.get_node(obj.reference);
  300 + console.log(obj);
  301 + addMObjType(clickedNode);
  302 + }
  303 + }
  304 + }
  305 + }
  306 + }).bind("loaded.jstree", function (event, data) {
  307 + openTree("#", 3); //展开三层
  308 + });
  309 +
  310 + refreshTypeTree();
  311 +
  312 + });
276 313
277 - function editbtn() {  
278 - alert(2);  
279 - }  
280 -  
281 - $("#submitBtn").click(function(){  
282 - alert(1);  
283 - $("#inBoxQueryDiv").form("submit", {  
284 - submitUrl : '',  
285 - submitData : {  
286 -  
287 - },  
288 - onBeforeSubmit : function() {  
289 -  
290 - },  
291 - success : function(data) {  
292 -  
293 - }  
294 - });  
295 - });  
296 </script> 314 </script>
  315 +
  316 +<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
  317 + aria-labelledby="myModalLabel" aria-hidden="true">
  318 + <div class="modal-dialog" style="width: 300px">
  319 + <div class="modal-content">
  320 + <div class="modal-header">
  321 + <h4 class="modal-title" id="myModalLabel">
  322 + 添加类型
  323 + </h4>
  324 + </div>
  325 + <div class="modal-body">
  326 + <div id="modal_type_add">
  327 + <div class="input-group" style="padding-bottom: 5px">
  328 + <span class="input-group-addon" style="width: 100px">父节点：</span>
  329 + <input type="text" id="tx_new_type_parent" width="50" readonly="true" class="form-control"
  330 + placeholder=""/>
  331 + </div>
  332 + <div class="input-group" style="padding-bottom: 5px">
  333 + <span class="input-group-addon" style="width: 100px">Name：</span>
  334 + <input type="text" id="tx_new_type_name" width="50" class="form-control" placeholder=""/>
  335 + </div>
  336 + <div class="input-group" style="padding-bottom: 5px">
  337 + <span class="input-group-addon" style="width: 100px">子节点：</span>
  338 + <input type="checkbox" id="cb_new_type_isleaf" style="margin-left: 30px" name="appName"
  339 + value="JAVA">
  340 + </div>
  341 + </div>
  342 + <div id="modal_type_update">
  343 + <div class="input-group" style="padding-bottom: 5px">
  344 + <span class="input-group-addon" style="width: 100px">原名称：</span>
  345 + <input type="text" id="tx_update_type_name_old" readonly="true" class="form-control"
  346 + placeholder=""/>
  347 + </div>
  348 + <div class="input-group" style="padding-bottom: 5px">
  349 + <span class="input-group-addon" style="width: 100px">新名称：</span>
  350 + <input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/>
  351 + </div>
  352 + </div>
  353 + <div id="modal_type_del">
  354 + 确认删除该类型节点?
  355 + </div>
  356 + </div>
  357 + <div class="modal-footer">
  358 + <input type="hidden" id="tx_type_action"/>
  359 + <input type="hidden" id="tx_type_id"/>
  360 + <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  361 + <button type="button" id="btn4type" class="btn btn-primary">确认</button>
  362 + </div>
  363 + </div>
  364 + </div>
  365 +</div>