kendo grid 所提供的 dataItem 方法之使用

Posted on Edited on In Views: Disqus:

 

範例一、

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [
                { field: "name" },
                { field: "age" }
            ],
            dataSource: [
                { name: "Tim", age: 10 },
                { name: "Mary", age: 50 }
            ]
        });
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem("tbody tr:eq(0)");
        console.log(dataItem.name);
        console.log(dataItem.age);
    </script>
</body>

</html>

執行結果

說明：

kendoGrid 有提供 dataItem 方法。

dataItem 方法可用來取出一列中的每一個 cell 資料。

 

範例二、

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <div id="example">
        <div id="grid"></div>
        <script>
            function onChange(e) {
                var rows = this.select();// 會回傳所選到的 row 集合。例如選了三個，row 集合就有三個
                // 這個 this 就代表 $("#grid") 的 kendoGrid instance 也等於 var rows = e.sender.select();
                rows.each(function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    // 將 rows 集合裡的其中一個 jQuery object 餵給 dataItem() 去找尋，此 this 表示為 rows 集合裡的其中一個 Item
                    var dataItem = grid.dataItem(this);
                    console.log(dataItem.toJSON());
                });
            }
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        pageSize: 10,
                        transport: {
                            read: {
                                url: "https://demos.telerik.com/kendo-ui/service/Products",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            model: {
                                id: "ProductID"
                            }
                        }
                    },
                    pageable: true,
                    scrollable: false,
                    persistSelection: true,
                    sortable: true,
                    change: onChange,
                    columns: [
                        {
                            selectable: true,
                            width: "50px"
                        },
                        {
                            field: "ProductName",
                            title: "Product Name"
                        },
                        {
                            field: "UnitPrice",
                            title: "Unit Price",
                            format: "{0:c}"
                        },
                        {
                            field: "UnitsInStock",
                            title: "Units In Stock"
                        },
                        {
                            field: "Discontinued"
                        }
                    ]
                });
            });
        </script>
    </div>
</body>

</html>

執行結果

說明：

1、kendoGrid 的 change 事件裡的「this」就代表 $("#grid") 的 kendoGrid instance 也等於「e.sender」。

2、kendoGrid 的 dataItem 方法是用來將 Grid 裡的一筆 item 轉成 kendo.data.ObservableObject。(講得很模糊，請直接看範例一說明，比較好懂其用法)

 

參考資料：

Grid.Methods.dataitem