如何创建在Django的形式运行的总输入字段？

Question

如何创建一个运行使用javascript总在Django的形式。

这是我的模型：

class Contra(models.Model):
    date       = models.DateField(default=datetime.date.today)
    account    = models.ForeignKey(ledger1,on_delete=models.CASCADE,related_name='contraledgers')

class Particularscontra(models.Model):
    contra     = models.ForeignKey(Contra,on_delete=models.CASCADE,related_name='contras')
    particular = models.ForeignKey(ledger1,on_delete=models.CASCADE,related_name='particularcontra')
    amount     = models.DecimalField(max_digits=10,decimal_places=2,null=True)

这是我的表格：

class ContraForm(forms.ModelForm):

    class Meta:
        model = Contra
        fields = ('date','account')
        widgets = {
            'date': DateInput(),
        }

    def __init__(self, *args, **kwargs):
        super(ContraForm, self).__init__(*args, **kwargs)
        self.fields['account'].widget.attrs = {'class': 'form-control select2',}



class ParticularscontraForm(forms.ModelForm):

        class Meta:
            model = Particularscontra
            fields = ('particular','amount')

    def __init__(self, *args, **kwargs):
        super(ParticularscontraForm, self).__init__(*args, **kwargs)
        self.fields['particular'].widget.attrs = {'class': 'form-control select2',}
        self.fields['amount'].widget.attrs = {'class': 'form-control',}

Contra_formSet = inlineformset_factory(Contra, Particularscontra,
                                            form=ParticularscontraForm, extra=6)

这个我想这之前，但没有成功：

{% block content %}

<div class="content-wrapper">


<!-- <div class="container"> -->
      <section class="content-header">
        <!-- <div class="col-md-12 col-md-offset-4"> -->
          <h1>
            <strong>Company : {{company_details.Name}}</strong>
          </h1>
                <ol class="breadcrumb">
                       <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                       <!-- <li><a href="#">Company list</a></li> -->
                     <li class="">Company list</li>
                     <li class="active">Create Simple Unit</li>
            </ol>
        <!-- </div> -->


      </section>

  <section class="content">

        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <!-- Horizontal Form -->
          <div class="box">
            <div class="box-header with-border">
            {% if not form.instance.pk %}
              <h3 class="box-title"><strong>Create Contra</strong></h3>
            {% else %}
              <h3 class="box-title"><strong>Update Contra</strong></h3>
            {% endif %}
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form method="POST" class="form-horizontal">

            {% csrf_token %}


        <div class="row">
          <div class="col-md-12">
            <div class="box box-success">

              <div class="box-body form-responsive no-padding">

                <br>
                 <br>
                <div class="col-md-2">  

                    <div class="form-group">
                       <label for="PAN1" class="col-md-4 control-label">Account<i class="material-icons" style="font-size:16px;color:red">*</i></label>
                       <div class="col-md-8">
                        {{ form.account }}
                      </div>
                    </div> 

                </div> 


                 <div class="col-md-10">

                    <div class="form-group">
                       <label for="State1" class="col-md-4 control-label">Date<i class="material-icons" style="font-size:16px;color:red">*</i></label>
                       <div class="col-md-8">
                        {{form.date}}
                      </div>
                    </div> 



                 </div>


              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="box box-success">

              <div class="box-body table-responsive no-padding">
                <table class="table">
                    {{ contras.management_form }}

                        <thead>
                        <tr>
                          <th class="col-md-6">Particulars<i class="material-icons" style="font-size:16px;color:red">*</i></th>
                          <th class="col-md-6">Amount<i class="material-icons" style="font-size:16px;color:red">*</i></th>
                        </tr>
                        </thead>

                        <tbody id="calculate">
                            {% for form in contras.forms %}

                                <tr class='{% cycle "row1" "row2" %}  formset_row'>
                                  <td class="col-md-6">{{ form.id }} {{ form.particular}}</td>
                                  <td class="col-md-6 amounts">{{ form.amount}}</td>
                                </tr>  

                            {% endfor %}




                        </tbody>


                        <tr>
                            <td class="col-md-6"></td>
                            <td class="col-md-6" id="totaled"><input type="text" name="total"></td>
                        </tr>
                </table>

              </div>


            </div>
          </div>
        </div>
              <!-- /.box-body -->
              <div class="box-footer">
               <button class="btn btn-default" type="reset" value="Reset">Reset</button>
                {% if not form.instance.pk %}
                <button type="submit" class="btn btn-info pull-right" value="Submit">Create</button>
                {% else %}
                <button type="submit" class="btn btn-info pull-right" value="Submit">Update</button>
                {% endif %}


             </div>
              <!-- /.box-footer -->
            </form>
          </div>
        </div>
        </div>





    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="{% static 'formset/jquery.formset.js' %}"></script>

    <script type="text/javascript">
        $('.formset_row').formset({
            addText: 'add contra',
            deleteText: 'remove',
            prefix: 'contras'
        });
    </script>


    <script type="text/javascript">

    $(document).ready(function() {
      let tableInstance = $('#calculate td.amounts');
      let totals = 0;
      tableInstance.each(function() {
        totals = totals + Math.floor($(this).text() * 100) / 100;
      });
      $(".totaled :input").val(totals);
    });

    </script>

    </section>
    </div>




    {% endblock %}

这是javascript代码我尝试：

<script type="text/javascript">

$(document).ready(function(e){  
  $('#calculate tbody').change(function(){
       var totals = 0;
       $(".amounts").each(function(){
            totals = totals + parseInt($(this).val());

        })
        $(".totaled").val(totals);
    });
 });
</script>

我使用内联表单集在我的模板我要显示正在运行的总在我的内联形式给出的所有量的..

这怎么可能做到这一点在Django？

任何的猜测？

谢谢

Answer 1

选择每个TD类amounts，迭代和添加他们。

$(document).ready(function() {
  let tableInstance = $('#calculate td.amounts');
  let totals = 0;
  tableInstance.each(function() {
    totals = totals + Math.floor($(this).text() * 100) / 100;
  });
  $(".totaled :input").val(totals);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table" id="calculate">
  <thead>
    <tr>
      <th class="col-md-6">Particulars <i class="material-icons" style="font-size:16px;color:red">*</i></th>
      <th class="col-md-6">Amount <i class="material-icons" style="font-size:16px;color:red">*</i></th>
    </tr>
  </thead>
  <tbody>
    <tr class="row1  formset_row">
      <td class="col-md-6">1</td>
      <td class="col-md-6 amounts">5.2</td>
    </tr>

    <tr class="row2  formset_row">
      <td class="col-md-6">2</td>
      <td class="col-md-6 amounts">5.5</td>
    </tr>
    <tr>
      <td class="col-md-6"></td>
      <td class="col-md-6 totaled"><input type="text" name="total"></td>
    </tr>
  </tbody>
</table>