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();
}

}

今、私が使用しているeditjqueryとほぼ同じ追加機能を実装しようとしています。この方法を使用しようとしましたが.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>

jQueryを機能させて行を追加するのを手伝ってくれたSir@MuhammadAdeelZahidに感謝します。ただし、テーブルに新しい行を追加するだけです。今必要なのは、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​​ファイルをインポートし、残りはそのままにします。それならうまくいくはずです。 別のテンプレートである2OKを
編集します。
テンプレートごとに一意の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 に答える