多语言展示
当前在线:1863今日阅读:103今日分享:49

jQuery EasyUI从入门到精通(18)DataGrid(8)

jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。             本经验是 【jQuery EasyUI从入门到精通】系列教程的第18部分,在第17部分基础上,继续讲述 jQuery EasyUI Web Demos之DataGrid(数据表格)。
工具/原料
1

笔记本电脑或是台式机

2

互联网

3

jQuery EasyUI

4

DataGrid(数据表格)

方法/步骤
1

Cell Editing in DataGrid(数据表格的单元格编辑),Click a cell to start editing.                Cell Editing in DataGrid - jQuery EasyUI Demo                       

Cell Editing in DataGrid

   

Click a cell to start editing.

                                                                                                                                                               
Item IDProductList PriceUnit CostAttributeStatus
       

2

Cell Editing in DataGrid(数据表格的单元格编辑),运行效果如下图所示。

4

Cache Editor for DataGrid(数据表格的编辑缓存),Javascript代码如下图所示。    

5

Cache Editor for DataGrid(数据表格的编辑缓存),运行效果如下图所示。

6

DataGrid Row Style(数据表格的行风格),The rows which listprice value is less than 30 are highlighted.        DataGrid Row Style - jQuery EasyUI Demo                       

DataGrid Row Style

   

The rows which listprice value is less than 30 are highlighted.

   
                                                                                                                                               
Item IDProductList PriceUnit CostAttributeStatus

7

DataGrid Row Style(数据表格的行风格),运行效果如下图所示。

注意事项

jQuery EasyUI插件依赖于JQuery,需要在easyui.min.js之前引入JQuery库

推荐信息