ops / monitor-ui · Commits

Go to a project

Authored by simba
Commit f8f7b7cd552371aab9fb1d0ecb06abd8dbafcd6d 2 parents 5605ab3a 6289ca70 master ... dev-sk dev1019 dev_addtag_ui dev_autoscal_java dev_config_center dev_degrade dev_deploy_image_ui dev_deploy_node dev_deploy_uic_ui dev_deploy_yohosearchservice dev_dock_release_ui dev_docker2_ui dev_host_topo_ui dev_linlong dev_master dev_mip_hbasesource dev_mysql_ui dev_nginx_checkbox dev_nginx_ui dev_sql分页 dev_store_ui dev_switch_nginx dev_ui_topo feature/add-footer-div-20220127 ge_search_compare monitor-ui-fyzh monitor_ui qcloudOnly ralph zyw 短信

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

Inline Side-by-side
Showing 10 changed files with 598 additions and 244 deletions
@@ -5,7 +5,10 @@ package com.ui.contants; @@ -5,7 +5,10 @@ package com.ui.contants;
5 */ 5 */
6 public class HttpUriContants { 6 public class HttpUriContants {
7 7
8 - public static String TEST_GET_URI = "/test/get"; 8 + /*** 机组信息 ****/
  9 + public static final String HOST_GROUP_GETALL = "/hostGroup/getHostGroups";
  10 +
  11 + /*** 机组信息 ****/
9 public static String GET_ALL_TYPE = "/type/query"; 12 public static String GET_ALL_TYPE = "/type/query";
10 13
11 } 14 }
  1 +package com.ui.model.domain;
  2 +
  3 +import lombok.Data;
  4 +
  5 +
  6 +/**
  7 + * Created by yoho on 2016/6/16.
  8 + */
  9 +@Data
  10 +public class MObjectModel {
  11 + private int moId;
  12 +
  13 + private String moName;
  14 +
  15 + private String moHostIp;
  16 +
  17 + private String moTypeName;
  18 +
  19 + private String moStatus;
  20 +
  21 + private int moHostId;
  22 +
  23 + private int moTypeId;
  24 +
  25 + private String moTags;
  26 +
  27 + private String moUrl;
  28 +}
  1 +package com.ui.model.req;
  2 +
  3 +import lombok.Data;
  4 +
  5 +/**
  6 + * Created by yoho on 2016/6/16.
  7 + */
  8 +@Data
  9 +public class MObjectInfoReq extends PageRequest {
  10 +
  11 + String typeIds = "0";
  12 +
  13 + String hostIds = "0";
  14 +
  15 + int isType = 1;
  16 +}
  1 +package com.ui.ctrl;
  2 +
  3 +
  4 +import com.alibaba.fastjson.JSON;
  5 +import com.ui.contants.HttpUriContants;
  6 +import com.ui.http.HttpRestClient;
  7 +import com.ui.model.BaseResponse;
  8 +import com.ui.model.req.PageRequest;
  9 +import org.slf4j.Logger;
  10 +import org.slf4j.LoggerFactory;
  11 +import org.springframework.beans.factory.annotation.Autowired;
  12 +import org.springframework.stereotype.Controller;
  13 +import org.springframework.web.bind.annotation.RequestMapping;
  14 +import org.springframework.web.bind.annotation.ResponseBody;
  15 +
  16 +/**
  17 + * Created by yoho on 2016/6/14.
  18 + * 查询机器信息
  19 + */
  20 +@Controller
  21 +@RequestMapping("hostGroup")
  22 +public class HostGroupCtrl {
  23 +
  24 + Logger log = LoggerFactory.getLogger(HostGroupCtrl.class);
  25 +
  26 + @Autowired
  27 + HttpRestClient httpRestClient;
  28 +
  29 +
  30 + @RequestMapping("/getHostGroups")
  31 + @ResponseBody
  32 + public BaseResponse getHostGroups(PageRequest req) {
  33 + BaseResponse response=httpRestClient.defaultPost(HttpUriContants.HOST_GROUP_GETALL, req, BaseResponse.class);
  34 + System.out.println("*****************************"+ JSON.toJSON(response));
  35 + return response;
  36 + }
  37 +
  38 +
  39 +}
  40 +
  1 +package com.ui.ctrl;
  2 +
  3 +import com.ui.http.HttpRestClient;
  4 +import com.ui.model.BaseResponse;
  5 +import com.ui.model.req.MObjectInfoReq;
  6 +import com.ui.model.req.PageRequest;
  7 +import org.apache.commons.lang.StringUtils;
  8 +import org.springframework.beans.factory.annotation.Autowired;
  9 +import org.springframework.web.bind.annotation.*;
  10 +
  11 +/**
  12 + * Created by yoho on 2016/6/16.
  13 + */
  14 +@RestController
  15 +@RequestMapping(value = "/mobject")
  16 +public class MObjectInfoCtrl {
  17 +
  18 + @Autowired
  19 + HttpRestClient httpRestClient;
  20 +
  21 + @RequestMapping(value = "/query", method = RequestMethod.POST)
  22 + public BaseResponse queryAllMObjectInfo(MObjectInfoReq request) {
  23 +
  24 + BaseResponse response = httpRestClient.defaultPost("/mobject/query", request, BaseResponse.class);
  25 +
  26 + return response;
  27 + }
  28 +
  29 +
  30 +}
@@ -33,6 +33,7 @@ @@ -33,6 +33,7 @@
33 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script> 33 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script>
34 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script> 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.validate.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.form.js" charset="UTF-8" type="text/javascript"></script>
36 <link rel="stylesheet" href="./js/jstree/themes/default/style.min.css"/> 37 <link rel="stylesheet" href="./js/jstree/themes/default/style.min.css"/>
37 <script src="./js/jstree/jstree.min.js"></script> 38 <script src="./js/jstree/jstree.min.js"></script>
38 <script> 39 <script>
@@ -45,6 +45,7 @@ var opMap = { @@ -45,6 +45,7 @@ var opMap = {
45 "contain" : "包含", 45 "contain" : "包含",
46 "not_contain" : "不包含" 46 "not_contain" : "不包含"
47 }; 47 };
  48 +
48 //全局的panel的样式 49 //全局的panel的样式
49 var panelStyle = "panel-primary"; 50 var panelStyle = "panel-primary";
50 51
@@ -11,28 +11,15 @@ @@ -11,28 +11,15 @@
11 <div class="widget-box"> 11 <div class="widget-box">
12 <div class="widget-title"> 12 <div class="widget-title">
13 13
14 - <h5>Dynamic table</h5> 14 + <h5>机组信息列表</h5>
15 </div> 15 </div>
16 <div class="widget-content nopadding"> 16 <div class="widget-content nopadding">
17 <div class="widget-title" style="height: 53px;"> 17 <div class="widget-title" style="height: 53px;">
18 <div> 18 <div>
19 - <div class="form-inline" role="form" id="inBoxQueryDiv"  
20 - style=" margin-top: 12px;margin-left: 25px;float: left;">  
21 - <div class="input-group" style="float: left;">  
22 - <span class="input-group-addon">IP：</span>  
23 - <input type="text" id="" class="form-control" placeholder=""/>  
24 - </div>  
25 - <div class="input-group" style="float: left;">  
26 - <span class="input-group-addon">IP：</span>  
27 - <input type="text" id="" class="form-control" placeholder=""/>  
28 - </div>  
29 - <button id="submit" class="btn btn-default">搜索</button>  
30 - </div>  
31 <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 900px;">新增</button> 19 <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 900px;">新增</button>
32 </div> 20 </div>
33 </div> 21 </div>
34 - <div id="table">  
35 - 22 + <div id="hostGroupTable">
36 23
37 </div> 24 </div>
38 </div> 25 </div>
@@ -40,30 +27,42 @@ @@ -40,30 +27,42 @@
40 </div> 27 </div>
41 <script> 28 <script>
42 $(function () { 29 $(function () {
43 - var data = [];  
44 - for (var i = 0; i < 20; i++) {  
45 - data.push({  
46 - userId: i,  
47 - userName: "用户" + i,  
48 - status: i % 3 == 0 ? 0 : 1  
49 - });  
50 - }  
51 - $("#table").table({  
52 - striped: true,  
53 - panelClass: "panel-success",  
54 - pagination: true,  
55 - columns: [{  
56 - title: "用户id",  
57 - field: "userId" 30 +
  31 + //加载表格
  32 + $("#hostGroupTable").table({
  33 + columnAutoWidth : false,
  34 + url : contextPath+"hostGroup/getHostGroups",
  35 + striped : true,
  36 + title : "主机信息列表",
  37 + pagination : true,
  38 + pageSize : 10,
  39 + loadFilter : function(data) {
  40 + return defaultLoadFilter(data);
  41 + },
  42 + columns : [{
  43 + title : "ID",
  44 + field : "id",
  45 + width : "5%"
  46 + }, {
  47 + title : "机组名",
  48 + field : "groupName",
  49 + width : "8%"
58 }, { 50 }, {
59 - title: "用户名称",  
60 - field: "userName" 51 + title : "createTime",
  52 + field : "createTime",
  53 + width : "10%"
61 }, { 54 }, {
62 - title: "状态",  
63 - field: "status"  
64 - }],  
65 - data: data 55 + title : "updateTime",
  56 + field : "updateTime",
  57 + width : "5%"
  58 +
  59 + },{
  60 + title : "操作",
  61 + field : "op",
  62 + width : "15%"
  63 + }]
66 }); 64 });
  65 +
67 }); 66 });
68 </script> 67 </script>
69   68  
  1 +<%@page language="java" contentType="text/html;charset=utf-8" %>
  2 +<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3 +<%
  4 + String path = request.getContextPath();
  5 + String basePath = request.getScheme() + "://"
  6 + + request.getServerName() + ":" + request.getServerPort()
  7 + + path + "/";
  8 +%>
  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>
  12 +</div>
  13 +
  14 +<div class="container-fluid">
  15 + <div class="widget-box">
  16 + <div class="widget-title">
  17 +
  18 + <h5>Dynamic table</h5>
  19 + </div>
  20 + <!-- 树 -->
  21 + <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
  22 + <div class="widget-title">
  23 +
  24 + <h5>Tree Title</h5>
  25 + </div>
  26 + <ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">
  27 + <li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span
  28 + class="ui-icon ui-icon-plusthick"></span></li>
  29 + </ul>
  30 + <ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">
  31 + <li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span
  32 + class="ui-icon ui-icon-minusthick"></span></li>
  33 + </ul>
  34 + <div id="continer"></div>
  35 + </div>
  36 + <!-- 列表 -->
  37 + <div class="widget-content nopadding" style="margin-left: 300px;">
  38 + <div class="widget-title" style="height: 53px;">
  39 + <div>
  40 + <div class="form-inline" role="form" id="inBoxQueryDiv"
  41 + style=" margin-top: 12px;margin-left: 25px;float: left;">
  42 + <div class="input-group" style="float: left;">
  43 + <span class="input-group-addon">IP：</span>
  44 + <input type="text" id="" class="form-control" placeholder=""/>
  45 + </div>
  46 + <div class="input-group" style="float: left;">
  47 + <span class="input-group-addon">IP：</span>
  48 + <input type="text" id="" class="form-control" placeholder=""/>
  49 + </div>
  50 + <button id="submit" class="btn btn-default">搜索</button>
  51 + </div>
  52 + <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
  53 + </div>
  54 + </div>
  55 + <div id="table"></div>
  56 + </div>
  57 + </div>
  58 +</div>
  59 +<script>
  60 + $(function () {
  61 + $("#table").table({
  62 + url: contextPath + "/mobject/query",
  63 + striped: true,
  64 + panelClass: "panel-success",
  65 + pagination: true,
  66 + pageSize: 10,
  67 + loadFilter: function (data) {
  68 + return defaultLoadFilter(data);
  69 + },
  70 + columns: [{
  71 + title: "名称",
  72 + field: "moName"
  73 + }, {
  74 + title: "所属主机",
  75 + field: "moHostIp"
  76 + }, {
  77 + title: "类型",
  78 + field: "moTypeName"
  79 + }, {
  80 + title: "状态",
  81 + field: "moStatus"
  82 + }, {
  83 + title: "标签",
  84 + field: "moTags"
  85 + }, {
  86 + title: "操作",
  87 +
  88 + formatter: function (value, rowData, rowIndex) {
  89 + var div = $("<div>");
  90 + var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
  91 + //修改
  92 + editBtn.click(function () {
  93 + alert(rowData.moId);
  94 + });
  95 + div.append("&nbsp;");
  96 + var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
  97 + delBtn.click(function () {
  98 +
  99 + });
  100 + return div;
  101 + }
  102 + }],
  103 + /* data: data*/
  104 + });
  105 +
  106 + });
  107 +
  108 + //模拟数据
  109 + var jsonData = [
  110 + {"id": "1", "name": "父节点1", "url": "www.baidu.com", "pid": "0"},
  111 + {"id": "4", "name": "父节点11", "url": "", "pid": "1"},
  112 +
  113 + {"id": "14", "name": "父节点112", "url": "", "pid": "4"},
  114 + {"id": "5", "name": "父节点12", "url": "", "pid": "1"},
  115 + {"id": "6", "name": "父节点13", "url": "", "pid": "1"},
  116 + {"id": "2", "name": "父节点4", "url": "", "pid": "0"},
  117 + {"id": "7", "name": "父节点41", "url": "", "pid": "2"},
  118 + {"id": "8", "name": "父节点42", "url": "", "pid": "2"},
  119 + {"id": "9", "name": "父节点43", "url": "", "pid": "2"},
  120 + {"id": "3", "name": "父节点5", "url": "", "pid": "0"},
  121 + {"id": "10", "name": "父节点51", "url": "", "pid": "3"},
  122 + {"id": "13", "name": "父节点111", "url": "", "pid": "4"},
  123 + {"id": "11", "name": "父节点52", "url": "", "pid": "3"},
  124 + {"id": "12", "name": "父节点53", "url": "", "pid": "3"}
  125 + ];
  126 +
  127 +
  128 + //主方法，运用递归实现
  129 + function createTree(jsons, pid) {
  130 + if (jsons != null) {
  131 + var ul = '<ul class="" style="width: 120px;" >';
  132 + for (var i = 0; i < jsons.length; i++) {
  133 + if (jsons[i].pid == pid) {
  134 + 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="#">' + jsons[i].name + "</a></li>";
  135 + ul += createTree(jsons, jsons[i].id);
  136 + }
  137 + }
  138 + ul += "</ul>";
  139 + }
  140 + return ul;
  141 + }
  142 +
  143 + $(function () {
  144 + var ul = createTree(jsonData, 0);
  145 + $("#continer").append(ul);
  146 + //控制菜单的隐藏显示
  147 + $("ul[class] li").each(function () {
  148 + $(this).click(function () {
  149 + $(this).next().toggle();
  150 + });
  151 + });
  152 +
  153 + });
  154 +
  155 + var dom = document.getElementById("icons");
  156 + var str = dom.getAttribute("style");
  157 + str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
  158 + dom.setAttribute("style", str);
  159 + function deletebtn() {
  160 + alert(1);
  161 + }
  162 +
  163 + function editbtn() {
  164 + alert(2);
  165 + }
  166 +</script>
  167 +
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 17
18 - <h5>Dynamic table</h5>  
19 - </div>  
20 - <!-- 树 -->  
21 - <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">  
22 - <div class="widget-title">  
23 -  
24 - <h5>Tree Title</h5>  
25 - </div>  
26 - <ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">  
27 - <li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span  
28 - class="ui-icon ui-icon-plusthick"></span></li>  
29 - </ul>  
30 - <ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">  
31 - <li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span  
32 - class="ui-icon ui-icon-minusthick"></span></li>  
33 - </ul>  
34 - <div id="continer"></div>  
35 - <div id="jstree"></div>  
36 - </div>  
37 - <!-- 列表 -->  
38 - <div class="widget-content nopadding" style="margin-left: 300px;">  
39 - <div class="widget-title" style="height: 53px;">  
40 - <div>  
41 - <div class="form-inline" role="form" id="inBoxQueryDiv"  
42 - style=" margin-top: 12px;margin-left: 25px;float: left;">  
43 - <div class="input-group" style="float: left;">  
44 - <span class="input-group-addon">IP：</span>  
45 - <input type="text" id="" class="form-control" placeholder=""/>  
46 - </div>  
47 - <div class="input-group" style="float: left;">  
48 - <span class="input-group-addon">IP：</span>  
49 - <input type="text" id="" class="form-control" placeholder=""/>  
50 - </div>  
51 - <button id="submit" class="btn btn-default">搜索</button>  
52 - </div>  
53 - <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>  
54 - </div>  
55 - </div>  
56 - <div id="table"></div>  
57 - </div>  
58 - </div>  
59 -</div>  
60 -<script>  
61 - $(function () {  
62 - var data = [];  
63 - for (var i = 0; i < 20; i++) {  
64 - data.push({  
65 - moName: i,  
66 - moHostIp: "用户" + i,  
67 - moType: i % 3 == 0 ? 0 : 1,  
68 - moStatus: "normal"  
69 - });  
70 - }  
71 - $("#table").table({  
72 - striped: true,  
73 - panelClass: "panel-success",  
74 - pagination: true,  
75 - columns: [{  
76 - title: "监控网元",  
77 - field: "moName"  
78 - }, {  
79 - title: "主机地址",  
80 - field: "moHostIp"  
81 - }, {  
82 - title: "网元类型",  
83 - field: "moType"  
84 - }, {  
85 - title: "网元状态",  
86 - field: "moStatus"  
87 - }, {  
88 - title: "操作",  
89 - formatter: function (value, rowData, rowIndex) {  
90 - var div = $("<div>");  
91 - var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);  
92 - //修改  
93 - editBtn.click(function () {  
94 - editTemplate(rowData.inboxTemplateId);  
95 - });  
96 - div.append("&nbsp;");  
97 - var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);  
98 - delBtn.click(function () {  
99 -  
100 - });  
101 - return div;  
102 - }  
103 - }],  
104 - data: data  
105 - });  
106 -  
107 - }); 18 + <h5>Dynamic table</h5>
  19 + </div>
108 20
  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">
109 25
  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>
110 65
111 -  
112 -  
113 -  
114 - var dom = document.getElementById("icons");  
115 - var str = dom.getAttribute("style");  
116 - str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");  
117 - dom.setAttribute("style", str);  
118 - function deletebtn() {  
119 - alert(1);  
120 - }  
121 -  
122 - function editbtn() {  
123 - alert(2);  
124 - }  
125 -</script>  
126 - 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>
127 <script> 118 <script>
128 - var treeData = [];  
129 - var addType = function (id, pid, name, isleaf) {  
130 - var rel = 0;  
131 -  
132 - $.get("type/add",  
133 - {  
134 - "id": id, "pid": pid, "name": name, "isleaf": isleaf  
135 - }  
136 - ,  
137 - function (data, state) {  
138 -  
139 - }  
140 - );  
141 -  
142 - return rel;  
143 - };  
144 - var delType = function () {  
145 - var rel = 0;  
146 - $.get("type/del", function (data, state) { 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() {
147 160
  161 + });
  162 + return div;
  163 + }
  164 + } ],
  165 + data : data
  166 + });
148 167
149 - }); 168 + });
150 169
151 - return rel;  
152 - };  
153 - var updateType = function () {  
154 - var rel = 0; 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 + },
155 182
  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 + } ];
156 244
157 - return rel;  
158 - }; 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 + }
159 260
160 - $(function () {  
161 - $.get("type/all", function (data, state) {  
162 - console.log(state)  
163 - console.log(data);  
164 - var jsonData = JSON.parse(data);  
165 - treeData=[]; //重置  
166 - $.each(jsonData, function (n, val) {  
167 - var treeNode = {};  
168 - treeNode.id = "" + val.typeId;  
169 - treeNode.parent = "" + (val.typeParentId == 0 ? "#" : val.typeParentId);  
170 - treeNode.text = val.typeName;  
171 - treeData.push(treeNode)  
172 - }) 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 + });
173 270
174 - $('#jstree').jstree({  
175 - "plugins": ["themes", "checkbox", "contextmenu", "ui", "types"],  
176 - 'core': {  
177 - "themes": {  
178 - "icons": false  
179 - },  
180 - 'data': treeData  
181 - },  
182 - 'contextmenu': {  
183 - "items": {  
184 - "ADD": {  
185 - "label": "ADD",  
186 - "action": function (obj) {  
187 - var inst = jQuery.jstree.reference(obj.reference);  
188 - var clickedNode = inst.get_node(obj.reference);  
189 - alert("add operation--clickedNode's id is:" + clickedNode.id);  
190 - }  
191 - }, "DEL": {  
192 - "label": "DEL",  
193 - "action": function (obj) {  
194 - var inst = jQuery.jstree.reference(obj.reference);  
195 - var clickedNode = inst.get_node(obj.reference);  
196 - console.log("del operation--clickedNode's id is:" + clickedNode.id);  
197 - addType()  
198 - }  
199 - }, "UPDATE": {  
200 - "label": "UPDATE",  
201 - "action": function (obj) {  
202 - var inst = jQuery.jstree.reference(obj.reference);  
203 - var clickedNode = inst.get_node(obj.reference);  
204 - alert("update operation--clickedNode's id is:" + clickedNode.id);  
205 - }  
206 - }  
207 - }  
208 - }  
209 - }).bind("loaded.jstree", function (event, data) {  
210 - $(this).jstree("open_all");  
211 - }); 271 + });
212 272
213 -// .bind("select_node.jstree", function(event, data) {  
214 -//  
215 -// var evt = window.event || event;  
216 -// var button = evt.which || evt.button;  
217 -// console.log("fdfdfdf"+button);  
218 -// if( button != 1 ) return false;  
219 -//  
220 -// })  
221 - }); 273 + function deletebtn() {
  274 + alert(1);
  275 + }
222 276
223 -  
224 - });  
225 -  
226 -  
227 -</script>  
  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>