Kendo UI for jQuery网格使用教程：数据绑定之远程数据

Kendo UI for jQuery最新试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Kendo UI Grid提供模板引擎和内置的DataSource，可让您快速设置和实现数据绑定功能。

入门指南

要将网格绑定到远程数据，请指定dataSource选项。 您可以在小部件外部创建数据源，也可以在其中传递数据源。 如果多个窗口小部件绑定到同一数据集，则必须将数据源创建为可以在不同窗口小部件中引用的对象。 如果网格是绑定到数据的唯一项目，请内联创建。

$("#grid").kendoGrid({
dataSource: {
transport: {
read: "/Home/People.json"
},
schema: {
data: "data"
}
}
});

配置数据源

Kendo UI提供一个数据绑定框架，可以通过定义窗口小部件的dataSource并提供远程端点来与Grid内联使用。

下面的示例演示如何实现建议的方法。 在示例中：

• dataSource创建一个新的Kendo UI DataSource并将其分配为Grid的数据源。
• transport定义您与远程数据源进行通信的方式。
• URL指向您要将小部件绑定到的数据位置。
• data列出需要发送到远程端点的其他URL参数。
• dataType指示期望数据源使用的响应格式（在示例中为JSONP）。 JSONP是一种从跨浏览器请求返回JSON而不会被阻塞的方法，它将JSON响应包装在回调中，以故意误导浏览器。但是除非您完全了解其中包含的数据，否则不建议这样做。
• schema向Grid指示响应的模式是什么。
• data函数用作将要重复的JSON元素 - Kendo UI基于此元素将Grid中的每一行绑定到此元素中的项目，服务器将数据作为项目数组返回，因此重复项为"items"。
• model 描述了数据结构，通过使用它，您可以指定数据中每个字段的数据类型来进行适当处理，并在需要时显示声明唯一ID字段。

<div id="grid"></div>
<script>
  $(function() {
  $("#grid").kendoGrid({
  dataSource: { 
  transport: { 
  read: {
  url: "//api.flickr.com/services/feeds/photos_public.gne",
  data: {
  tags: "nature",
  format: "json"
  },
  dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
  jsonp: "jsoncallback",
  }
  },
  schema: {
  data: "items",
  model: {
  fields: {
  published: {type: "date"}
  }
  }
  }
  },
  height: 500,
  scrollable: true,
  selectable: true
  });
  });
  </script>

添加数据

前面的示例使用自动生成的列呈现一个Grid，并为数据项中的每个字段提供一列。 要只在网格中显示所需的字段，请提供列列表，并指定必须在每个特定的列中显示服务器响应中items数组的哪个元素。

下面的示例演示如何在列数组中指定field属性，以便Grid显示响应中所需的数据。 列还具有title属性，该属性为列提供了更加用户友好的标题。

<div id="grid"></div>
<script>
  $(function() {
  $("#grid").kendoGrid({
  dataSource: { 
  transport: { 
  read: {
  url: "//api.flickr.com/services/feeds/photos_public.gne",
  data: {
  tags: "nature",
  format: "json"
  },
  dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
  jsonp: "jsoncallback",
  }
  },
  schema: {
  data: "items",
  model: {
  fields: {
  published: {type: "date"}
  }
  }
  }
  },
  columns: [
  {field: "title", title: "Title"},
  {field: "published", title: "Published On"},
  {field: "media", title: "Image"}
  ],
  height: 500,
  scrollable: true,
  selectable: true
  });
  });
  </script>

处理可视化

网格不显示Image列中的图像，而是呈现JavaScript对象的字符串输出，并且日期也不以用户友好的格式显示。

下面的示例演示如何通过使用图像的嵌入式模板向Grid指示您希望小部件显示Image列的方式，通过使用列的format选项，可以正确格式化日期。

<div id="grid"></div>
<script>
  $(function() {
  $("#grid").kendoGrid({
  dataSource: { 
  transport: { 
  read: {
  url: "//api.flickr.com/services/feeds/photos_public.gne",
  data: {
  tags: "nature",
  format: "json"
  },
  dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
  jsonp: "jsoncallback",
  }
  },
  schema: {
  data: "items",
  model: {
  fields: {
  published: {type: "date"}
  }
  }
  }
  },
  columns: [
  {field: "title", title: "Title"},
  {field: "published", title: "Published On", format: "{0: MMM dd yyyy HH:mm}"},
  {field: "media", title: "Image", template: "<img height='100' src='#:data.media.m#' title='#: data.title#'/>"}
  ],
  height: 500,
  scrollable: true,
  selectable: true
  });
  });
  </script>

设置行模板

您可以为网格中的列显示更复杂的模板（例如，单个列中有多个字段值），同时迭代其他列的内容以生成模板输出。 在这种情况下，使用rowTemplate描述单个模板中整个行的结构。

下面的示例演示如何通过对网格应用其他样式来完全自定义网格，模板中td元素的数量与Grid定义中的列数匹配。

注意：以下示例中的html代码显示特殊的脚本块，其中包含Kendo UI模板的模板语法。 所使用的JavaScript也与HTML内容混合在一起，并且模板的语法类似于在PHP，Razor或其他服务器端模板引擎的创建中应用的语法。

<div id="grid"></div><script id="detailsTemplate" type="text/x-kendo-template"><tr class="row"><td><div><span class="strong">Title: </span># if ( title ) { ##= title ## } #</div><div><span class="strong">Username: </span>#= author #</div><div><span class="strong">Published: </span>#= kendo.toString(new Date(published), "MMM dd yyyy HH:mm") #</div><div><span class="strong">Link: </span><a href='#= link #' target='_blank'>Open</a></div></td><td><div># $.each(tags.split(' '), function(index, data) { #<span class="tag">#= data #</span></div># }); #</div></td><td><div class="image"><img src="#= media.m #" alt="#= author #" /></div></td></tr></script><script>$(function() {$("#grid").kendoGrid({dataSource: { transport: { read: {url: "//api.flickr.com/services/feeds/photos_public.gne",data: {tags: "nature",format: "json"},dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requestsjsonp: "jsoncallback",}},schema: {data: "items",model: {fields: {published: {type: "date"}}}}},columns: [{title: "Info"},{title: "Tags"},{title: "Image"}],rowTemplate: kendo.template($("#detailsTemplate").html()),height: 500,scrollable: true});});</script><style>.row {margin-bottom: 20px;border-bottom: thin solid black;}
.image {
  text-align: center;
  }
.tag {
  font-style: italic;
  }
.tag:hover {
  background-color: lightblue;
  }
.strong {
  font-weight: bold;
  }
  </style>

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯