3

我目前正在尝试在我的页面上实现添加功能。目前，添加已经在运行，但我必须刷新页面才能使新添加的行出现在表格上。

请在下面查看我的代码：

这就是我生成表的方式：

<table class="webGrid" id="ProductsTable">
<tr>
    <td><strong><span>ProductID</span></strong></td>
    <td><strong><span>ProductName</span></strong></td>
    <td><strong><span>Price</span></strong></td>
    <td colspan="2"><strong><span>Action</span></strong></td>
</tr>

@foreach (var item in repository.GetAllProducts(ViewData["BranchCode"].ToString()))
{ 
<tr>
    <td><span class="ProductID">@item.ProductID</span></td>
    <td><span class="ProductName">@item.ProductName</span></td>
    <td><span class="Price">@item.Price</span></td>
    <td>@Html.ActionLink("Edit", "Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })</td>
    <td>@Html.ActionLink("Delete", "Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })</td>
</tr>
}

目前，编辑和删除已经运行良好。以下是我如何进行编辑：

function update(data) {
if (data.Success == true) {
    var parent = linkObj.closest("tr");

    parent.find(".ProductID").html(data.Object.ProductID);
    parent.find(".ProductName").html(data.Object.ProductName);
    parent.find(".Price").html(data.Object.Price);
}
else {
    $("#update-message").html(data.ErrorMessage);
    $("#update-message").show();
}

}

现在我正在尝试实现与我正在使用的编辑 jquery 几乎相同的添加功能。我尝试使用该.append方法不成功。

编辑：

我尝试使用下面的代码进行添加。但它似乎没有做任何事情。或者也许我做错了什么：

    function add(data) {
    if (data.Success == true) {

        var rowTemplate = $("#rowTemplate").html();
        var tbl = document.getElementById("ProductsTable");
        var counter = $("#ProductsTable tr").length;
        data.Counter = counter;
        $("#ProductsTable").append(applyTemplate(rowTemplate, data));

    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

function applyTemplate(template, data) {
    var str = template;
    if ($.isPlainObject(data)) {
        $.each(data, function (index, value) {
            var find = new RegExp("\\$1" + index, "ig");
            str = str.replace(/\$/g, "\$1");
            str = str.replace(find, value);
        });
    }
    return str;
}

它使用如下的行模板：

<script type="text/x-template" id="rowTemplate">
        <tr><td><input type="text" id="txtName_$Counter" value="" /></td></tr>
    </script>

我刚刚在网上找到了这个解决方案，但我无法让它工作。我还尝试了下面的代码（我只是根据我拥有的编辑 jquery 编写的）：

    function add(data) {
    if (data.Success == true) {
        var parent = linkObj.closest("tr");
        parent.find(".ProductID").append(data.Object.ProductID);
        parent.find(".ProductName").append(data.Object.ProductName);
        parent.find(".Price").append(data.Object.Price);
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

编辑：

现在，这就是我的 jQuery 的样子：

function add(data) {
    if (data.Success == true) {
        data = { Counter: 3 };
        $("#rowTemplate").tmpl(data).appendTo("#ProductsTable");
        $('#updateDialog').dialog('close');
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

这是我的模板：

<script type="text/x-template" id="rowTemplate">
    <tr>
        <td><span class="ProductID"></span></td>
        <td><span class="ProductName"></span></td>
        <td><span class="Price"></span></td>
        <td>@Html.ActionLink("Edit", "_EditProduct", new { @class = "editLink" })</td>
        <td>@Html.ActionLink("Delete", "_DeleteProduct", new { @class = "editLink" })</td>
    </tr>
</script>

感谢@Muhammad Adeel Zahid 爵士帮助我让 jQuery 工作以添加行。但是，它只会在我的表中添加一个新行。我现在需要的是让它添加我从jQuery中的data对象中获得的值。add function

我已尝试按照此链接中的教程进行操作，但似乎无法使其正常工作。我的代码如下：

function add(data) {
    if (data.Success == true) {
        var prod = $.map(data.results, function (obj, index) {
            return {
                ProductID:  obj.text,
                ProductName: obj.text,
                Price: obj.text
            };
        });

        prod = { Counter: 3 };
        $("#rowTemplate").tmpl(prod).appendTo("#ProductsTable");
        $('#updateDialog').dialog('close');
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

非常感谢您的帮助！

4

1 回答 1

2

我认为您的模板代码有问题。请尝试将其更改为

<script type="text/x-jquery-tmpl" id="rowTemplate">
        <tr><td><input type="text" id="txtName_${Counter}" value="" /></td></tr>
    </script>

然后从中生成html就像

var obj = {Counter:3};
$("#rowTemplate").tmpl(obj).appendTo("#ProductsTable");

编辑
首先，我以为您使用的是 jquery 模板引擎，而我的回答是基于该假设。你可以在这里找到如何使用模板引擎。请注意，我还编辑了<script type="text/x-jquery-tmpl" .... 在您的代码中导入 jquery 模板 js 文件，其余部分保持原样。它应该工作。
编辑 2
好的，这是一个不同的模板。请记住，每个模板都必须有唯一的 ID。该模板看起来像

<script type="text/x-jquery-tmpl" id="rowTemplate2">
    <tr>
        <td><span class="ProductID">${ProductId}</span></td>
        <td><span class="ProductName">${ProductName}</span></td>
        <td><span class="Price">${Price}</span></td>
        <td>@Html.ActionLink("Edit", "_EditProduct", new { @class = "editLink" })</td>
        <td>@Html.ActionLink("Delete", "_DeleteProduct", new { @class = "editLink" })</td>
    </tr>
</script>

请注意如何${Variable}在模板中添加占位符。现在，当您需要使用模板时，您将需要一个 json 对象，该对象的属性与模板中使用的变量相匹配。例如要使用上面的模板，我会做类似的事情

var obj2 = {ProductId:2,ProductName:'First Product', Price: 323};//note the properties of json and template vars match.
$("#rowTemplate2").tmpl(obj2).appendTo("#somecontainer");
于 2012-07-30T06:05:54.823 回答