Question

这是我的JavaScript代码。它运行正常但重新加载后我在表中动态插入的插入数据丢失了。我也在进行服务器端验证，所以我不想在页面重新加载后松开动态添加的数据。

function AddItem() {
        debugger;
        if (validate() == false) {
            return false;
        }

        var ItemId = $("#Item").val();
        var Item = $("#Item").find(":selected").text();

        var Batch = $("#Batch").val();
        var Quantity = $("#Quantity").val();
        var BonusIncluded = $("#BonusIncluded").val();
        var CostPrice = $("#CostPrice").val();
        var SellingPrice = $("#SellingPrice").val();
        var ExpiryDate = $("#ExpiryDate").val();

        var i = $("#tbody tr").length;
        var inputItem = i + "inputItem"
        var AppendCode = '';
        AppendCode += "<tr id = '" + i + "table'> "
        AppendCode += "<td> <input type = 'hidden' name= 'PurchaseReturnItems[" + i + "].ItemID' value = '" + ItemId + "' id= '" + i + "Item' class = 'form-control " + inputItem + "' readonly /> " + Item + " </td>"
        AppendCode += "<td> <input type = 'text' name = 'PurchaseReturnItems[" + i + "].Batch' value = '" + Batch + "' id= '" + i + "Batch' class = 'form-control " + inputItem + "' readonly /> </td>"
        AppendCode += "<td> <input type = 'number' min='1' name= 'PurchaseReturnItems[" + i + "].Qty'  value = '" + Quantity + "' id= '" + i + "Quantity' class = 'form-control " + inputItem + "' readonly  /></td>"
        AppendCode += "<td> <input type = 'number' min='1' name = 'PurchaseReturnItems[" + i + "].BonusIncluded' value = '" + BonusIncluded + "' id= '" + i + "BonusIncluded' class = 'form-control " + inputItem + "' readonly /> </td>"
        AppendCode += "<td> <input type = 'number' name = 'PurchaseReturnItems[" + i + "].CostPrice' min = '1' value = '" + CostPrice + "' id= '" + i + "CostPrice' class = 'form-control " + inputItem + "' readonly/> "
        AppendCode += "</td> <td> <input type = 'number' min = '1' name = 'PurchaseReturnItems[" + i + "].SellingPrice' value = '" + SellingPrice + "' id= '" + i + "SellingPrice' class = 'form-control " + inputItem + "' readonly />"
        AppendCode += "</td> <td> <input type = 'date' min = '1' name = 'PurchaseReturnItems[" + i + "].Expiry' value = '" + ExpiryDate + "' id= '" + i + "ExpiryDate' class = 'form-control " + inputItem + "' readonly /> </td>"
        AppendCode += "<td> <button type= 'button' id = '" + i + "editBtn' class='btn btn-sm btn-primary' onclick=' return EditRow(" + i + ")'><span class='fa fa-edit'></span></button>"
        AppendCode += "<button id = '" + i + "deleteBtn' class='btn btn-sm btn-danger' onclick='return DeleteRow(" + i + ", " + ItemId + ")'><span class='fa fa-close'></span></button>"
        AppendCode += "<button style = 'display:none;' id = '" + i + "confirmBtn' class='btn btn-sm btn-success' onclick='return ConfirmRow(" + i + ")'><span class='fa fa-check'></span></button>"
        AppendCode += "<input type = 'text'  id='" + i + "IsDelete' value='0' name= PurchaseReturnItems[" + i + "].IsDelete</td> </tr>"
        $("#tbody").append(AppendCode);
        return false;
    }

Answer 1

除非您在DB / Session / Cookie中保存了动态数据，否则无法使其正常工作，因为HTTP是无状态的。在刷新时，您将启动一个新的HTTP请求，除非您使用HTTP请求发送它们并保存表数据以用于下一个请求，否则不会打扰以前的客户端数据。

Answer 2

您需要添加一个持久性模块，该模块将保存表中的数据。意味着在每次添加/删除操作或页面卸载时，您应该将表的状态保存在持久性内容中。

您可以使用Cookie，IndexedDB，LocalStorage或甚至在您的服务器上执行此操作。有许多工具用于持久性，只需选择一个。

一个非常非常粗略的方法是将所有tbody的内容保存到持久性模块，如果数据可用，则在加载页面时填写表格。

如果您想要更精细，只保存数据库中的重要字段，并在页面加载时根据可用字段重建表。

重装后如何在表内动态附加数据？

2 个答案: