quinta-feira, 20 de agosto de 2015

Como usar o filter_horizontal/filter_vertical fora do admin do Django


Tem um ManyToManyField em sua classe e deseja usar o fantástico recurso do filter_horizontal/filter_vertical em um formulário no front? Vou lhe dizer como.

No html, deixe como a seguir:

{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link rel="stylesheet" href="/static/admin/css/widgets.css">
</head>
<body>
 <form action="" method="post">
  <!-- Não esqueca de colcoar o atributo multiple="multiple" -->
  <select name="seu_campo" id="id_seu_campo"  multiple="multiple">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
  </select>
   
  <input type="submit">
 </form>

 <script src="{% static "site/js/jquery.js" %}"></script>
 <script type="text/javascript" src="{% static "admin/js/jquery.init.js" %}"></script>
    <script type="text/javascript" src="/admin/jsi18n/"></script>
    <script type="text/javascript" src="{% static "admin/js/core.js" %}"></script>
    <script type="text/javascript" src="{% static "admin/js/SelectBox.js" %}"></script>
    <script type="text/javascript" src="{% static "admin/js/SelectFilter2.js" %}"></script>
    <script type="text/javascript">
     // PARAMETROS DO SELECT FILTER:
     // ID do seu elemento select
     // NAME do seu elemento select
     // 0 - para filter_horizontal / 1 para filter_vertical
     // Caminho do admin para source de imagens utilizadas

        addEvent(window, "load", function(e) {SelectFilter.init("id_seu_campo", "seu_campo", 0, "/static/admin/"); });
    </script>

</body>
</html>
hasta!

Nenhum comentário:

Postar um comentário