Question

我正在尝试为它创建一个 Edit，它允许用户滚动表格并单击每行中存在的一个按钮来编辑模式中的数据。

我遇到的问题是当我尝试使用现有值预填充表单时。我将如何转换下面的 EditCommunicationsForm 以显示您选择编辑的行的当前值？我知道我可以将初始值设为默认值，例如“测试”，但我不太确定如何告诉它“从您选择的行中获取项目字段”

我想做的是 ID = {{communications.id }} 用于我的表，但显然这是错误的，因为它是半 HTML。我需要某种变量来更改每一行的定义

观看次数

def communications(request):
    comms_list = Communications.objects.order_by('id')
    if request.method == "POST":
        new_form = CommunicationsForm(request.POST, request.FILES)
        edit_form = EditCommunicationsForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('http://127.0.0.1:7000/polls/communications/',{"new_form":new_form,"edit_form":edit_form,'comms_list':comms_list})
    else:
        comms = Communications.objects.get(id=1)
        new_form = CommunicationsForm()
        edit_form = EditCommunicationsForm(instance=comms)

        query = request.GET.get('search')
        if query:
            postresult = Communications.objects.filter(id__contains=query)
            comms_list = postresult
        else:
            comms_list = Communications.objects.order_by('id')

        return render(request,'polls/communications.html',{"new_form":new_form,"edit_form":edit_form,'comms_list':comms_list})

表格

class CommunicationsForm(forms.ModelForm):
    class Meta:
        model = Communications
        fields = "__all__"

        widgets = {
            'project':forms.TextInput(attrs={'class': 'form-control','placeholder':'Enter your Project Name'}),
            'title':forms.TextInput(attrs={'class': 'form-control','placeholder':'Enter a short Title'}),
            'intent':forms.Textarea(attrs={'class': 'form-control','height':'50px','placeholder':'Describe the intent and desired outcome of the communication'}),
            'date':forms.TextInput(attrs={'class': 'form-control','placeholder':'Select a Date'}),
            'channel':forms.Select(attrs={'class': 'form-control'}),
            'content_type':forms.Select(attrs={'class': 'form-control','placeholder':'Select a Content Type'}),
            'audience':forms.TextInput(attrs={'class': 'form-control','placeholder':'Enter the Audience(s)'}),
            'status':forms.Select(attrs={'class': 'form-control','placeholder':'Select the Status'}),
            }

class EditCommunicationsForm(forms.ModelForm):
    class Meta:
        model = Communications
        fields = "__all__"

        widgets = {
            'project':forms.TextInput(attrs={'class': 'form-control','initial':'Project 123'}),
            'title':forms.TextInput(attrs={'class': 'form-control','placeholder':'Enter a short Title'}),
            'intent':forms.Textarea(attrs={'class': 'form-control','height':'50px','placeholder':'Describe the intent and desired outcome of the communication'}),
            'date':forms.TextInput(attrs={'class': 'form-control','placeholder':'Select a Date'}),
            'channel':forms.Select(attrs={'class': 'form-control'}),
            'content_type':forms.Select(attrs={'class': 'form-control','placeholder':'Select a Content Type'}),
            'audience':forms.TextInput(attrs={'class': 'form-control','placeholder':'Enter the Audience(s)'}),
            'status':forms.Select(attrs={'class': 'form-control','placeholder':'Select the Status'}),
            }

html

<tbody>
    {% for communications in comms_list %}
    <tr style="font-family: Graphik;font-size: 12px">
        <td>{{ communications.id }}</td>
        <td><button type="button" class="btn btn-warning btn-sm badge-pill" style="font-size: 11px; width:60px" data-toggle="modal" data-target="#edit">Edit</button></td>
        <td>{{ communications.project }}</td>
        <td>{{ communications.title }}</td>
        <td>{{ communications.intent }}</td>
        <td style="width:150px">{{ communications.date }}</td>
    </tr>
    {% endfor %}
</tbody>

<!--Edit Modal-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Update Item</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST">
                    {% csrf_token %}
                    {{edit_form}}
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" value="update" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

屏幕截图：我选择了第 2 行，这应该会产生 CIT MVP，但它是 AAA，因为我有 initial={"project":"AAA"}

Answer 1

如果我理解您的问题是正确的，您希望在同一模式中为多行填充现有数据。一点点 Javascript 可以帮助您。

在javascript字典中设置数据
let dict = {{json_data_from_views}};
（将其包装在 document.ready() 函数中）
请注意，数据的 ID 将是关键
在每个编辑按钮的 onclick 函数中传递这个键。
onclick="populate_modal("{{communications.id}}")
所以现在如果我们点击 id = 1 的编辑按钮，我们可以从 JS 字典中获取这个 id 的数据并将其设置在模态字段中。
populate_modal() 函数
function populate_modal(id){ $("#modal_field").val(dict[id]['project']); }

尽管有一个建议。由于您想修改多行，请尝试使用 ajax 调用。

从表选择中预填充编辑表单的值

1 个答案: