在 django 中更新表格 html

Question

我是 Django 新手，尝试更新从数据库填充的 HTML 表时有点困惑。 我需要从一些下拉列表（年、月和 provider_type）中选择不同的值来更新表格。

这是我的 table.py：

import django_tables2 as tables
from .models import Proveedor, Estado


class ProveedorTable(tables.Table):
    class Meta:
        model = Proveedor
        fields = ("id_provider", "name", "type", "year", "month")
        sequence = ("id_provider", "name", "type", "year", "month")

我的意见.py

 from django.shortcuts import render, render_to_response, RequestContext, HttpResponseRedirect
 from django_tables2 import RequestConfig 
 from .tables import ProveedorTable 
 from .forms import ProvForm 
 from .forms import EstadoForm 
 from .models import Proveedor     
 from django.contrib import messages

 def home(request):
     table = ProveedorTable(Proveedor.objects.all())
     RequestConfig(request).configure(table)
     return render(request,'index.html',{'table': table})

我的模板 index.html

{% load querystring from django_tables2 %}
{% load trans blocktrans from i18n %}
{% load bootstrap_toolkit %}

{% if table.page %}
    <div class="table-container">
{% endif %}

{% block table %}
    <table class="table table-striped table-condensed table-bordered"{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
        {% block table.thead %}
            <thead>
            <tr>
                {% for column in table.columns %}
                    {% if column.orderable %}
                        <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a></th>
                    {% else %}
                        <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
                    {% endif %}
                {% endfor %}
            </tr>
            </thead>
        {% endblock table.thead %}
        {% block table.tbody %}
            <tbody>
            {% for row in table.page.object_list|default:table.rows %} {# support pagination #}
                {% block table.tbody.row %}
                    <tr class="{% cycle "odd" "even" %}">
                        {% for column, cell in row.items %}
                            <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
                        {% endfor %}
                    </tr>
                {% endblock table.tbody.row %}
            {% empty %}
  {% if table.empty_text %}
                    {% block table.tbody.empty_text %}
                        <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
                    {% endblock table.tbody.empty_text %}
                {% endif %}
            {% endfor %}
            </tbody>
        {% endblock table.tbody %}
        {% block table.tfoot %}
            <tfoot></tfoot>
  {% endblock table.tfoot %}
    </table>
{% endblock table %}

{% if table.page %}
    {% block pagination %}
        <ul class="pagination">
        {{ table.page|pagination }}
        </ul>
    {% endblock pagination %}
{% endif %}

如果我需要使用choicefield 或ajax 函数，我会感到困惑。 有人可以给我一些 sn-p 或链接，我可以有一个更清晰的过程来实现这个功能

提前致谢

Answer 1

这里，<td {{ column.attrs.td.as_html }}>{{ cell }}</td> 是用于显示数据的数据。如果你想在这里做一个 ajax 请求，你必须在单元格部分做。例如：

{% for column, cell in row.items %}
{% if column|stringformat:"s" == "some-string" %}

<td {{ column.attrs.td.as_html }} class="ajax-request">{{ cell }}</td>

<!-- or you can use:
<td {{ column.attrs.td.as_html }}><input class="ajax-request" value={{ cell }} type="button (or any other type)"></td>

for choice field, you need to render like 
<td {{ column.attrs.td.as_html }}><select id=".ajax-request">
{% for items in cell.values %}
<option value={{ items }}></option>
</select></td>
-->

{% else %}
<td {{ column.attrs.td.as_html }} class="ajax-request">{{ cell }}</td>
{% endif %}
{% endfor %}

<script>
$(document).ready(function(){

 $('.ajax-request').change(function(){
    var e = document.getElementById("select_dropdown");
    var value = e.options[e.selectedIndex].value;
    $.ajax({
        url: "your-url",
        type: "post", // or "get"
        data: value,
        success: function(data) {
          alert(data.result);
        }});

});
</script>