如何使用 Python Django 將動態生成的行中的多行數據插入數據庫

Question

我有一個 Javascript function (addItem)，它允許用戶添加任意數量的動態生成的數據行並填寫所需的必要字段。 請參閱下面的代碼

                                <div class="modal-body">
                                    <table class="table order-list table-striped" id="myTable">
                                        <thead>
                                            <tr>
                                                <th>Item</th>
                                                <th>Quantity</th>
                                                <th>Price</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                            <tbody id="addItems">

                                        </tbody>
                                    </table>
                                    <table>
                                        <tbody>
                                            <tr>
                                                
                                                <td colspan="5" style="text-align: left;">    
                                                    <button onclick="addItem();" class="btn btn-sm btn-success" id="sspusd1" value="Add Row"><i class="fa fa-plus"></i>Add Row</button>
                                                </td>
                                                <td colspan="5" style="text-align: left;">    
                                                   
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

function addItem() {
    renumber++;
    var html = "<tr>";
        
        html  += "<td><select class='form-control'>{% for stock in stocks %}<option class='dropdown-item' value='{{stock.inventoryPart}}'>{{stock.inventoryPart}}</option>{% endfor %}</select></td>";
        html  += "<td><input type='number' class='form-control' onblur='lineTotal(this);' value='0' name='quantity[]'/></td>";
        html  += "<td><input type='text' class='form-control' onblur='lineTotal(this);' value='0' name='price[]'/></td>";
        html  += "<td><input type='text' id='lineTotal' class='form-control' value='0' disabled name='total[]' /></td>";

        html += "</tr>";
        document.getElementById("addItems").insertRow().innerHTML = html;
    };

但是，One 能夠插入他們想要的任意數量的行，並將必要的數據插入到可用的字段中。

問題是我無法捕獲和存儲輸入到這些動態行中的動態信息，因為 Django 不知道用戶創建了多少行。

目的是能夠使用 Django 將用戶插入的創建的動態行中的數據存儲到數據庫中

以下是我認為的代碼

def customers(request):
      
if request.method == 'POST':
    if 'Receipttotal' in request.POST:
        
        stocksArr = request.POST.getlist('stock')
        quantityArr = request.POST.getlist('quantity')
        priceArr = request.POST.getlist('price')
        totalArr = request.POST.getlist('total')

        print("---Array Data---")
        print(stocksArr)
        print(quantityArr)
        print(priceArr)
        print(totalArr)

所以打印語句 output 是一個空列表。

這個功能怎么可能？ 我需要這方面的幫助。 謝謝。

Answer 1

我看到的最好的解決方案是使用帶有 HTMX 的表單集。 你可以按照這個優秀的教程https://justdjango.com/blog/dynamic-forms-in-django-htmx

Answer 2

我想你在 html 的某個地方有這樣的表格：

<form action="" method="post">
 <!-- Your table etc. here -->
</form>

在這種情況下，請嘗試以這種方式修改您的視圖：

if request.method == 'POST':
    stocksArr = request.POST.getlist('stock')
    quantityArr = request.POST.getlist('quantity')
    priceArr = request.POST.getlist('price')
    totalArr = request.POST.getlist('total')

    print("---Array Data---")
    print(stocksArr)
    print(quantityArr)
    print(priceArr)
    print(totalArr)

現在，您的表單可能沒有if 'Receipttotal' in request.POST: 。 試試這種方式，讓我知道這是否能解決您的問題。