- 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
// update表单
function update_info(id)
{
var id = id;
//复杂一点的json的另一种形式
var value2 = {"user_id":"123456","username":"coolcooldool"};
// $('input[name=username]').removeAttr("readonly");//去除input元素的readonly属性
var obj2 = eval(value2);
// alert(obj2);
// 赋值，点击编辑后模态框上面的值
$("#user_id").val(obj2.user_id);
$("#user_name").val(obj2.username);
$("#act").val("edit");
// 将input元素设置为readonly
$('#user_id').attr("readonly","readonly")
}
// 添加入库操作
function add_info()
{
var form_data = $("#form_data").serialize();
alert(form_data);
}
</script>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">添加</button>
<button class="btn btn-primary btn-lg" onclick="update_info(8)" data-toggle="modal" data-target="#myModal">编辑</button>
<!-- 模态框（Modal） -->
<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">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<form id="form_data">
<div class="modal-body">
user_id: <input type="text" id="user_id" name="user_id"/>
name: <input type="text" id="user_name" name="user_name"/>
<input type="hidden" id="act" value="add" name="act"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" onclick="add_info()" class="btn btn-primary">
提交更改
</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
- 应用v1
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://v3.bootcss.com/favicon.ico">
<title>Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<script>
//
function update_info()
{
var form_data = $("#form_data");
update_data_ajax(form_data, '/publisher_list2/')
}
// update_data_ajax('#list_project', '/api/project_list/1/')
function update_data_ajax(id, url) {
{#var data = $(id).serializeJSON();#}
var data = $(id).serialize();
{#alert(data);#}
$.ajax({
type: 'post',
url: url,
{#"addr=sdff&name=name"#}
data: data,
{# "addr=ertert&name=name" 这里这种格式会报错 #}
{# {"name": "name11", "addr": "22"} 这种格式可以的 #}
{#data: JSON.stringify({"name": "name11", "addr": "22"}),#}
{#contentType: "application/json",#}
success: function (data) {
if (data !== 'ok') {
alert(data);
}
else {
window.location.reload();
}
},
error: function () {
alert('Sorry请重试!');
}
});
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">BMS-S10</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="/publisher_list/">出版社列表页</a></li>
<li><a href="/book_list/">书籍列表</a></li>
<li><a href="/author_list/">作者列表</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">出版社管理页面</h1>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">出版社列表 <i class="fa fa-thumb-tack pull-right"></i></div>
<div class="panel-body">
<div class="row" style="margin-bottom: 15px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-md-4 -->
<div class="col-md-1 pull-right">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>
</div>
</div><!-- /.row -->
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>出版社名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for publisher in publisher_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ publisher.id }}</td>
<td>{{ publisher.name }}</td>
<td>
<a class="btn btn-danger" href="/delete_publisher/?id={{ publisher.id }}">删除</a>
<a class="btn btn-info" href="/edit_publisher/?id={{ publisher.id }}">编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Page navigation" class="text-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</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>
</nav>
</div>
</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">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<form id="form_data">
<div class="modal-body">
<textarea v-model="input_text" name="addr" cols="70" rows="10" placeholder="输入……"></textarea><br><br>
<input type="hidden" id="act" value="name" name="name"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" onclick="update_info()" class="btn btn-primary">
提交更改
</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
- 应用v2
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://v3.bootcss.com/favicon.ico">
<title>Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<script>
//模态框提交按钮配套函数
function update_info()
{
var form_data = $("#form_data");
update_data_ajax(form_data, '/publisher_list2/')
}
// update_data_ajax('#list_project', '/api/project_list/1/')
// 更新出版社地址
function update_data_ajax(id, url) {
var data = $(id).serialize();
{#alert(data);#}
$.ajax({
type: 'post',
url: url,
// "addr=addr22&name=name11"
data: data,
// "addr=addr22&name=name11" 这里这种格式会报错
// data: JSON.stringify({"name": "name11", "addr": "addr22"}), //{"name": "name11", "addr": "addr22"} 这种格式可以的
// contentType: "application/json",
success: function (data) {
if (data !== 'ok') {
alert(data);
}
else {
window.location.reload();
}
},
error: function () {
alert('Sorry请重试!');
}
});
}
// 获取所有出版社列表
function get_data_ajax(url) {
var resDatas;
$.ajax({
type: 'get',
url: url,
async:false, //这句必须写，同步处理
success: function (data) {
{#resDatas = data[1].id;#}
resDatas = data;
return;
},
error: function () {
alert('Sorry请重试!');
}
});
return resDatas;
}
// 新增按钮配套函数
function newadd(id)
{
var buttonID = 'newadd_' + id
var neget=document.getElementById('textarea1');
var array = get_data_ajax('/publisher_list2/');
// 所有出版社中获取指定id对应的值
array.forEach((item,index,array)=>{
if (item.id == id){
{#neget.innerHTML= JSON.stringify(item);#}
neget.innerHTML= item.addr;
}
})
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">BMS-S10</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="/publisher_list/">出版社列表页</a></li>
<li><a href="/book_list/">书籍列表</a></li>
<li><a href="/author_list/">作者列表</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">出版社管理页面</h1>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">出版社列表 <i class="fa fa-thumb-tack pull-right"></i></div>
<div class="panel-body">
<div class="row" style="margin-bottom: 15px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-md-4 -->
<div class="col-md-1 pull-right">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="newadd()" >新增</button>
{# <button class="btn btn-success" data-toggle="modal" data-target="#myModal" >新增</button>#}
</div>
</div><!-- /.row -->
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>出版社名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for publisher in publisher_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ publisher.id }}</td>
<td>{{ publisher.name }}</td>
<td>
<a class="btn btn-danger" href="/delete_publisher/?id={{ publisher.id }}">删除</a>
<a class="btn btn-info" href="/edit_publisher/?id={{ publisher.id }}">编辑</a>
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="newadd({{ publisher.id }})" id ="newadd_{{ publisher.id }}">新增</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Page navigation" class="text-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</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>
</nav>
</div>
</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">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<form id="form_data">
<div class="modal-body">
<textarea v-model="input_text" name="addr" cols="70" rows="10" placeholder="输入……" id ="textarea1"></textarea><br><br>
<input type="hidden" id="act" value="name" name="name"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" onclick="update_info()" class="btn btn-primary">
提交更改
</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
- 应用v2 对应python后端
# start
# 1 settings.py
# INSTALLED_APPS = [
# 'rest_framework'
# ]
# 2 urls.py
# url(r'^publisher_list2/', views.reportInfoListView.as_view()),
# 3 views.py
from rest_framework.generics import ListCreateAPIView
from rest_framework import serializers
class ReportInfoSerializer(serializers.ModelSerializer):
"""
测试报告详情序列化
"""
def to_representation(self, instance):
"""
将更新时间变成天
:param instance:
:return:
"""
ret = super(ReportInfoSerializer, self).to_representation(instance)
# ret["case_date"] = ret["case_date"].split("T")[0]
return ret
# 不能省略
class Meta:
model = models.Publisher
# fields = ("name", "addr", )
fields = ("id", "name", "addr", )
class reportInfoListView(ListCreateAPIView):
"""
测试报告统计信息
"""
def get_queryset(self):
queryset = models.Publisher.objects.all().order_by("id")
return queryset
serializer_class = ReportInfoSerializer