概述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/logo.png"/>
<title>物资管理调度系统</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/mmss.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
</style>
</head>
<body>
<header>
<div class="container-fluid navbar-fixed-top bg-primary">
<ul class="nav navbar-nav
left">
<li class="text-white h4">
<span class="glyphicon glyphicon-leaf"></span> <b>物资管理调度系统</b>
</li>
</ul>
<ul class="nav navbar-nav nav-pills right ">
<li class="bg-warning ">
<a href="#"><span class="glyphicon glyphicon-tasks"></span><span class="badge">1</span></a>
</li>
<li class="bg-success">
<a href="#"><span class="glyphicon glyphicon-envelope"></span><span class="badge">2</span></a>
</li>
<li class="bg-danger">
<a href="#"><span class="glyphicon glyphicon-bell"></span></a>
</li>
<li class="bg-info dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span> <span>系统管理员</span><span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="text-center"><a href="#"><span class="text-primary">账号设置</span></a></li>
<li class="text-center"><a href="#"><span class="text-primary">消息设置</span></a></li>
<li class="text-center"><a href="#"><span class="text-primary">帮助中心</span></a></li>
<li class="divider"><a href="#"></a></li>
<li class="text-center"><a href="login.html"><span class="text-primary">退出</span></a></li>
</ul>
</li>
</ul>
</div>
</header>
<section >
<div class="container-fluid">
<div class="row ">
<!--左侧导航开始-->
<div class="col-xs-2 bg-blue">
<br/>
<div class="panel-group sidebar-menu" id="accordion" aria-multiselectable="true">
<div class="panel panel-default menu-first menu-first-active">
<a data-toggle="collapse" data-parent="#accordion" href="index.html" aria-expanded="true"
aria-controls="collapseOne">
<i class="icon-home icon-large"></i> 主页
</a>
</div>
<div class="panel panel-default menu-first">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<i class="icon-user-md icon-large"></i> 系统管理</a>
</a>
<div id="collapseOne" class="panel-collapse collapse in" >
<ul class="nav nav-list menu-second">
<li class="menu-second-selected"><a href="#"><i class="icon-user"></i> 表格p1</a></li>
<li><a href="p2.html"><i class="icon-edit"></i> 图表p2</a></li>
<li><a href="p3.html"><i class="icon-trash"></i> p3</a></li>
<li><a href="#"><i class="icon-list"></i> 子选项4</a></li>
</ul>
</div>
</div>
<div class="panel panel-default menu-first">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
<i class="icon-book icon-large"></i> 用户管理</a>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<ul class="nav nav-list menu-second">
<li><a href="#"><i class="icon-user"></i> 子选项1</a></li>
<li><a href="#"><i class="icon-edit"></i> 子选项2</a></li>
<li><a href="#"><i class="icon-trash"></i> 子选项3</a></li>
<li><a href="#"><i class="icon-list"></i> 子选项4</a></li>
</ul>
</div>
</div>
<div class="panel panel-default menu-first">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
<i class="icon-book icon-large"></i> 其他管理</a>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<ul class="nav nav-list menu-second">
<li><a href="#"><i class="icon-user"></i> 子选项1</a></li>
<li><a href="#"><i class="icon-edit"></i> 子选项2</a></li>
<li><a href="#"><i class="icon-trash"></i> 子选项3</a></li>
<li><a href="#"><i class="icon-list"></i> 子选项4</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--左侧导航结束-->
<!----------------------------------------------------------------------------------------------------->
<!--右侧内容开始-->
<div class="col-xs-10">
<br/>
<ol class="breadcrumb">
<li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 后台首页</a></li>
<li class="active">系统管理 - 表格</li>
</ol>
<div class="input-group line left">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" placeholder="输入关键字搜索" aria-describedby="basic-addon2">
</div>
<select class="form-control line left">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<a href="#" class=" btn btn-primary "><span class="glyphicon glyphicon-search"></span></a>
<a href="#" class=" btn btn-primary "><span class="glyphicon glyphicon-download"></span></a>
<a href="#" class="btn btn-primary btn-sm"style="padding-top: 7px;padding-bottom: 7px;" data-toggle="modal" data-target="#add1">添加</a>
<!--<div class="addBut" style="display: inline-block;color: #fff;background-color: #337ab7;height: 34px;padding-left: 20px;padding-right: 20px;line-height: 34px;border-radius: 5px;cursor: pointer;">添加</div>-->
<br/><br/>
<table class="table table-bordered table-striped text-center bg-info">
<thead >
<tr class="info">
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">性别</th>
<th class="text-center">地址</th>
<th class="text-center">电话</th>
<th class="text-center">年龄</th>
<th class="text-center">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<!--<tr>-->
<!--<td>1</td>-->
<!--<td>mmss</td>-->
<!--<td>小小</td>-->
<!--<td>女</td>-->
<!--<td>12345678901</td>-->
<!--<td>经理</td>-->
<!--<td>1234567@163.com</td>-->
<!--<td>无</td>-->
<!--<td>-->
<!--<a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add1">添加</a>-->
<!--<a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit">编辑</a>-->
<!--<a href="#" class="btn btn-primary btn-sm" >删除</a>-->
<!--</td>-->
<!--</tr>-->
</tbody>
</table>
<!-- Modal begin-->
<!--添加-->
<div class="modal fade" id="add1" tabindex="-1" role="dialog" aria-labelledby="add11">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add11">添加</h4>
</div>
<div class="modal-body">
<ul>
<li>
<label><span>姓名 ：</span></label>
<input value="" class="addName" type="text"/>
</li>
<li>
<label><span>性别 ：</span></label>
<input value="" class="addSex" type="text"/>
</li>
<li>
<label><span>地址 ：</span></label>
<input value="" class="addAddr" type="text"/>
</li>
<li>
<label><span>电话 ：</span></label>
<input value="" class="addPhone" type="text"/>
</li>
<li>
<label><span>年龄 ：</span></label>
<input value="" class="addAge" type="text"/>
</li>
<li>
<label><span>邮箱 ：</span></label>
<input value="" class="addEml" type="text"/>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
<button type="button" class="addBut btn btn-primary btn-sm">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="edit" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel1">编辑</h4>
</div>
<div class="modal-body">
<ul>
<li>
<label><span>姓名 ：</span></label>
<input value="" class="editName" type="text"/>
</li>
<li>
<label><span>性别 ：</span></label>
<input value="" class="editSex" type="text"/>
</li>
<li>
<label><span>地址 ：</span></label>
<input value="" class="editAddr" type="text"/>
</li>
<li>
<label><span>电话 ：</span></label>
<input value="" class="editPhone" type="text"/>
</li>
<li>
<label><span>年龄 ：</span></label>
<input value="" class="editAge" type="text"/>
</li>
<li>
<label><span>邮箱 ：</span></label>
<input value="" class="editEml" type="text"/>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
<button type="button" class="addBtn btn btn-primary btn-sm">保存</button>
</div>
</div>
</div>
</div>
<!--Modal end-->
<ul class="pagination right">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
<!--右侧内容结束-->
</div>
</div>
</section>
<footer class="bg-primary navbar-fixed-bottom">
<p class="text-center text-white">版权所有©MMSS</p>
</footer>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
/*Bootlint工具用于对页面中的HTML标签以及Bootstrapclass的使用进行检测*/
(function () {
var tableArr = [],id='',index_ ='';
// var s = document.createElement("script");
// s.onload = function () {
//
bootlint.showLintReportForCurrentDocument([]);
// };
// s.src = "js/bootlint.js";
// document.body.appendChild(s)
/
//
添加编辑模态框
$('#add').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('' + recipient)
modal.find('.modal-body input').val(recipient)
})
//获取列表数据
var dataUrl = 'http://127.0.0.1:8085/infoUsers/getInfoUserList';
$.get(dataUrl,function (json) {
var html ='';
tableArr = json.data;
for(var i =0;i<json.data.length;i++){
var data = json.data[i];
html+='<tr><td class="indeX">'+ (i+1) +'</td><td>'+ data.name+'</td><td>'+ data.sex +'</td><td>'+ data.address +'</td><td>'+ data.phone +'</td><td>'+ data.age +'</td><td>'+ data.email +'</td><td><a href="#" class="editBtn btn btn-primary btn-sm" data-toggle="modal" data-target="#edit">编辑</a><a href="#" class="delBut btn btn-primary btn-sm" >删除</a></td></tr>'
}
$('tbody').append(html);
})
//点击编辑按钮给弹出框赋值
$("table").on("click",".editBtn", function() {
var index = $(this).parents('tr').find('.indeX').text();
id = tableArr[index - 1].id;
index_ = index - 1;
$('.editName').val(tableArr[index - 1].name);
$('.editSex').val(tableArr[index - 1].sex);
$('.editAddr').val(tableArr[index - 1].address);
$('.editPhone').val(tableArr[index - 1].phone);
$('.editAge').val(tableArr[index - 1].age);
$('.editEml').val(tableArr[index - 1].email);
});
//点击保存
var upDataUrl = 'http://127.0.0.1:8085/infoUsers/updateInfoUser';
$('.addBtn').click(function () {
var name=$('.editName').val(),
sex=$('.editSex').val(),
address=$('.editAddr').val(),
phone=$('.editPhone').val(),
age=$('.editAge').val(),
email=$('.editEml').val();
$.get(upDataUrl,{
id:id,
name:name,
sex:sex,
address:address,
phone:phone,
age:age,
email:email
},function (json) {
// tableArr.splice(index_,1);
console.log(json)
window.location.reload()
})
})
//删除
$("table").on("click",".delBut", function (e) {
e.preventDefault()
var index = $(this).parents('tr').find('.indeX').text();
var id = tableArr[index - 1].id;
var delUrl = 'http://127.0.0.1:8085/infoUsers/deleteInfoUser';
$.get(delUrl,{
id:id,
},function (json) {
console.log(json);
window.location.reload();
})
})
//添加
$('.addBut').click(function (e) {
e.preventDefault()
var name=$('.addName').val(),
sex=$('.addSex').val(),
address=$('.addAddr').val(),
phone=$('.addPhone').val(),
age=$('.addAge').val(),
email=$('.addEml').val();
var addUrl = 'http://127.0.0.1:8085/infoUsers/addInfoUser';
$.get(addUrl,{
id:id,
name:name,
sex:sex,
address:address,
phone:phone,
age:age,
email:email
},function (json) {
// tableArr.splice(index_,1);
console.log(json)
window.location.reload()
})
})
})();
</script>
</body>
</html>
最后
以上就是仁爱溪流为你收集整理的管理系统 bootstrap Demo 传输用的Json的全部内容，希望文章能够帮你解决管理系统 bootstrap Demo 传输用的Json所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复