Kendo UI for jQuery---03.组件___网格---04.数据绑定

数据绑定概述

默认情况下,jQuery 的 Kendo UI 网格会自动绑定到数据。

网格加载后,数据源会立即发送查询,并将数据加载到组件。要禁用此行为,请将组件的选项设置为 ,如下所示。autoBind false

$("#grid").kendoGrid({
    autoBind: false,
    // Other configuration.
});

本地数据

剑道 UI 网格使您能够将其绑定到本地数据数组。

要将网格绑定到本地数据,请设置对象的选项。有关可运行的示例,请参阅有关将网格绑定到本地数据的演示。dataSource kendoGrid

var people = [ { firstName: "John",
                 lastName: "Smith",
                 email: "[email protected]" },
               { firstName: "Jane",
                 lastName: "Smith",
                 email: "[email protected]" },
               { firstName: "Josh",
                 lastName: "Davis",
                 email: "[email protected]" },
               { firstName: "Cindy",
                 lastName: "Jones",
                 email: "[email protected]" } ];

 $("#grid").kendoGrid({
     dataSource: people
 });

图 1:绑定到本地数据数组的网格

在这里插入图片描述

完整代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地数据
    title>
    <link href="../../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../../styles/kendo.default.min.css" rel="stylesheet" />
    <script src="../../../../js/jquery.min.js">script>
    <script src="../../../../js/kendo.web.min.js">script>
head>

<body>
    
    <div id="grid">

    div>

    <script>
        var people = [{
            firstName: "John",
            lastName: "Smith",
            email: "[email protected]"
        },
        {
            firstName: "Jane",
            lastName: "Smith",
            email: "[email protected]"
        },
        {
            firstName: "Josh",
            lastName: "Davis",
            email: "[email protected]"
        },
        {
            firstName: "Cindy",
            lastName: "Jones",
            email: "[email protected]"
        }];

        $("#grid").kendoGrid({
            dataSource: people
        });
    script>
body>

html>

你可能感兴趣的:(Kendo,UI,ui,jquery,javascript)