Kendo UI Web中的Grid控件不僅可以顯示數(shù)據(jù)，并對數(shù)據(jù)提供了豐富的支持，包括分頁、排序、分組、選擇等，同時還有著大量的配置選項。使用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分頁、排序、分組和滾動，使用簡單的布爾配置選項就可以配置任意的網(wǎng)格操作。啟用網(wǎng)格分頁、排序、分組和滾動操作，在默認(rèn)的情況下這些操作都是禁用的，之后滾動在默認(rèn)的情況下是啟用的：

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

虛擬滾動性能

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

啟用Grid UI virtualization：

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

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

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

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

>>>Kendo UI Web下載