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是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

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

入門指南

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

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

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

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

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

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

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

前面的示例使用自動生成的列呈現(xiàn)一個Grid，并為數(shù)據(jù)項中的每個字段提供一列。 要只在網(wǎng)格中顯示所需的字段，請?zhí)峁┝辛斜恚⒅付ū仨氃诿總€特定的列中顯示服務器響應中items數(shù)組的哪個元素。

下面的示例演示如何在列數(shù)組中指定field屬性，以便Grid顯示響應中所需的數(shù)據(jù)。 列還具有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>

處理可視化

網(wǎng)格不顯示Image列中的圖像，而是呈現(xiàn)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>

設(shè)置行模板

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

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

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

<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>

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