还在为选择前端UI框架而烦恼吗?快来看看这里吧

前言

作为一个前端开发人员来说，你是不是也经常为选择一款UI框架而烦恼呢？如果是的话，那今天这篇文章就很有必要看看了。

如果你还只是停留在EasyUI或者ExtJS上，那么你真的有点low了。EasyUI和ExtJS在UI设计上有点跟不上时代步伐了，从诞生的初期到现在UI组件在呈现上都没有怎么变化。那么今天我就大家介绍一款界面优美，支持HTML5的UI框架-Kendo UI。

Kendo UI

KendoUI目前有个人免费版还有商用付费版，我觉得大多数读者用个人免费版就足够了，基本上包含所有可用组件，我之前维护的一个网站后台管理系统就是用的KendoUI。

KendoUI官网介绍

从其官网介绍可以看出，Kendo UI是最完整的HTML,Javascript和AngularJS开发的UI库，目前支持jQuery和AngularJS版本。

优势

我们为什么会选择Kendo UI呢？那是因为其具有其他一些UI库所没有的优势，我们一一来看一下

• 70多个常用的UI组件

• 同时支持线上线下数据

• 优美的主题设计

• 集成Angular应用

• 轻便并且自适应屏幕

• 导出PDF,Excel和PNG

• 支持所有现代浏览器

• 容易学习和使用

• 多人团队对产品的支持

目录

接下来，我们来看下KendoUI目前支持的组件类型，从下图中的英文名就可以很容易理解，比如说Grid组件就是列表，DropDownList是下拉列表，ProgressBar是进度条等等。

KendoUI支持的组件

列表组件

接下来，就以Grid为例介绍所有可能的使用情况。

• 基本使用

Grid组件最基本的使用就是以列表的形式展示数据

基本使用

• 层级关系

在Grid中是可以嵌套Grid的，Grid之间具有层级关系

层级关系的Grid

• 数据逻辑

Grid组价提供了一系列强大的数据逻辑功能，包括排序，分页，过滤，分组等。

Grid过滤

• 增删改

Grid提供了强大的增删改功能，且支持批量操作

增删改功能

• 数据绑定

Grid不仅支持本地数据，还支持远程数据源，因此特别适合配合restful接口使用

• 模板

Grid提供了模板方法，可以自定义表格的样式，列表内容等等

通过模板方法自定义列表

总结

今天这篇文章简要介绍了下Kendo UI的基础知识，后续会通过代码的形式来具体介绍每款UI组件是如何来使用的，敬请关注~