Kendo UI Web中的Grid控件不僅可以顯示數(shù)據(jù)，并對(duì)數(shù)據(jù)提供了豐富的支持，包括分頁(yè)、排序、分組、選擇等，同時(shí)還有著大量的配置選項(xiàng)。使用Kendo DataSource組件，可以綁定到本地的JSON數(shù)據(jù)或者是遠(yuǎn)程的數(shù)據(jù)。

創(chuàng)建Kendo Grid：

1. 從現(xiàn)有的HTML表格元素中，用HTML定義組、行、和數(shù)據(jù)。
2. 從 HTML div 元素中，用配置定義列和行，并綁定到數(shù)據(jù)。

從現(xiàn)有的HTML表格元素創(chuàng)建Kendo Grid：

<!-- Define the HTML table, with rows, columns, and data -->
 <table id="grid">
  <thead>
      <tr>
          <th data-field="title">Title</th>
          <th data-field="year">Year</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Star Wars: A New Hope</td>
          <td>1977</td>
      </tr>
      <tr>
          <td>Star Wars: The Empire Strikes Back</td>
          <td>1980</td>
      </tr>
  </tbody>
 </table>

初始化Kendo Grid

$(document).ready(function(){ $("#grid").kendoGrid(); });

從 HTML div 元素中創(chuàng)建網(wǎng)格

<!-- Define the HTML div that will hold the Grid --> <div id="grid"> </div>

初始化Kendo Grid并配置列 & 數(shù)據(jù)綁定

  $(document).ready(function(){
      $("#grid").kendoGrid({
          columns:[
              {
                  field: "FirstName",
                  title: "First Name"
              },
              {
                  field: "LastName",
                  title: "Last Name"
          }],
          dataSource: {
              data: [
                  {
                      FirstName: "Joe",
                      LastName: "Smith"
                  },
                  {
                      FirstName: "Jane",
                      LastName: "Smith"
              }]
          }
      });
  });

配置網(wǎng)格操作

  &nbsp; Kendo Grid分頁(yè)、排序、分組和滾動(dòng)，使用簡(jiǎn)單的布爾配置選項(xiàng)就可以配置任意的網(wǎng)格操作。啟用網(wǎng)格分頁(yè)、排序、分組和滾動(dòng)操作，在默認(rèn)的情況下這些操作都是禁用的，之后滾動(dòng)在默認(rèn)的情況下是啟用的：

 $(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
  });

虛擬滾動(dòng)性能

    當(dāng)綁定到大型數(shù)據(jù)集或使用大的頁(yè)面尺寸時(shí)，對(duì)于性能來說減少在內(nèi)存中的DOM對(duì)象是非常重要的。Kendo Grid對(duì)于高度優(yōu)化綁定到大數(shù)據(jù)集綁定提供內(nèi)置的UI virtualization，通過簡(jiǎn)單的配置就可以啟用。

啟用Grid UI virtualization：

  $(document).ready(function(){
      $("#grid").kendoGrid({
         scrollable: {
             virtual: true
         }
      });
  });

訪問現(xiàn)有的網(wǎng)格：

 通過jQuery.data()可以引用一個(gè)現(xiàn)有的網(wǎng)格實(shí)例，一旦建立了引用，就可以使用Grid API來控制它的操作。

var grid = $("#grid").data("kendoGrid");

>>>Kendo UI Web下載