Django计算器中集成多选项下拉列表实现差异化计算结果展示

1. 修正并优化模型层（models.py） #

现有代码存在外键关联错误、字段缺失、类名拼写不统一的问题，先调整如下：

from django.db import models
from django.contrib.auth.models import User

# 你自己写的gc_calc、Option1_5、optional_3计算函数记得提前导入

class CalcAnalyzer(models.Model):
    sequence = models.TextField()
    gc_calc = models.CharField(max_length=2000000)    
    # 直接把5'、3'计算结果存在主模型，避免多表关联查询，提升性能
    option_5 = models.FloatField(default=0)
    option_3 = models.FloatField(default=0)
    person_of = models.ForeignKey(User, null=True, on_delete=models.CASCADE)

    def save(self, *args, **kwargs):
        if self.sequence:
            self.gc_calc = gc_calc(self.sequence)
            # 保存序列时直接计算好三个结果存库
            self.option_5 = Option1_5(self.sequence)
            self.option_3 = optional_3(self.sequence)
        super().save(*args, **kwargs)

    def __str__(self):
        return self.sequence 

把原来的addcalc_1、addcalc_3两个模型删掉即可，所有计算结果统一存在主模型更方便后续调用。

2. 适配视图层（views.py） #

修正原有拼写错误，不需要额外加复杂逻辑，把查询到的序列数据正常传给前端即可：

def calc_sequence(request):
    # 修正类名拼写错误，原来的Calanalisis改为CalcAnalyzer
    sequence_items = CalcAnalyzer.objects.filter(person_of=request.user)
    form = AddSequenceForm(request.POST)
    if request.method == 'POST':
        form = AddSequenceForm(request.POST)
        if form.is_valid():
            profile = form.save(commit=False)
            profile.person_of = request.user
            profile.save()
            return redirect('calc_sequence')
    else:
        form = AddSequenceForm()

    myFilter = SequenceFilter(request.GET, queryset=sequence_items)
    sequence_items = myFilter.qs
    context = {'form':form, 'sequence_items':sequence_items, 'myFilter':myFilter}
    return render(request, 'Add_Calc.html', context)

3. 模板层改造（Add_Calc.html，JS逻辑写在这里） #

先加下拉选择框，然后调整表格结构，最后加JS监听下拉变化切换展示内容：

<!-- 先加下拉选择框 -->
<select id="calcType">
  <option value="default">默认计算结果</option>
  <option value="5end">5'端计算结果</option>
  <option value="3end">3'端计算结果</option>
</select>

<!-- 表格结构调整，给结果列加类名方便JS控制 -->
<table>
  <thead>
    <tr>
      <th>序列</th>
      <th class="result-col" data-type="default">GC含量（默认）</th>
      <th class="result-col" data-type="5end" style="display:none">5'端计算值</th>
      <th class="result-col" data-type="3end" style="display:none">3'端计算值</th>
    </tr>
  </thead>
  <tbody>
    {% for item in sequence_items %}
    <tr>
      <td>{{ item.sequence }}</td>
      <td class="result-col" data-type="default">{{ item.gc_calc }}</td>
      <td class="result-col" data-type="5end" style="display:none">{{ item.option_5 }}</td>
      <td class="result-col" data-type="3end" style="display:none">{{ item.option_3 }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<!-- 在这里加JS交互逻辑 -->
<script>
const calcTypeSelect = document.getElementById('calcType');
calcTypeSelect.addEventListener('change', function() {
  const selectedType = this.value;
  // 隐藏所有结果列
  document.querySelectorAll('.result-col').forEach(col => {
    col.style.display = 'none';
  });
  // 只展示选中类型的结果列
  document.querySelectorAll(`.result-col[data-type="${selectedType}"]`).forEach(col => {
    col.style.display = 'table-cell';
  });
});
</script>

以上方案不需要额外发请求，切换响应速度快，适合数据量不大的场景。

可选：异步请求实现方案（适合不希望提前预存所有计算结果的场景） #

如果不想提前计算所有结果存库，可以新增一个接口处理计算请求：

1. 新增视图接口：

from django.http import JsonResponse

def get_calc_result(request):
    if request.method == 'GET':
        sequence_id = request.GET.get('sequence_id')
        calc_type = request.GET.get('calc_type')
        sequence = CalcAnalyzer.objects.get(id=sequence_id, person_of=request.user)
        if calc_type == '5end':
            result = Option1_5(sequence.sequence)
        elif calc_type == '3end':
            result = optional_3(sequence.sequence)
        else:
            result = sequence.gc_calc
        return JsonResponse({'code': 200, 'result': result})

2. 配置对应url路由，然后修改前端JS逻辑，下拉切换时发请求获取对应结果再渲染到表格即可。

内容的提问来源于stack exchange，提问作者rainbow12