0

我需要在 Listview (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 -->

我正在使用 Kendo UI Web

附件是我想做的一张泰国图片，很高兴收到提示，我有几天时间寻找它，问候，

胜利者 在此处输入图像描述

4

1 回答 1

0

看起来你已经大部分时间了。

您缺少的只是 html 中的一个按钮和一个回调。我这样做的方式只是一个普通按钮，与 html 中的任何内容无关。但是在 JS 中，在列表视图的渲染事件中，您将需要一个 jquery 选择器来获取列表视图的所有元素。然后，您可以在这些上 .each 并向传递给定按钮所在元素的 id 的按钮添加一个单击事件。单击处理程序可以将此 id 作为参数并使用它在数据源中查找适当的项目。然后使用表单数据，你可以做任何你想做的事情，比如发出你的 ajax 请求。

哦，我发现的一个问题是，每次列表视图重新绘制自身时，kendo 都会使用您的模板在 dom 中重新创建整个列表。因此，您在 jquery 中为事件绑定的任何按钮都将有效地成为新按钮。所以这就是我建议将绑定代码放在 listview 事件中进行绘画的方法。因此，您可以确定它会在正确的位置触发。

于 2012-09-24T10:47:52.800 回答