后端逻辑
表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可
编辑cmd.forms.py
class UpdateBannerForm(AddBannerForm): banner_id = IntegerField(validators=[InputRequired(message=‘请输入轮播图的id!‘)])
视图,编辑cms.views.py
... from .forms import UpdateBannerForm @bp.route(‘/ubanner/‘,methods=[‘POST‘]) @login_required def ubanner(): form = UpdateBannerForm(request.form) if form.validate(): banner_id = form.banner_id.data name = form.name.data image_url = form.image_url.data link_url = form.link_url.data priority = form.priority.data banner = BannerModel.query.get(banner_id) if banner: banner.name = name banner.image_url = image_url banner.link_url = link_url banner.priority = priority db.session.commit() return xjson.json_success() else: return xjson.json_param_error(message=‘没有这个轮播图!‘) else: return xjson.json_param_error(message=form.get_error())
前端逻辑
当我们点击编辑,也是弹出一个模态框,而且这个模态框其实是和添加轮播图的模态框是一样的。不同的地方就是编辑的模态框有内容。
因此我们可以复用之前的模态框,并把内用填充进表单即可。
现在关键是如何获取内容?
这里有个方法就是把需要的内容存到元素的属性中,如下,我们存入到tr标签的属性中
我们有存入:
data-name="{{ banner.name }}"
data-image="{{ banner.image_url }}"
data-link="{{ banner.link_url }}"
data-priority="{{ banner.priority }}"
data-id="{{ banner.id }}"
{% for banner in banners %} <tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}" data-priority="{{ banner.priority }}" data-id="{{ banner.id }}"> <td>{{ banner.name }}</td> <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td> <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td> <td>{{ banner.priority }}</td> <td>{{ banner.create_time }}</td> <td> <button class="btn btn-default btn-xs edit-banner-btn">编辑</button> <button class="btn btn-danger btn-xs delete-banner-btn">删除</button> </td> </tr> {% endfor %} </tbody>
这样我们通过js获取定位到“编辑”按钮,获取这个 按钮的父元素(td)的父元素(tr)的属性值,然后把需要的值填入到表单就可以了。
编辑banners.js
$(function () { $("#save-banner-btn").click(function (event) { event.preventDefault(); self = $(this); var dialog = $("#banner-dialog"); var nameInput = dialog.find("input[name=‘name‘]"); var imageInput = dialog.find("input[name=‘image_url‘]"); var linkInput = dialog.find("input[name=‘link_url‘]"); var priorityInput = dialog.find("input[name=‘priority‘]"); var name = nameInput.val(); var image_url = imageInput.val(); var link_url = linkInput.val(); var priority = priorityInput.val(); //通过保存按钮上的属性data-type,获取数据类型,如果它的值是update,就是编辑操作了,否则就是添加操作 var submitType = self.attr(‘data-type‘); //这里通过保存按钮上的属性data-id获取到轮播图的id, 如果是添加轮播图这就是个空值,不用管它 var bannerId = self.attr("data-id"); if(!name || !image_url || !link_url || !priority){ zlalert.alertInfoToast(‘请输入完整的轮播图数据!‘); return; } //根据submitType的值来判断url应该是添加还是编辑 var url = ‘‘; if(submitType == ‘update‘){ url = ‘/cms/ubanner/‘; }else{ url = ‘/cms/abanner/‘; } bbsajax.post({ "url": url, //这里就要改成动态获取上面的url了 "data": { ‘name‘:name, ‘image_url‘: image_url, ‘link_url‘: link_url, ‘priority‘:priority, ‘banner_id‘: bannerId //这里需要多传入一个轮播图id,就是是添加操作也无所谓,后端也没接收 }, ‘success‘: function (data) { dialog.modal("hide"); if(data[‘code‘] == 200){ // 重新加载这个页面 window.location.reload(); }else{ zlalert.alertInfo(data[‘message‘]); } }, ‘fail‘: function () { zlalert.alertNetworkError(); } }); }); });
到此,我们轮播图的编辑功能就完成了!
原文地址:https://www.cnblogs.com/sellsa/p/9563268.html
时间: 2024-10-31 17:39:40