jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 本经验是 【jQuery EasyUI从入门到精通】系列教程的第22部分，在第21部分基础上，继续讲述 jQuery EasyUI Web Demos之DataGrid（数据表格）。
工具/原料
1
笔记本电脑或是台式机
2
互联网
3
jQuery EasyUI
4
DataGrid（数据表格）
方法/步骤
1DataGrid Card View - jQuery EasyUI Demo
Card View（卡片视图），DataGrid Card View Demo（数据表格卡片视图案例）.The datagrid row can be showed as card（这种数据表格可以卡片的形式显示）.该案例，HTML基本结构如下所示：
DataGrid Card View Demo
The datagrid row can be showed as card.
| Item ID | List Price | Unit Cost | Attribute | Status |
|---|
2
Card View（卡片视图），DataGrid Card View Demo（数据表格卡片视图案例），Javascript代码如下所示：
3
Card View（卡片视图），DataGrid Card View Demo（数据表格卡片视图案例），运行效果如下图所示。
4DataGrid Buffer Scrolling - jQuery EasyUI Demo
Buffer View（缓冲视图），DataGrid Buffer View Demo（数据表格缓冲视图案例），Drag the vertical scroll to the bottom to load additional records on demand（拖拽垂直滚动条到底部按需加载额外的记录）.HTML基本结构如下:
DataGrid Buffer View Demo
Drag the vertical scroll to the bottom to load additional records on demand.
| Inv No | Date | Name | Amount | Price | Cost | Note |
|---|
5
Buffer View（缓冲视图），DataGrid Buffer View Demo（数据表格缓冲视图案例）,Javascript代码如下所示：
6
Buffer View（缓冲视图），DataGrid Buffer View Demo（数据表格缓冲视图案例），运行效果如下图所示：
注意事项
jQuery EasyUI插件依赖于JQuery，需要在easyui.min.js之前引入JQuery库