|
|
|
<%@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
|
|
...
|
...
|
@@ -19,23 +19,26 @@ |
|
|
|
</div>
|
|
|
|
<!-- 树 -->
|
|
|
|
<div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
|
|
|
|
<div class="widget-title">
|
|
|
|
<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>
|
|
|
|
<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="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=""/>
|
|
...
|
...
|
@@ -55,110 +58,110 @@ |
|
|
|
</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({
|
|
|
|
url: contextPath + "/mobject/query",
|
|
|
|
striped: true,
|
|
|
|
panelClass: "panel-success",
|
|
|
|
pagination: true,
|
|
|
|
pageSize: 10,
|
|
|
|
loadFilter: function (data) {
|
|
|
|
return defaultLoadFilter(data);
|
|
|
|
},
|
|
|
|
columns: [{
|
|
|
|
title: "监控网元",
|
|
|
|
title: "名称",
|
|
|
|
field: "moName"
|
|
|
|
}, {
|
|
|
|
title: "主机地址",
|
|
|
|
title: "所属主机",
|
|
|
|
field: "moHostIp"
|
|
|
|
}, {
|
|
|
|
title: "网元类型",
|
|
|
|
field: "moType"
|
|
|
|
},{
|
|
|
|
title: "网元状态",
|
|
|
|
title: "类型",
|
|
|
|
field: "moTypeName"
|
|
|
|
}, {
|
|
|
|
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(" ");
|
|
|
|
var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
|
|
|
|
delBtn.click(function() {
|
|
|
|
|
|
|
|
});
|
|
|
|
return div;
|
|
|
|
}
|
|
|
|
}],
|
|
|
|
data: data
|
|
|
|
title: "标签",
|
|
|
|
field: "moTags"
|
|
|
|
}, {
|
|
|
|
title: "操作",
|
|
|
|
|
|
|
|
formatter: function (value, rowData, rowIndex) {
|
|
|
|
var div = $("<div>");
|
|
|
|
var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
|
|
|
|
//修改
|
|
|
|
editBtn.click(function () {
|
|
|
|
alert(rowData.moId);
|
|
|
|
});
|
|
|
|
div.append(" ");
|
|
|
|
var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
|
|
|
|
delBtn.click(function () {
|
|
|
|
|
|
|
|
});
|
|
|
|
return div;
|
|
|
|
}
|
|
|
|
}],
|
|
|
|
/* data: data*/
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
//模拟数据
|
|
|
|
|
|
|
|
//模拟数据
|
|
|
|
var jsonData = [
|
|
|
|
{"id":"1","name":"父节点1","url":"www.baidu.com","pid":"0"},
|
|
|
|
{"id":"4","name":"父节点11","url":"","pid":"1"},
|
|
|
|
|
|
|
|
{"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"}
|
|
|
|
] ;
|
|
|
|
|
|
|
|
|
|
|
|
{"id": "1", "name": "父节点1", "url": "www.baidu.com", "pid": "0"},
|
|
|
|
{"id": "4", "name": "父节点11", "url": "", "pid": "1"},
|
|
|
|
|
|
|
|
{"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"}
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
//主方法，运用递归实现
|
|
|
|
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);
|
|
|
|
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 ;
|
|
|
|
ul += "</ul>";
|
|
|
|
}
|
|
|
|
return ul;
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
var ul = createTree(jsonData,0) ;
|
|
|
|
$("#continer").append(ul) ;
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
var ul = createTree(jsonData, 0);
|
|
|
|
$("#continer").append(ul);
|
|
|
|
//控制菜单的隐藏显示
|
|
|
|
$("ul[class] li").each(function(){
|
|
|
|
$(this).click(function(){
|
|
|
|
$("ul[class] li").each(function () {
|
|
|
|
$(this).click(function () {
|
|
|
|
$(this).next().toggle();
|
|
|
|
}) ;
|
|
|
|
}) ;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}) ;
|
|
|
|
|
|
|
|
var dom = document.getElementById("icons");
|
|
|
|
var str = dom.getAttribute("style");
|
|
|
|
str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
|
|
|
|
dom.setAttribute("style",str);
|
|
|
|
function deletebtn(){
|
|
|
|
alert(1);
|
|
|
|
dom.setAttribute("style", str);
|
|
|
|
function deletebtn() {
|
|
|
|
alert(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
function editbtn(){
|
|
|
|
alert(2);
|
|
|
|
|
|
|
|
function editbtn() {
|
|
|
|
alert(2);
|
|
|
|
}
|
|
|
|
</script> |
|
|
|
|
|
|
\ No newline at end of file |
...
|
...
|
|
