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 {
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";
/*** 机组信息 ****/
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";
}
... ...
... ... @@ -42,5 +42,20 @@ public class HostGroupCtrl {
}
@RequestMapping("/getAllGroups")
@ResponseBody
public BaseResponse getAllGroups() {
try{
BaseResponse response=httpRestClient.defaultPost(HttpUriContants.HOST_ALL_GROUPS, null, BaseResponse.class);
return response;
}catch (Exception e){
log.error("getAllGroups error",e);
return null;
}
}
}
... ...
package com.ui.ctrl.type;
package com.ui.ctrl;
import com.alibaba.fastjson.JSONObject;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import org.slf4j.Logger;
... ... @@ -10,8 +11,6 @@ import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
/**
* Created by fruwei on 2016/6/16.
*/
... ... @@ -30,7 +29,7 @@ public class TypeCtrl {
logger.debug("get all type");
strType = httpClient.defaultGet(HttpUriContants.GET_ALL_TYPE, String.class);
strType = httpClient.defaultGet(HttpUriContants.TYPE_GET_ALL, String.class);
logger.info("all type: {}", strType);
... ... @@ -40,33 +39,53 @@ public class TypeCtrl {
@RequestMapping("/add")
@ResponseBody
public String addType(@RequestParam int id, @RequestParam int name, @RequestParam int pid, @RequestParam boolean isLeaf) {
public String addType(@RequestParam String name, @RequestParam int pid, @RequestParam int isleaf) {
String rel;
logger.info("add type name:{},pid:{},isLeaf{}", name, pid, isleaf);
return "ok";
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() {
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 int name) {
String strType = "";
public String updateType(@RequestParam int id, @RequestParam String name) {
String rel = "";
logger.debug("get all type");
logger.info("update type id {} ,name {}", id, name);
strType = httpClient.defaultGet(HttpUriContants.GET_ALL_TYPE, String.class);
JSONObject req=new JSONObject();
logger.info("all type: {}", strType);
req.put("typeId",id);
req.put("typeName",name);
return strType;
rel = httpClient.defaultPost(HttpUriContants.TYPE_UPDATE, req,String.class);
logger.info("update type: {}", rel);
return rel;
}
}
... ...
... ... @@ -60,7 +60,7 @@
</appender>
<!-- root级别 DEBUG -->
<root level="DEBUG">
<root level="INFO">
<!-- 控制台输出 -->
<appender-ref ref="STDOUT" />
<!-- 文件输出 -->
... ...
... ... @@ -48,7 +48,7 @@
console.log(state)
console.log(data);
var jsonData = JSON.parse(data);
treeData.removeAll(); //重置
treeData=[]; //重置
$.each(jsonData, function (n, val) {
var treeNode = {};
treeNode.id = "" + val.typeId;
... ...
... ... @@ -21,6 +21,7 @@
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css" />
<link rel="stylesheet" href="<%=basePath %>css/uniform.css" />
<link rel="stylesheet" href="<%=basePath %>css/select2.css" />
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/default/style.css"/>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
... ... @@ -34,8 +35,9 @@
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<link rel="stylesheet" href="./js/jstree/themes/default/style.min.css"/>
<script src="./js/jstree/jstree.min.js"></script>
<script src="<%=basePath %>js/jstree/jstree.min.js"></script>
<script src="<%=basePath %>js/jquery.toaster.js"></script>
<script>
var contextPath='<%=basePath %>';
</script>
... ... @@ -53,11 +55,10 @@
<div id="sidebar">
<ul>
<li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
<li class="" id="jsptablejsp" onclick="clickMenuToPage('/jsp/table.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>Tables</span></a></li>
<li class="" id="jsptablejsp" onclick="clickMenuToPage('jsp/table.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>test</span></a></li>
<li class="" id="jspmobjectmobjectInfojsp" onclick="clickMenuToPage('jsp/mobject/mobjectInfo.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>Tables</span></a></li>
<li class="" id="jsphosthostGroupListjsp" onclick="clickMenuToPage('jsp/host/hostGroupList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机组</span></a></li>
<li class="" id="jsphosthostInfoListjsp" onclick="clickMenuToPage('jsp/host/hostInfoList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机信息</span></a></li>
</ul>
</div>
<!-- 右侧具体内容 -->
... ...
/***********************************************************************************
* Add Array.indexOf *
***********************************************************************************/
(function ()
{
if (typeof Array.prototype.indexOf !== 'function')
{
Array.prototype.indexOf = function(searchElement, fromIndex)
{
for (var i = (fromIndex || 0), j = this.length; i < j; i += 1)
{
if ((searchElement === undefined) || (searchElement === null))
{
if (this[i] === searchElement)
{
return i;
}
}
else if (this[i] === searchElement)
{
return i;
}
}
return -1;
};
}
})();
/**********************************************************************************/
(function ($,undefined)
{
var toasting =
{
gettoaster : function ()
{
var toaster = $('#' + settings.toaster.id);
if(toaster.length < 1)
{
toaster = $(settings.toaster.template).attr('id', settings.toaster.id).css(settings.toaster.css).addClass(settings.toaster['class']);
if ((settings.stylesheet) && (!$("link[href=" + settings.stylesheet + "]").length))
{
$('head').appendTo('<link rel="stylesheet" href="' + settings.stylesheet + '">');
}
$(settings.toaster.container).append(toaster);
}
return toaster;
},
notify : function (title, message, priority)
{
var $toaster = this.gettoaster();
var delimiter = (title && message) ? settings.toast.defaults.delimiter : '';
var $toast = $(settings.toast.template.replace('%priority%', priority).replace('%delimiter%', delimiter)).hide().css(settings.toast.css).addClass(settings.toast['class']);
$('.title', $toast).css(settings.toast.csst).html(title);
$('.message', $toast).css(settings.toast.cssm).html(message);
if ((settings.debug) && (window.console))
{
console.log(toast);
}
$toaster.append(settings.toast.display($toast));
if (settings.donotdismiss.indexOf(priority) === -1)
{
var timeout = (typeof settings.timeout === 'number') ? settings.timeout : ((typeof settings.timeout === 'object') && (priority in settings.timeout)) ? settings.timeout[priority] : 1500;
setTimeout(function()
{
settings.toast.remove($toast, function()
{
$toast.remove();
});
}, timeout);
}
}
};
var defaults =
{
'toaster' :
{
'id' : 'toaster',
'container' : 'body',
'template' : '<div></div>',
'class' : 'toaster',
'css' :
{
'position' : 'fixed',
'top' : '10px',
'right' : '10px',
'width' : '300px',
'zIndex' : 50000
}
},
'toast' :
{
'template' :
'<div class="alert alert-%priority% alert-dismissible" role="alert">' +
'<button type="button" class="close" data-dismiss="alert">' +
'<span aria-hidden="true">&times;</span>' +
'<span class="sr-only">Close</span>' +
'</button>' +
'<span class="title"></span>%delimiter% <span class="message"></span>' +
'</div>',
'defaults' :
{
'title' : 'Notice',
'priority' : 'success',
'delimiter' : ':'
},
'css' : {},
'cssm' : {},
'csst' : { 'fontWeight' : 'bold' },
'fade' : 'slow',
'display' : function ($toast)
{
return $toast.fadeIn(settings.toast.fade);
},
'remove' : function ($toast, callback)
{
return $toast.animate(
{
opacity : '0',
padding : '0px',
margin : '0px',
height : '0px'
},
{
duration : settings.toast.fade,
complete : callback
}
);
}
},
'debug' : false,
'timeout' : 1500,
'stylesheet' : null,
'donotdismiss' : []
};
var settings = {};
$.extend(settings, defaults);
$.toaster = function (options)
{
if (typeof options === 'object')
{
if ('settings' in options)
{
settings = $.extend(true, settings, options.settings);
}
}
else
{
var values = Array.prototype.slice.call(arguments, 0);
var labels = ['message', 'title', 'priority'];
options = {};
for (var i = 0, l = values.length; i < l; i += 1)
{
options[labels[i]] = values[i];
}
}
var title = (('title' in options) && (typeof options.title === 'string')) ? options.title : settings.toast.defaults.title;
var message = ('message' in options) ? options.message : null;
var priority = (('priority' in options) && (typeof options.priority === 'string')) ? options.priority : settings.toast.defaults.priority;
if (message !== null)
{
toasting.notify(title, message, priority);
}
};
$.toaster.reset = function ()
{
settings = {};
$.extend(settings, defaults);
};
})(jQuery);
... ...
... ... @@ -300,7 +300,7 @@
box-shadow: inset 0 0 1px #cccccc;
}
.jstree-default .jstree-clicked {
background: #beebff;
background: #EAEAEA;
border-radius: 2px;
box-shadow: inset 0 0 1px #999999;
}
... ...
... ... @@ -71,5 +71,19 @@
}
});
}
$("#groupId").select({
firstText : "请选择分组类型",
firstValue : 0,
className : "form-control",
url : contextPath + "/NoFilterController.do?method=getEnumForSelect",
queryParams : {
className : "GroupTypeEnum"
},
loadFilter : function(data) {
return defaultLoadFilter(data);
},
value : 0
});
});
</script>
\ No newline at end of file
... ...
... ... @@ -49,13 +49,75 @@
</div>
<button id="submit" class="btn btn-default">搜索</button>
</div>
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;" data-target="#myModal" data-toggle="modal">新增</button>
</div>
</div>
<div id="table"></div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<div class="widget-content nopadding">
<form action="/mobject/add" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" style="float: left;">名称</label>
<div class="controls">
<input type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="float: left;">所属主机</label>
<div class="controls">
<input type="text" placeholder="请填写主机IP" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="float: left;">类型</label>
<div class="controls">
<input type="text" value="" readonly="readonly" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="float: left;">标签</label>
<div class="controls">
<input type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="float: left;">域名</label>
<div class="controls">
<input type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="submit" class="btn btn-primary" value="Validate">提交</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
<script>
$(function () {
$("#table").table({
... ... @@ -87,10 +149,9 @@
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
var editBtn = $("<button data-target='#myModal' data-toggle='modal'>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
//修改
editBtn.click(function () {
alert(rowData.moId);
});
div.append("&nbsp;");
var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
... ... @@ -163,5 +224,16 @@
function editbtn() {
alert(2);
}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.uniform.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/unicorn.js"></script>
<script src="js/unicorn.form_validation.js"></script>
 
\ No newline at end of file
... ...
<%@page language="java" contentType="text/html;charset=utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<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>
<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">
<div class="widget-box">
<div class="widget-title">
<h5>Dynamic table</h5>
</div>
<!-- 树 -->
<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>
<div id="jstree" class="jstree jstree-default" role="tree" aria-multiselectable="true"
tabindex="0" style="height: 400px;color: black"></div>
</div>
<!-- 列表 -->
<div class="widget-content nopadding" style="margin-left: 300px;">
<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: 500px;">新增</button>
</div>
</div>
<div id="table"></div>
</div>
</div>
</div>
<script>
$(function () {
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
moName: i,
moHostIp: "用户" + i,
moType: i % 3 == 0 ? 0 : 1,
moStatus: "normal"
});
}
$("#table").table({
striped: true,
panelClass: "panel-success",
pagination: true,
columns: [{
title: "监控网元",
field: "moName"
}, {
title: "主机地址",
field: "moHostIp"
}, {
title: "网元类型",
field: "moType"
}, {
title: "网元状态",
field: "moStatus"
}, {
title: "操作",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
//修改
editBtn.click(function () {
editTemplate(rowData.inboxTemplateId);
});
div.append("&nbsp;");
var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
delBtn.click(function () {
<h5>Dynamic table</h5>
</div>
});
return div;
}
}],
data: data
});
<!-- 树 -->
<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;">
<li title=".ui-icon-plusthick"
class="ui-state-default ui-corner-all" onclick="deletebtn()"><span
class="ui-icon ui-icon-plusthick"></span></li>
</ul>
<ul class="ui-widget ui-helper-clearfix" id="icons"
style="margin-right: 12px;">
<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>
<!-- 列表 -->
<div class="widget-content nopadding" style="margin-left: 300px;">
<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: 500px;"
data-target="#myModal" data-toggle="modal">新增</button>
</div>
</div>
<div id="table"></div>
</div>
</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">&times;</button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<div class="widget-content nopadding">
<form action="#" method="get" class="form-horizontal">
<div class="control-group">
<label class="control-label" style="float: left;">Normal
text input</label>
<div class="controls">
<input type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="float: left;">Password
input</label>
<div class="controls">
<input type="password" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="float: left;">Input
with description</label>
<div class="controls">
<input type="text" />
</div>
</div>
</form>
</div>
</div>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
<script>
$(function() {
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
moName : i,
moHostIp : "用户" + i,
moType : i % 3 == 0 ? 0 : 1,
moStatus : "normal"
});
}
$("#table").table(
{
striped : true,
panelClass : "panel-success",
pagination : true,
columns : [
{
title : "监控网元",
field : "moName"
},
{
title : "主机地址",
field : "moHostIp"
},
{
title : "网元类型",
field : "moType"
},
{
title : "网元状态",
field : "moStatus"
},
{
title : "操作",
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button value='"+rowData.mid+"' data-target='#myModal' data-toggle='modal'>").addClass("btn btn-xs btn-success").html("edit").appendTo(div);
div.append("&nbsp;");
var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("delete")
.appendTo(div);
delBtn.click(function() {
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;
}
});
return div;
}
} ],
data : data
});
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));
//模拟数据
var jsonData = [ {
"id" : "1",
"name" : "父节点1",
"url" : "www.baidu.com",
"pid" : "0"
}, {
"id" : "4",
"name" : "父节点11",
"url" : "",
"pid" : "1"
},
$('#myModal').modal({keyboard: true});
{
"id" : "14",
"name" : "父节点112",
"url" : "",
"pid" : "4"
}, {
"id" : "5",
"name" : "父节点12",
"url" : "",
"pid" : "1"
}, {
"id" : "6",
"name" : "父节点13",
"url" : "",
"pid" : "1"
}, {
"id" : "2",
"name" : "父节点4",
"url" : "",
"pid" : "0"
}, {
"id" : "7",
"name" : "父节点41",
"url" : "",
"pid" : "2"
}, {
"id" : "8",
"name" : "父节点42",
"url" : "",
"pid" : "2"
}, {
"id" : "9",
"name" : "父节点43",
"url" : "",
"pid" : "2"
}, {
"id" : "3",
"name" : "父节点5",
"url" : "",
"pid" : "0"
}, {
"id" : "10",
"name" : "父节点51",
"url" : "",
"pid" : "3"
}, {
"id" : "13",
"name" : "父节点111",
"url" : "",
"pid" : "4"
}, {
"id" : "11",
"name" : "父节点52",
"url" : "",
"pid" : "3"
}, {
"id" : "12",
"name" : "父节点53",
"url" : "",
"pid" : "3"
} ];
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});
//主方法，运用递归实现
function createTree(jsons, pid) {
if (jsons != null) {
var ul = '<ul class="" style="width: 120px;" >';
for (var i = 0; i < jsons.length; i++) {
if (jsons[i].pid == pid) {
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>";
ul += createTree(jsons, jsons[i].id);
}
}
ul += "</ul>";
}
return ul;
}
return rel;
};
$(function() {
var ul = createTree(jsonData, 0);
$("#continer").append(ul);
//控制菜单的隐藏显示
$("ul[class] li").each(function() {
$(this).click(function() {
$(this).next().toggle();
});
});
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');
});
});
function deletebtn() {
alert(1);
}
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();
});
function editbtn() {
alert(2);
}
$("#submitBtn").click(function(){
alert(1);
$("#inBoxQueryDiv").form("submit", {
submitUrl : '',
submitData : {
},
onBeforeSubmit : function() {
},
success : function(data) {
}
});
});
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 300px">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
添加类型
</h4>
</div>
<div class="modal-body">
<div id="modal_type_add">
<div class="input-group" style="padding-bottom: 5px">
<span class="input-group-addon" style="width: 100px">父节点：</span>
<input type="text" id="tx_new_type_parent" width="50" readonly="true" class="form-control"
placeholder=""/>
</div>
<div class="input-group" style="padding-bottom: 5px">
<span class="input-group-addon" style="width: 100px">Name：</span>
<input type="text" id="tx_new_type_name" width="50" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="padding-bottom: 5px">
<span class="input-group-addon" style="width: 100px">子节点：</span>
<input type="checkbox" id="cb_new_type_isleaf" style="margin-left: 30px" name="appName"
value="JAVA">
</div>
</div>
<div id="modal_type_update">
<div class="input-group" style="padding-bottom: 5px">
<span class="input-group-addon" style="width: 100px">原名称：</span>
<input type="text" id="tx_update_type_name_old" readonly="true" class="form-control"
placeholder=""/>
</div>
<div class="input-group" style="padding-bottom: 5px">
<span class="input-group-addon" style="width: 100px">新名称：</span>
<input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/>
</div>
</div>
<div id="modal_type_del">
确认删除该类型节点?
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="tx_type_action"/>
<input type="hidden" id="tx_type_id"/>
<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
... ...