2

私の Asp.net Web サイトには、コード ビハインドから動的にロードするリピーターがあります。リピーターの外側のコードには、「追加」ボタンがあります。クリックすると、リピーターから非同期で同じコントロールを追加したいと思います。「追加」ボタンをクリックすると、次の関数NewRow()が呼び出されます。

function NewRow(){
    var guid = jQuery.guid++;
    var panel = $('#MainContent_Panel1');
    var textboxText = $('#MainContent_TextBox');

    panel.after("<span LabelGroup="+i+">Test Text:</span>
                 <span TextGroup="+i+">"+textboxText.val()+"<br /></span>
                 <span LabelGroup="+i+">Test Text : </span>
                 <input  type='text' customID="+guid+"/>
                 <input type='button' Class='Button' ButtonGroup='"+i+"' value='Button Text' /></br>
   ");

   i++;
}

ハードコーディングされたコードが非常に多いため、現在行っていることは嫌いです。もっと動的にする方法はありますか？

そして、新しく追加された行をリピーターのような動的制御により正確に配置する方法はありますか?

4

2 に答える 2

1

mustache.js のようなテンプレート エンジンを試すか、次のように手動で行うことができます。

HTML に type="text/html" の script タグを含めます。これにより、レンダリング エンジンはコンテンツをレンダリングしないように指示されます。このタグ内に、各列のテンプレート コードを記述します。

各変数セクションを $variable としてマークしました。

  • $i
  • $textboxText
  • $ガイド
​&lt;script type="text/html"​​​​​​​​​​​​​​​​ id="template">

  <span LabelGroup='$i'>Test Text:</span>
  <span TextGroup='$i'>$textboxText<br /></span>
  <span LabelGroup='$i'>Test Text : </span>
  <input  type='text' customID='$guid'/>
  <input type='button' Class='Button' ButtonGroup='$i' value='Button Text' /></br>

</script>

<!-- And here, some testing elements -->

​&lt;input type="button" id="New" value="New Row">
<input type="text" id="MainContent_TextBox" value="Some Value">

<div id="MainContent_Panel1"></div>​​​​​​​


次に、javascript で、script タグの html コンテンツを取得し、各 $variable を使用する値に置き換えるだけです。.replace を呼び出すときは /g を使用して、テンプレート内の $variable のすべてのオカレンシーを置き換える必要があることに注意してください。

i = 1;

$("#New").click(NewRow);

function NewRow(){
    var guid = jQuery.guid++;
    var panel = $('#MainContent_Panel1');
    var textboxText = $('#MainContent_TextBox').val();

    var html = $("#template").html()
        .replace(/\$i/g,i)
        .replace(/\$guid/g,guid)
        .replace(/\$textboxText/g,textboxText);

    panel.append(html);

    i++;
​}​

このアプローチを使用すると、html を js コードから分離できます。これを維持しなければならない場合、将来あなたを助ける何か。

それが役に立てば幸い。

于 2012-09-23T00:36:53.273 に答える
0

次のように、その場でタグを作成できます。

var $span1 = $("<span />").text("your text").attr("TextGroup", i);
...
var $text = $('<input type="text" />').attr("customID", guid);
...
var $button = $('<input type="button" />').addClass("Button").val("Button text").attr("ButtonGroup", i);

そして、それらをコントロールコンテナに追加するだけです

$panel.append($span1).append(...);

Fiddler でライブで試す

于 2012-09-22T23:10:37.080 に答える