前言

在之前的一篇文章《还在为选择前端UI框架而烦恼吗？快来看看这里吧》中，讲解了KendoUI框架的优势，今天这篇文章将针对KendoGrid组件做深入讲解，看它如何快速生成一个优美的表格。

预览

首先我们来看下KendoGrid生成的表格的效果图

KendoGrid效果图

代码

首先引入必要的js和css文件

js和css文件

其次是必要的script脚本内容

全部的js部分代码

具体属性

通过以上的代码可以看出，编写一个完整的表格出来，其实特别的简单，下面我们具体分析所有的属性。

• dataSource

dataSource是必填属性，其中的data参数表示接收从服务端返回的json数据。

• columns

columns属性表示的是Grid的列，从dataSource的data属性中获取，传递field和title两个参数，field表示返回对象的某个属性值，title表示的是页面上显示的列表的标题。

如果只传递一个值，则表示field和title属性值一样。

如果设置了template属性，则dataItem中的设置的属性会覆盖掉field属性

template属性

• height

height表示Gird的高度，接收数值类型数据。

• minHeight

minHeight表示Grid的最小高度，接收数值类型数据，使用minHeight后Grid可以自适应调整高度。

• scrollable

scrollable表示是否有下拉条，boolean型。

• sortable

sortable表示是否支持排序， boolean型。

• filterable

filterable表示过滤，即能进行等于，不等于，包含，已开头等过滤操作，boolean型，filterable为true后，效果图如下:

过滤

• pageable

pageable是对分页标签的设置，下图是具体的属性选项：

pageable属性

总结

今天这篇文章主要深入讲解KendoGrid组件的各项属性，利用KendoGrid可以快速生成一个漂亮的表格，你学会了吗？