0

リストビュー(PHP / JSON)の結果の各要素にボタンを追加して、モーダルウィンドウを開く必要があります。このウィンドウで、顧客は日付、大人、子供などの予約情報を入力できます。JavaScriptコードは次のとおりです。

<script>
 $(document).ready(function() {
        var dataSource = new kendo.data.DataSource({
                pageSize: 8,
                transport: {
                    read: "tours_lista.php",
                         dataType: "jsonp"
                },
                schema: {   
                    data: "data",
                    total: "data.length"
                }

            });

        $("#pager").kendoPager({
            dataSource: dataSource,


        });

        $("#listView").kendoListView({
            dataSource: dataSource,

            template: kendo.template($("#template").html())
        });

    });

これが私のHTMLコードです:

<div id="intro" >
    <H3>TOURS</H3>
<div id="listView"></div>
<div id="pager" class="k-pager-wrap"></div>
<script type="text/x-kendo-tmpl" id="template">
  <div class="product">
       <a class="t-link"  href="inicio.php?action=detalle&tourid=${recid}"><img  src="controlc/test/${main_pic}" title="Ver detalles de ${tit_esp}" /></a>
        <h3>${tit_esp}</h3>
        <dl>
            <dt>Adulto: </dt>
            <dd>$ ${rate_adult}</dd>
            <dt>Niño: </dt>
            <dd>$ ${rate_child}</dd>

        </dl>
         <div style="text-align:right;float:right;border:0px solid red;padding-top:7px;padding-left:5px;width:250px;height:30px;">
         </div>
    </div>
</script>
</div>
 <!-- end .intro -->    

剣道UIWebを使用しています

添付ファイルは私がやりたいタイの画像です、そしてヒントは喜んで受け取られます、私はそれを探している数日があります、よろしく、

ビクター ここに画像の説明を入力してください

4

1 に答える 1

0

あなたはすでにほとんどそこにいるようです。

欠けているのは、html のボタンとコールバックだけです。私が行った方法は、html の何にも関連付けられていない通常のボタンです。ただし、JS では、リスト ビューのレンダリング イベントで、リスト ビューのすべての要素を取得する jquery セレクターが必要になります。これらに対して .each を実行し、クリック イベントをボタンに追加して、特定のボタンがオンになっている要素の ID を渡すことができます。クリック ハンドラーは、この ID をパラメーターとして取得し、それを使用してデータ ソース内の適切な項目を検索できます。次に、フォーム データを使用して、Ajax リクエストを作成するなど、必要なことを行うことができます。

ああ、私が発見したことは、リストビューが再描画されるたびに、剣道がテンプレートを使用して dom 内のリスト全体を再作成することです。したがって、jquery でイベント用に結び付けたボタンは、事実上、新しいボタンになります。これは、ペイント用のリストビュー イベントにバインド コードを配置することをお勧めします。そのため、適切なポイントで発砲することを確認できます。

于 2012-09-24T10:47:52.800 に答える