HTML5 Web app開發工具Kendo UI Web教程：Grid網格控件的使用

    Kendo UI Web中的Grid控件不只能夠顯示數據，並對數據提供了豐富的支持，包括分頁、排序、分組、選擇等，同時還有着大量的配置選項。使用Kendo DataSource組件，能夠綁定到本地的JSON數據或者是遠程的數據。

建立Kendo Grid：

一、從現有的HTML表格元素中，用HTML定義組、行、和數據。

二、從 HTML div 元素中，用配置定義列和行，並綁定到數據。

從現有的HTML表格元素建立Kendo Grid：>>>示例代碼

初始化Kendo Grid

[html] view plain copy

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

從 HTML div 元素中建立網格

[html] view plain copy

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

初始化Kendo Grid並配置列 & 數據綁定 >>>示例代碼

配置網格操做

   Kendo Grid分頁、排序、分組和滾動，使用簡單的布爾配置選項就能夠配置任意的網格操做。啓用網格分頁、排序、分組和滾動操做，在默認的狀況下這些操做都是禁用的，以後滾動在默認的狀況下是啓用的：

[html] view plain copy

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

虛擬滾動性能

    當綁定到大型數據集或使用大的頁面尺寸時，對於性能來講減小在內存中的DOM對象是很是重要的。Kendo Grid對於高度優化綁定到大數據集綁定提供內置的UI virtualization，經過簡單的配置就能夠啓用。

>>>示例代碼