一、说明
二、调整了哪些
- [ 新增（css控制弹出） ] 操作不用
.saveModal.click(function(){})点击事件，改为 data-toggle="modal" data-target="#modal-addOrEdit" 属性控制 - [ 编辑 ] 操作不用
.saveModal.click(function(){})点击事件，改为 editContent(1) 方法控制 - [ 删除 ]
- 点击方法从
_confirm('确定要删除[来日方长]吗? ','_delete',1)，调整为 delContent('来日方长', 1) - 模态框直接定义在html中；不再在js中拼接，再
$('body').append(str); - 模态框隐藏从删除元素
$('#modalConfirm,.modal-backdrop').remove(); 改为隐藏元素 $('#modalConfirm').modal('hide');
- [ 弹窗 ]
- 模态框直接定义在html中；不再在js中拼接，再
$('body').append(str); - 模态框隐藏从删除元素
$('#modalTip,.modal-backdrop').remove(); 改为隐藏元素 $('#modalTip').modal('hide');
三、新增（css控制弹出） 按钮说明
- 由于
新增（css控制弹出） 和 编辑 是引用的同一个模态框；新增是通过元素显示隐藏来实现的，并没有事件来控制。 - 这就导致，如果表单已有数据（编辑之后：取消，点击 ×），再点击新增的时候，表单是有数据的。
- 这个小问题，请根据实际情况进行调整：
- 法1、已经实现，
新增（事件控制弹出） 按钮。把新增弹窗改为和编辑弹窗一样，通过点击事件控制，在点击事件中重置表单 _reset(obj) - 法2、给编辑的
取消、× 加上事件，事件中加上表单重置方法 _reset(obj)，确定 按钮中已加上。 - 法3、实际应用中：
新增，编辑 在后台是不同的控制器。实际情况中可用模板引擎直接从后端传到前端页面，用模板引擎语法直接渲染数据；或者传info到页面，再用vue的:value v-model数据绑定也行。
四、代码
<!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">
<title>Bootstrap基本增删改 2.0</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Bootstrap案例</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" name="keyword" class="form-control" placeholder="请输入关键字">
</div>
<button class="btn btn-default" onclick="vmt_form_search()">查询</button>
</form>
</div>
</div>
</nav>
<div style="margin:20px;">
<div style="margin:10px;">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal-addOrEdit">新增（css控制弹出）</button>
<button class="btn btn-primary" onclick="addContent()">新增（事件控制弹出）</button>
<button class="btn btn-primary" onclick=output_excel()>查看视频</button>
</div>
<table class="table table-striped table-bordered">
<tr class="active">
<th>标题</th>
<th>图片</th>
<th>类型</th>
<th width=200px>创建时间</th>
<th width=150px>操作</th>
</tr>
<tr class="success">
<th>来日方长</th>
<th>
<a href="#" target="_blank">
查看
</a>
</th>
<th>无限</th>
<th>2018-07-31</th>
<th>
<button class="btn btn-primary btn-sm" onclick="editContent(1)">编辑</button>
<button class="btn btn-primary btn-sm" onclick="delContent('来日方长', 1)">删除</button>
</th>
</tr>
<tr class="info">
<th>来日并不方长</th>
<th>
<a href="#" target="_blank">
查看
</a>
</th>
<th>有限</th>
<th>2018-07-31</th>
<th>
<button class="btn btn-primary btn-sm" onclick="editContent(2)">编辑</button>
<button class="btn btn-primary btn-sm" onclick="delContent('来日并不方长', 2)">删除</button>
</th>
</tr>
<tr class="warning">
<th>来日方长2号</th>
<th>
<a href="#" target="_blank">
查看
</a>
</th>
<th>无限</th>
<th>2018-07-31</th>
<th>
<button class="btn btn-primary btn-sm" onclick="editContent(3)">编辑</button>
<button class="btn btn-primary btn-sm" onclick="delContent('来日方长2号', 3)">删除</button>
</th>
</tr>
<tr class="danger">
<th>来日并不方长2号</th>
<th>
<a href="#" target="_blank">
查看
</a>
</th>
<th>有限</th>
<th>2018-07-31</th>
<th>
<button class="btn btn-primary btn-sm" onclick="editContent(4)">编辑</button>
<button class="btn btn-primary btn-sm" onclick="delContent('来日并不方长2号', 4) ">删除</button>
</th>
</tr>
<tr class="active">
<th>并不方长</th>
<th>
<a href="#" target="_blank">
查看
</a>
</th>
<th>其他</th>
<th>2018-07-31</th>
<th>
<button class="btn btn-primary btn-sm" onclick="editContent(5)">编辑</button>
<button class="btn btn-primary btn-sm" onclick="delContent('并不方长', 5) ">删除</button>
</th>
</tr>
</table>
<div style="text-align:center;">
<nav aria-label="Page navigation">
<ul class="pagination">
<li></li>
<li class="active"><a>1</a></li>
<li></li>
<li><span>共 5 行 第1/1 页</span></li>
</ul>
</nav>
</div>
</div>
<div class="modal fade" id="modal-addOrEdit" 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">新增</h4>
</div>
<div class="modal-body">
<form id="adduser" class="form-horizontal" role="form">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title" placeholder="标题">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="url" name="url" value="http://"
placeholder="图片地址">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="type" value="1" checked/>有限
</label>
<label class="margin-left-2em">
<input type="radio" name="type" value="2"/>无限
</label>
<label class="margin-left-2em">
<input type="radio" name="type" value="3"/>其他
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="hidden" class="form-control" name="id" value="1">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary saveBtn">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalConfirm" 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">温馨提示</h4>
</div>
<div class="modal-body" id="delete-message">
删除的提示内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalTip" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="api-message">
消息提示的内容
</div>
</div>
</div>
</div>
<div class="modal fade" id="vmt_video_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width:900px;height:450px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">视频详情</h4>
</div>
<div class="modal-body">
<div>
<div style="float:left;width:500px;height:300px;">
<video class="vmt_video_src_class" id="vmt_video_src_id" width="500px" height="300px" src=""
controls="controls"></video>
</div>
<div style="margin-left:510px;">
<h3 class="vmt_template_name_class"></h3>
<ul style="margin-top:30px">
<li><p><i class='glyphicon glyphicon-picture'></i> 最多30张图片</p></li>
<li><p><i class='glyphicon glyphicon-time'></i> 最长10分钟</p></li>
<li><p><i class='glyphicon glyphicon-object-align-right'></i> 不限横竖版</p></li>
<li><p><i class='glyphicon glyphicon-fire'></i> 已有181人使用</p></li>
</ul>
<div style="margin-top:75px;margin-left:80px">
<a type="button" class="btn btn-info col-md-8 vmt_choose_temp_calss">创建视频</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#vmt_video_detail').on('hide.bs.modal', function () {
var this_video = $('#vmt_video_src_id')[0];
this_video.currentTime = 0;
this_video.pause();
});
});
function output_excel() {
$('#vmt_video_detail').modal('show');
$('#vmt_video_detail').find('.vmt_template_name_class').text('动态显示头');
$('#vmt_video_detail').find('.vmt_video_src_class').attr('src', 'http://d.itheima.com:81//dd/Python/Scrapy%E7%88%AC%E8%99%AB%E6%A1%86%E6%9E%B6/00.Scrapy%E6%9E%B6%E6%9E%84%E6%B5%81%E7%A8%8B%E4%BB%8B%E7%BB%8D.mp4');
$('#vmt_video_detail').find('.vmt_choose_temp_calss').click(function () {
_alert('点我干嘛！');
$('#vmt_video_detail').modal('hide');
});
}
function addContent() {
var modalElem = '#modal-addOrEdit';
$(modalElem).find('#myModalLabel').text('新增');
_reset($(modalElem).find('form'));
$(modalElem).modal('show');
}
function editContent(id) {
var info = getEditJsonDataById(id);
var modalElem = '#modal-addOrEdit';
$(modalElem).find('#myModalLabel').text('编辑 ' + info.title);
renderDataToHtml(info);
$(modalElem).modal('show');
}
$('.saveBtn').click(function () {
let addEditModalId = "#modal-addOrEdit";
var modalObj = $(this).parents(addEditModalId);
var str = modalObj.find('#myModalLabel').text();
var url = (str == "新增" ? 'add' : 'edit');
var data = modalObj.find('form').serialize();
_alert('模拟 ' + str + ' 成功！', 1);
$(addEditModalId).modal('hide');
_reset($(addEditModalId).find('form'));
});
function delContent(title, params) {
var callbackFun = 'apiTest';
var content = "确定删除 " + title + " 吗？";
$('#delete-message').html(content);
$('#modalConfirm').modal('show');
$('#modalConfirm .btn-primary').click(function () {
if (callbackFun != null)
window[callbackFun](params);
$('#modalConfirm').modal('hide');
});
}
function _reset(obj) {
if (!(obj instanceof jQuery)) {
obj = $(obj)
}
obj[0].reset();
obj.find('input[type="hidden"]').val('');
}
function renderDataToHtml(data) {
$("#id").val(data['id']);
$("#title").val(data['title']);
$("#url").val(data['url']);
$('input[type="radio"][name="type"][value="' + data['type'] + '"]').prop("checked", 'checked');
}
function _alert(content, url) {
$('#api-message').html(content);
$('#modalTip').modal('show');
setTimeout(function () {
$('#modalTip').modal('hide');
if (url != null) {
}
}, 2000)
}
function apiTest(id) {
$.ajax({
url: 'delete',
data: {id: id},
type: 'get',
dataType: 'json',
cache: false,
success: function (result) {
if (result.status == 'success') {
_alert(result.message, 1);
} else {
_alert(result.message);
}
},
error: function () {
_alert('系统出现问题，请联系管理员！');
}
});
}
function getEditJsonDataById(id) {
var data = [
'{"id":1,"title":"来日方长","url":"http://1","type":2,"create_time":"2018-07-31"}',
'{"id":2,"title":"来日并不方长","url":"http://2","type":1,"create_time":"2018-07-31"}',
'{"id":3,"title":"来日方长2号","url":"http://3","type":2,"create_time":"2018-07-31"}',
'{"id":4,"title":"来日并不方长2号","url":"http://4","type":1,"create_time":"2018-07-31"}',
'{"id":5,"title":"并不方长","url":"http://5","type":3,"create_time":"2018-07-31"}',
];
var dataStr = data[id - 1];
var dataObj = eval('(' + dataStr + ')');
return dataObj;
}
</script>
</body>
</html>
|
