后端逻辑

表单验证， 这里编辑就是和添加的内容一样，所以可以直接继承添加轮播图的表单验证，然后多加一个轮播图的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_requireddef 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 %}                    {
   { banner.name }}            {
   { banner.image_url }}            {
   { banner.link_url }}            {
   { banner.priority }}            {
   { banner.create_time }}                            编辑                删除                        {% endfor %}

这样我们通过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();            }        });    });});

到此，我们轮播图的编辑功能就完成了！