Question

如何使用Django形式的JavaScript创建运行总计。

这是我的模特

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

不确定是否有人还在寻找这个问题的答案。这是我使用的代码。 'total' 是 span 元素的 id，其中显示了运行总数。

$("input.numberinput").change(function(){
    sum=0
    $("input.numberinput").each(function(){
        sum += parseInt($(this).val());
        })
    $('#total').text(sum);
})

Answer 2

选择每个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>

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

2 个答案: