Kendo UI for jQuery網(wǎng)格使用教程：數(shù)據(jù)綁定之遠(yuǎn)程數(shù)據(jù)

Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

Kendo UI Grid提供模板引擎和內(nèi)置的DataSource，可讓您快速設(shè)置和實(shí)現(xiàn)數(shù)據(jù)綁定功能。

入門指南

要將網(wǎng)格綁定到遠(yuǎn)程數(shù)據(jù)，請(qǐng)指定dataSource選項(xiàng)。 您可以在小部件外部創(chuàng)建數(shù)據(jù)源，也可以在其中傳遞數(shù)據(jù)源。 如果多個(gè)窗口小部件綁定到同一數(shù)據(jù)集，則必須將數(shù)據(jù)源創(chuàng)建為可以在不同窗口小部件中引用的對(duì)象。 如果網(wǎng)格是綁定到數(shù)據(jù)的唯一項(xiàng)目，請(qǐng)內(nèi)聯(lián)創(chuàng)建。

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

配置數(shù)據(jù)源

Kendo UI提供一個(gè)數(shù)據(jù)綁定框架，可以通過定義窗口小部件的dataSource并提供遠(yuǎn)程端點(diǎn)來與Grid內(nèi)聯(lián)使用。

下面的示例演示如何實(shí)現(xiàn)建議的方法。 在示例中：

• dataSource創(chuàng)建一個(gè)新的Kendo UI DataSource并將其分配為Grid的數(shù)據(jù)源。
• transport定義您與遠(yuǎn)程數(shù)據(jù)源進(jìn)行通信的方式。
• URL指向您要將小部件綁定到的數(shù)據(jù)位置。
• data列出需要發(fā)送到遠(yuǎn)程端點(diǎn)的其他URL參數(shù)。
• dataType指示期望數(shù)據(jù)源使用的響應(yīng)格式（在示例中為JSONP）。 JSONP是一種從跨瀏覽器請(qǐng)求返回JSON而不會(huì)被阻塞的方法，它將JSON響應(yīng)包裝在回調(diào)中，以故意誤導(dǎo)瀏覽器。但是除非您完全了解其中包含的數(shù)據(jù)，否則不建議這樣做。
• schema向Grid指示響應(yīng)的模式是什么。
• data函數(shù)用作將要重復(fù)的JSON元素 - Kendo UI基于此元素將Grid中的每一行綁定到此元素中的項(xiàng)目，服務(wù)器將數(shù)據(jù)作為項(xiàng)目數(shù)組返回，因此重復(fù)項(xiàng)為"items"。
• model 描述了數(shù)據(jù)結(jié)構(gòu)，通過使用它，您可以指定數(shù)據(jù)中每個(gè)字段的數(shù)據(jù)類型來進(jìn)行適當(dāng)處理，并在需要時(shí)顯示聲明唯一ID字段。

<div id="grid"></div>
<script>
  $(function() {
  $("#grid").kendoGrid({
  dataSource: { 
  transport: { 
  read: {
  url: "https://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>

添加數(shù)據(jù)

前面的示例使用自動(dòng)生成的列呈現(xiàn)一個(gè)Grid，并為數(shù)據(jù)項(xiàng)中的每個(gè)字段提供一列。 要只在網(wǎng)格中顯示所需的字段，請(qǐng)?zhí)峁┝辛斜?，并指定必須在每個(gè)特定的列中顯示服務(wù)器響應(yīng)中items數(shù)組的哪個(gè)元素。

下面的示例演示如何在列數(shù)組中指定field屬性，以便Grid顯示響應(yīng)中所需的數(shù)據(jù)。 列還具有title屬性，該屬性為列提供了更加用戶友好的標(biāo)題。

<div id="grid"></div>
<script>
  $(function() {
  $("#grid").kendoGrid({
  dataSource: { 
  transport: { 
  read: {
  url: "https://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>

處理可視化

網(wǎng)格不顯示Image列中的圖像，而是呈現(xiàn)JavaScript對(duì)象的字符串輸出，并且日期也不以用戶友好的格式顯示。

下面的示例演示如何通過使用圖像的嵌入式模板向Grid指示您希望小部件顯示Image列的方式，通過使用列的format選項(xiàng)，可以正確格式化日期。

<div id="grid"></div>
<script>
  $(function() {
  $("#grid").kendoGrid({
  dataSource: { 
  transport: { 
  read: {
  url: "https://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>

設(shè)置行模板

您可以為網(wǎng)格中的列顯示更復(fù)雜的模板（例如，單個(gè)列中有多個(gè)字段值），同時(shí)迭代其他列的內(nèi)容以生成模板輸出。 在這種情況下，使用rowTemplate描述單個(gè)模板中整個(gè)行的結(jié)構(gòu)。

下面的示例演示如何通過對(duì)網(wǎng)格應(yīng)用其他樣式來完全自定義網(wǎng)格，模板中td元素的數(shù)量與Grid定義中的列數(shù)匹配。

注意：以下示例中的html代碼顯示特殊的腳本塊，其中包含Kendo UI模板的模板語(yǔ)法。 所使用的JavaScript也與HTML內(nèi)容混合在一起，并且模板的語(yǔ)法類似于在PHP，Razor或其他服務(wù)器端模板引擎的創(chuàng)建中應(yīng)用的語(yǔ)法。

<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: "https://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>

了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊