используя флеш-админ и sqlalchemy; сейчас я пытаюсь сделать форму для добавления / удаления / редактирования моей таблицы - PullRequest
Новая
       30

используя флеш-админ и sqlalchemy; сейчас я пытаюсь сделать форму для добавления / удаления / редактирования моей таблицы

0 голосов
/ 09 сентября 2018

Я создаю собственное представление, которое организует все мои продукты и услуги в форме аккордеона, чтобы данные были удобными для пользователя. Ниже мой пользовательский вид: 

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>

1 Ответ

0 голосов
/ 09 сентября 2018

Если вы не используете типичное удаление и редактирование представлений 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>

Ваша форма будет отправлена ​​в конечную точку, где вы сможете позаботиться об удалении в вашем бэкэнде

...