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

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

我遇到的问题是当我尝试用现有值预填充表单时。我如何转换下面的EditCommunications表单以显示您选择编辑的行的当前值？我知道我可以将初始值设置为默认值，如“Testing”，但我不太确定如何告诉它说“grab the project field from the row of the selected”

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

观点

形式

html

{comms_list%中的通信百分比}
{{communications.id}
编辑
{{communications.project}
{{communications.title}
{{communications.intent}
{{communications.date}
{%endfor%}
更新项目
&时代；
{%csrf_令牌%}
{{edit_form}}
接近
保存更改

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

---

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

在javascript字典中设置数据

let dict={{json\u data\u from\u views}

（将其包装在document.ready（）函数中）

请注意，数据的Id将是键

在每个编辑按钮的onclick函数中传递此键。

onclick=“populate_modal（{{communications.id}}”）

因此，现在如果我们单击id=1的编辑按钮，我们可以从JS字典中获取该id的数据，并在模式字段中进行设置

填充_modal（）函数

function-populate_-modal（id）{$（“#modal_-field”）.val（dict[id]['project']；}

---

不过有一个建议。由于您希望修改多行，请尝试使用ajax调用。

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

在javascript字典中设置数据

let dict={{json\u data\u from\u views}；

（将其包装在document.ready（）函数中）
请注意，数据的Id将是键

在每个编辑按钮的onclick函数中传递此键。

onclick=“populate_modal（{{communications.id}}”）

因此，现在如果我们单击id=1的编辑按钮，我们可以从JS字典中获取该id的数据，并在模式字段中进行设置

填充_modal（）函数

function-populate_-modal（id）{$（“#modal_-field”）.val（dict[id]['project']；}

---

不过有一个建议。由于您希望修改多行，请尝试使用ajax调用。

您仍然在寻找答案吗？您仍然在寻找答案吗？

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'}),
            }

<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>