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微信公眾號，及時獲取最新動態及最新資訊