1

私は KendoUI の新しいユーザーで、ListView にデータのごく一部を表示したいのですが、クリックしたときにアイテムの完全なデータをウィンドウに表示するボタンまたはリンクが必要です。 、誰かが私を助けてくれることを願っています。前もって感謝します。

4

1 に答える 1

1

次の DataSource を指定します。

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url     : ...
        }
    },
    schema   : {
        model: {
            id    : "ProductID",
            fields: {
                ProductID   : { nullable: true },
                ProductName : { type: "string" },
                UnitPrice   : { type: "number" },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number" }
            }
        }
    }
});

これは、一連のフィールドを定義します: ProductID、ProductName... を表示したいProductNameので、私のテンプレートは次のとおりです。

<script type="text/x-kendo-tmpl" id="template">
    <div class="product-view k-widget ob-product-view">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext" href="\\#" id="${uid}">
                <span class="k-icon k-i-search"></span>
            </a>
        </div>
        <dl>
            <dt>Product Name</dt>
            <dd>#:ProductName#</dd>
        </dl>
    </div>
</script>

ボタンが表示されuid、フィールドの を として含めますid。これにより、ボタンがクリックされたときにアイテムを取得できます。

次に、ウィンドウを次のように定義します。

<div id="ob-win" class="product-view k-widget">
    <dl>
        <dt>Unit Price</dt>
        <dd data-bind="text: UnitPrice"></dd>
        <dt>Units In Stock</dt>
        <dd data-bind="text: UnitsInStock"></dd>
        <dt>Discontinued</dt>
        <dd data-bind="text: Discontinued"></dd>
    </dl>
</div>

そして私はそれを次のように作成します:

var win = $("#ob-win").kendoWindow({
    title  : "Details",
    visible: false
}).data("kendoWindow");

最初は非表示にします。

次に、ボタンのハンドラーを次のように作成します。

$(document).on("click", ".k-button-icontext", function (e) {
    var uid = $(this).attr("id");
    var elem = listView.dataSource.getByUid(uid);
    kendo.bind($("#ob-win"), elem);
    win.open().center();
});

uidクリックされた要素の を取得し、 に格納されている を使用して DataSource からデータを取得し、このuidデータidを以前に作成したウィンドウにバインドします。最後に、窓が閉じていた場合に備えて窓を開けます。

ここでの実行例: http://jsfiddle.net/OnaBai/YmRpa/

于 2013-07-10T22:10:46.057 に答える