Question

我尝试选择一个网格行并在新窗口中显示它们的元素。我使用opensource Kendo ui grid。我可以选择。我想在kendo弹出窗口中显示详细信息。但我无法获得选定的行数据。它怎么样？

$(document).ready(function () {
        $("#grid").kendoGrid({
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: [5, 10, 100]
            },
            autoBind: true,
            height: 500,
            selectable: "row",
            dataSource: {
                transport: {
                    read: "/Raporlama/Getdata",
                    type: "json"
                },
            },
            change: function(e) {

                var username = this.select().closest("tr").find("td:eq(0)").text();
                var loc = this.select().closest("tr").find("td:eq(1)").text();
                var dev = this.select().closest("tr").find("td:eq(2)").text();
                var com = this.select().closest("tr").find("td:eq(3)").text();
                //show in a window.
            },
            columns: [
                            { field: "username", title: "@Resources.reportColumnUser", width: "80px" },
                            { field: "location", title: "@Resources.reportColumnLoc", width: "80px" },
                            { field: "devices", title: "@Resources.reportColumnDevice", width: "80px" },
                            { field: "command", title: "@Resources.reportColumnCom", width: "80px" }]


});

EDİT。我发现要获得行索引。现在我想只在弹出页面上显示。 ???

Answer 1

几个问题：

不要使用jQuery来读取所选行的内容。而是使用dataItem。

示例：

change: function(e) {
    var item = this.dataItem(this.select());
    console.log("item", item);
    ...
},

使用content中的window方法分配新内容，您可以定义template来定义它的外观：

HTML（模板）：

<script id="my-template" type="text/kendo-template">
    <div>#= username #</div>
    <div>#= location #</div>
    <div>#= devices #</div>
    <div>#= command #</div>
</script>

JavaScript的：

var template = kendo.template($("#my-template").html());

定义一个窗口，然后使用open和close进行展示：

窗口定义：

var win = $("#my-win").kendoWindow({
    title : "Selected Data"
}).data("kendoWindow");

网格更改选择事件处理程序：

change: function(e) {
    var item = this.dataItem(this.select());
    console.log("item", item);
    //show in a window.
    win.content(template(item));
    win.open();
},

在此处运行示例：http://jsfiddle.net/OnaBai/Tk2YA/2/

选择并在新窗口显示Kendoui网格行数据？

1 个答案: