### 更新輪播圖數據 將數據綁定到tr上，就能從button按鈕獲取父節點的父節點，然后得到綁定在tr上屬性的數據 ``` {% 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">刪除</button> </td> </tr> {% endfor %} ``` 編輯按鈕 ``` $(function () { $(".edit-banner-btn").click(function (event) { event.preventDefault(); var self = $(this); var dialog = $('#banner-dialog'); dialog.modal("show"); /*獲取數據*/ var tr = self.parent().parent(); var name = tr.attr("data-name"); var image_url = tr.attr("data-image"); var link_url = tr.attr("data-link"); var priority = tr.attr("data-priority"); /*填充數據*/ 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 saveBtn = dialog.find('#save-banner-btn'); nameInput.val(name); imageInput.val(image_url); linkInput.val(link_url); priorityInput.val(priority); saveBtn.attr("data-type",'update'); saveBtn.attr("data-id",tr.attr('data-id')); }); }); ``` 表單數據更新/提交 ``` $(function () { $('#save-banner-btn').click(function (event) { event.preventDefault(); var self = $(this); var dialog = $('#banner-dialog'); var nameInput = $("input[name='name']"); var imageInput = $("input[name='image_url']"); var linkInput = $("input[name='link_url']"); var priorityInput = $("input[name='priority']"); var name = nameInput.val(); var image_url = imageInput.val(); var link_url = linkInput.val(); var priority = priorityInput.val(); var submitType = self.attr("data-type"); var banner_id = self.attr("data-id"); console.log(banner_id); if(!name || !image_url || !link_url || !priority){ zlalert.alertInfoToast("請輸入完整的輪播圖數據！"); return ; } var url = "" if(submitType == "update"){ url = "/cms/ubanner/"; }else{ url = "/cms/abanner/"; } zlajax.post({ 'url':url, 'data':{ 'name':name, 'image_url':image_url, 'link_url':link_url, 'priority':priority, 'banner_id':banner_id, }, 'success':function (data) { dialog.modal("hide"); if(data['code'] == 200){ //重新加載頁面 window.location.reload(); }else{ zlalert.alertInfo(data["message"]); } }, 'fail':function () { zlalert.alertNetworkError(); }, }) }); }); ``` 更新視圖 ``` @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 restful.success() else: return restful.params_error(message="沒有這個輪播圖") else: return restful.params_error(message=form.get_error()) ``` ### 刪除 刪除按鈕 ``` <button class="btn btn-danger btn-xs delete-banner-btn">刪除</button> ``` 刪除js文件 ``` $(function () { $(".delete-banner-btn").click(function (event) { event.preventDefault(); var self = $(this); var tr = self.parent().parent(); var banner_id = tr.attr("data-id"); zlalert.alertConfirm({ 'msg':"請確定是否要刪除當前的輪播圖?", "confirmCallback":function () { zlajax.post({ 'url':'/cms/dbanner/', 'data':{ 'banner_id':banner_id, }, 'success':function (data) { if(data['code'] == 200){ window.location.reload(); }else{ zlalert.alertInfo(data["message"]); } }, 'fail':function () { zlalert.alertNetworkError(); }, }) }, }); }) ; }); ``` 刪除視圖 ``` @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id = request.form.get("banner_id") if not banner_id: return restful.params_error(message="請傳入輪播圖id") banner = BannerModel.query.get(banner_id) if not banner: return restful.params_error(message="沒有這個輪播圖") db.session.delete(banner) db.session.commit() return restful.success() ```