2012-09-13 66 views
0

由於某種原因,我的django-dynamic-formset的實現有點有趣。django-dynamic-formset爲每個表單創建兩個添加/刪除鏈接

它爲我的模板中的每個動態formset創建兩個添加/刪除鏈接。

我一直在試圖弄清楚這一點,並得到了最好的我。

here是錯誤的屏幕快照我說的

我還可以提供一個登錄,如果你想觸發你自己 在這裏的錯誤是我的模板:

<head> 
    <script type="text/javascript" src="{{ STATIC_URL }}jquery.formset.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#ingredients tbody tr').formset({ 
       prefix: '{{ ingredients_formset.prefix }}', 
       formCssClass: 'dynamic-ingredients' 
      }); 
      $('#steps tbody tr').formset({ 
       prefix: '{{ steps_formset.prefix }}', 
       formCssClass: 'dynamic-steps' 
      }); 
     }) 
    </script> 
</head> 
<body> 
<form action="{% url cookbook.views.createrecipe %}" method="POST" id="ingredients"> 
    {% csrf_token %} 
<table> 
    <tbody> 
     <tr> 
      <label> 
       Ingredients: 
      </label> 
     </tr> 

     <tr> 
      <td> 
       <input type="text" cols="40" rows="10" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</form> 
<form action="{% url cookbook.views.createrecipe %}" method="POST" id="steps"> 
    {% csrf_token %} 
<table> 
    <tbody> 
     <label> 
      Steps: 
     </label> 
     <tr> 
      <td> 
       <input type="text" cols="40" rows="10" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</form> 
</body> 

這裏是forms.py

class RecipeForm(forms.ModelForm): 
    reset_recipe = forms.CharField(widget=forms.HiddenInput(), required = False) 
    class Meta: 
     model = Recipe 
     widgets = {'original_cookbook':forms.HiddenInput(), 
        'pub_date':forms.HiddenInput(), 
        'author':forms.HiddenInput()} 

     fields =("name", "picture","ingredients","steps","prep_time","type",'reset_recipe') 

class CookbookForm(forms.ModelForm): 
    class Meta: 
     model = Cookbook 


class StepsForm(forms.Form): 
    Step = forms.CharField() 

StepsFormSet = formset_factory(RecipeForm, StepsForm, can_order=True, can_delete=True, extra = 0) 

class IngredientsForm(forms.Form): 
    Ingredient = forms.CharField() 

IngredientsFormSet = formset_factory(RecipeForm, IngredientsForm, can_order=True, can_delete=True, extra = 0) 

和視圖:

def createrecipe(request): 
    RecipeForm = RecipeForm(request.POST) 
    IngredientsFormSet = formset_factory(IngredientsForm) 
    StepsFormSet = formset_factory(StepsForm) 
    if request.method == 'POST': 
     form = RecipeForm(request.POST) 
     ingredients_formset = IngredientsFormSet(request.POST, request.FILES, prefix='ifs') 
     steps_formset = StepsFormSet(request.POST, request.FILES, prefix='sfs') 
     if form.is_valid() and ingredients_formset.is_valid() and steps_formset.is_valid(): 
      print "form is valid" 
      new_recipe = form.save(commit=False) 
      new_recipe.original_cookbook = request.user.cookbooks.all()[0] 
      new_recipe.author = request.user.cookbooks.all()[0].name 
      new_recipe.steps = steps_formset 
      new_recipe.ingredients = ingredients_formset 
      new_recipe.save() 
      cookbooks = request.user.cookbooks.all() 
      cookbook = cookbooks[0] 
      cookbook.recipes.add(new_recipe) 
      form.save_m2m()    
      t = loader.get_template('cookbook/create_form.html') 
      c = RequestContext(request, { 
      'form': new_recipe, 
      }) 

      data = { 
      'replace': True, 
      'form': t.render(c), 
      'success': True, 
      } 

      json = simplejson.dumps(data) 
      return HttpResponse(json, mimetype='text/plain') 
     else: 
      print "form is invalid" 
      form = RecipeForm(request.POST) 
      ingredients_formset = IngredientsFormSet(request.POST, request.FILES, prefix='ifs') 
      steps_formset = StepsFormSet(request.POST, request.FILES, prefix='sfs') 
      t = loader.get_template('cookbook/create_form.html') 
      c = RequestContext(request, { 
       'form':form, 
      }) 

      data ={ 
       'form': t.render(c), 
       'success': False, 
      } 

      json = simplejson.dumps(data) 
      return HttpResponse(json, mimetype='text/plain')  

回答

0

您可以通過ELO80KA

用驚人django-dynamic-formset jQuery插件,我使用它的一個項目,現在,讓我告訴你我是如何做的,現在,讓我們來看看該標記:

<div id="id_p_i_c_formset_div"> 
{% for form in p_i_c_formset.forms %} 
    <div class="p_i_c_child_formset row-fluid"> 
     {{ form.id }} 
     <h2>year</h2> 
     {{ form.year }} 
     <h2>product_category</h2> 
     {{ form.product_category }} 
     <h2>insurance_company</h2> 
     {{ form.insurance_company }} 
     <h2>value</h2> 
     {{ form.value|attr:"placeholder:insurance_claims" }} 
     <h2>result</h2> 
     {{ form.result }} 
    </div> 
{% endfor %} 
{{ p_i_c_formset.management_form }} 
</div> 

然後,在JavaScript中,你需要做的正確的選擇(如果你的表單集生活領域),這就是該插件會搶了代碼的正確編號和名稱,不要克隆它忘記將它作爲表單集的「前綴」:

$(function(){ 
    $('form#my-personal-info #id_p_i_c_formset_div .p_i_c_child_formset').formset({ 
     prefix: '{{ p_i_c_formset.prefix }}' 
    }); 
}); 

該插件將自動創建刪除並添加按鈕。

相關問題