javascript - 使用烧瓶管理和 sqlalchemy;现在我正在尝试制作一个表格来添加/删除/编辑我的表格
问题描述
我创建了一个自定义视图,以类似手风琴的方式组织我的所有产品和服务,以便数据对用户友好。下面是我的自定义视图:
class productView(BaseView):
form_columns = ['name','price']
@expose('/')
def index(self):
myServ = Product.query.all()
myProd = Productcategories.query.all()
return self.render('admin/products.html', myProd = myProd, myServ = myServ)
admin.add_view(productView(name='Products and Services', endpoint='products'))
然后,我开始制作我的 HTML 视图,并且效果非常好。我现在所处的位置是我创建了一些按钮,这些按钮使用我的 jquery 来加载模式。这也很好用。但是,我有点卡在下一步。
一旦我点击“提交”按钮,我如何告诉它添加/删除/编辑特定项目?
//button scripts
$(document).ready(function() {
$(".add-category-item").click(function() {
$('.bg-modal').fadeIn('slow');
});
$(".close").click(function() {
$('.bg-modal').fadeOut('slow');
});
});
$(document).ready(function() {
$(".subtract-category-item").click(function() {
$('.bg-modal').fadeIn('slow');
});
$(".close").click(function() {
$('.bg-modal').fadeOut('slow');
});
});
$(document).ready(function() {
$(".edit-category-item").click(function() {
var parent = $(this).attr("data-parent");
$('#papa').val(parent);
console.log("the parent caregory is:" + parent);
$('.bg-modal').fadeIn('slow');
});
$(".close").click(function() {
$('.bg-modal').fadeOut('slow');
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<li> {{prod.category_name}} <a class="edit-category-item" data-parent="{{prod.parent_category_id}}" href="#"><span class="glyphicon glyphicon-pencil"></span></a> <a class="subtract-category-item" href="#"><span class="glyphicon glyphicon-minus"></span></a> <a class="add-category-item" href="#"><span class="glyphicon glyphicon-plus"></span></a></li>
<a class="edit-service-item" href="#"><span class="glyphicon glyphicon-pencil"></span></a> <a class="subtract-service-item" href="#"><span class="glyphicon glyphicon-minus"></span></a> <a class="add-service-item" href="#"><span class="glyphicon glyphicon-plus"></span></a>
<!-- Modal -->
<div style="display: none;" class="bg-modal">
<div class="modal-contents">
<div class="close">+</div>
<form action="">
<input type="text" placeholder="Name of category">
<input type="text" id="papa">
<a href="#" class="button">Submit</a>
</form>
</div>
</div>
解决方案
如果您没有使用 flask-admin 通用删除和编辑视图,您可以公开一条将为您执行删除/编辑的路线并将此路线添加为您的表单action
例如
class productView(BaseView):
form_columns = ['name','price']
@expose('/')
def index(self):
myServ = Product.query.all()
myProd = Productcategories.query.all()
return self.render('admin/products.html', myProd = myProd, myServ = myServ)
@expose('/custom_delete')
def custom_delete(self):
# write custom code to delete from the database
return self.render('admin/products.html', myProd = myProd, myServ = myServ)
然后在你的 HTML
<div style="display: none;" class="bg-modal">
<div class="modal-contents">
<div class="close">+</div>
<form action="{{url_for('.custom_delete')}}">
<input type="text" placeholder="Name of category">
<input type="text" id="papa">
<a href="#" class="button">Submit</a>
</form>
</div>
</div>
您的表单将被提交到端点,您可以在其中处理后端中的删除操作
推荐阅读
- javascript - TypeError:在 Next JS 中实现时,XM_ProgressBar 不是构造函数
- python - 计算熊猫数据框的余弦距离
- python - 在cython中使用带有数组值的cpp映射
- html - 从容器 div 出来并重叠下一个元素的 Bootstrap 4 卡
- c++ - 具有相同类型值的变量的 std::initializer_list
- mysql - 无法排序查询,SQL数据库表
- ios - SwiftUI:动画期间的文本问题
- android - 无法通过 Android 10 / API 29 中的 Web 服务获取数据
- python - 如何使用 PYPDF 2 为多个页面添加水印更高效
- ios - Xamarin 应用程序在 iOS 12 上的启动屏幕后崩溃