ops / monitor-ui · Commits

Go to a project

Authored by fanzelei
Commit 6289ca7095072414eefb305fe6e6772eae80e66b 1 parent 73804f88

form提交

Inline Side-by-side
Showing 2 changed files with 141 additions and 107 deletions
... ... @@ -32,6 +32,7 @@
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script>
<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>
... ...
<%@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() + "://"
... ... @@ -7,92 +7,106 @@
+ 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>
<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">
<!-- 树 -->
<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>
<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="" style="margin-top: 12px;margin-left: 500px;" data-target="#myModal" data-toggle="modal">新增</button>
</div>
</div>
<div id="table"></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>
<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="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 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" class="btn btn-primary">提交更改</button>
<button type="button" id="submitBtn" class="btn btn-primary">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
... ... @@ -100,6 +114,7 @@
<!-- /.modal -->
</div>
</div>
</div>
<script>
$(function() {
var data = [];
... ... @@ -111,37 +126,44 @@
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+"'>").html("edit").appendTo(div);
div.append("&nbsp;");
var delBtn = $("<button>").html("delete").appendTo(div);
delBtn.click(function() {
$("#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() {
});
return div;
}
} ],
data : data
});
});
return div;
}
} ],
data : data
});
});
... ... @@ -248,10 +270,6 @@
});
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);
}
... ... @@ -259,5 +277,20 @@
function editbtn() {
alert(2);
}
$("#submitBtn").click(function(){
alert(1);
$("#inBoxQueryDiv").form("submit", {
submitUrl : '',
submitData : {
},
onBeforeSubmit : function() {
},
success : function(data) {
}
});
});
</script>
\ No newline at end of file
... ...