基于Eht 开发框架 DataGrid 列分组，翻页，添加代码、列拖拽及DataPickter的实现

DataGrid 众所周知，是一个可以固定头，进行列拖拽及列大小拖拽的一个Table数据组件，本次介绍下EHT 开发框架中的 DataGrid 的 列分组翻页、列拖拽及DataPicker添加到Datagrid的实现方式

在介绍DataGrid这些实现之前，先简单介绍下EHT 开发平台框架到底是什么？

EHT快速开发及集成应用平台框架，是针对软件开发人员的快速开发框架，该框架封装了满足用户各种需求的相关API函数及UI组件， 通过掌握EHT快速开发框架，可以很轻松的完成各种需求的开发，节约了开发成本缩短了开发周期，并且，通过EHT框架所封装的API， 可以大量避免潜在的bug问题，完全实现了采用30%的代码来完成100%的功能。 

EHT开发框架特点:

1. 基于SOA架构体系
2. 学习成本低廉，有点懂java、javascript、html脚本的人员，就能很轻松的掌握开发框架，并完成需求开发任务。
3. 通过EHT快速开发平台框架，可以轻松完成开发任务，并且避免了不必要bug问题。
4. 简单的业务需求开发，甚至不需要写后台的一行java代码，只通过调取EHT封装的UI组件及框架远程调用的API便能轻松完成业务需求。
5. 框架开发规范简单，易读易懂。
6. 开发框架支持多数据库，能很轻松的进行数据库转换，不需要修改业务代码。
7. 开发框架在性能上做了很多工作，优化api算法，最大程度上提升系统性能。
8. 快速开发框架提供了辅助的开发工具，可以直接将 powerdesigner所设计的pdm文件转换成开发框架的模型配置文件及模型文件，提高了开发效率

EHT 开发平台框架具体下载地址： http://www.ehtsoft.com/module/webpage/eht-download.jsp

EHT开发平台框架的演示地址：http://demo.ehtsoft.com

下面介绍基于EHT 开发框架的 Datagrid 列分组，翻页，添加代码，列拖拽及添加DataPicker 具体是怎样实现的，先给大家看看实现的效果，然后在阐述具体实现的方式（很简单，呵呵）

Datagrid 列分组及翻页界面如下：

具体实现代码：

var a=new Eht.DataGrid({selector:"#test1",

//列分组代码，将子列中的 field内容放到 分组中的 children 中就可以实现列的分组了
columnGroups:[{label:'group-01',children:['field1','field2']},
                                     {label:'group-02',children:['field3','field4']}, 
             {label:'group-03',children:['field5','field6']}],

                                                        columns:[{field:'field1',label:'label-01',width:null,editable:true, readonly:false},//第一列可编辑
                                 {field:'field2',label:'label-02',readonly:true},//第二列不可编辑，只读方式，可以接受焦点
                                 {field:'field3',label:'label-03'},//第三列不可编辑

//第四列，可以编辑，在数据变化的时候，可以触发 datachange 方法
                                 {field:'field4',label:'label-04', editable:true,dataChange:function(data,rowcomp){
                              if(rowcomp["field7"].get(0).tagName=="DIV"){
                         rowcomp["field7"].text(data['field4']);
                               }
                              if(rowcomp["field7"].get(0).tagName=="INPUT"){
                          rowcomp["field7"].val(data['field4']);
                          }
                                }},

//第五列不可编辑
                                {field:'field5',label:'label-05'},

//第六列添加代码（数据编辑的时候为下列选择的）代码格式{value:"值",label:"显示"}
                                {field:'field6',label:'label-06',codes:[{"mnemonic":"HA","value":"01","label":"汉族"},
                                              {"mnemonic":"MG","value":"02","label":"蒙古族"},
                                                                                               {"mnemonic":"HU","value":"03","label":"回族" ,"default":"true"},
                                                                                               {"mnemonic":"ZA","value":"04","label":"藏族"}]},

//第七列，数据是来自其他列数据，方法为 labelFunc 方法，第一个参数为该行数据，第二个参数为当前显示的空间，

                                                                        这个代码是第七列的数据是四列+三列的数据，并且第六列数据等于03时，当前显示框及字体颜色为红色
                                {field:'field7',label:'label-07',labelFunc:function(data,currentcomp){
                              if(data.field6=='03'){
                               currentcomp.css({"color":"#f00","border":"1px dashed #f00"});
                              }
                               return data.field4 +":::" + data.field3;
                                 }}],

//datagrid中的数据，data为数组数据
data:data,
editable:false,//datagrid是否可编辑，如果列columns 中设置了是否可编辑，则columns设置的优先级要高于这个设置
readonly:false,//只读如果列columns 中设置了是否只读，则columns设置的优先级要高于这个设置
isFixedColumn:true,//是否可以固定列（类似Excel表格的列冻结）
multable:true,//支持多选
fixedColumn:0,//固定列号，0 就是datagrid的第一列
isPaginate:false,//是否支持翻页（如果需要翻页，isPaginate 值为true）
seq:true,//是否存在序列号，datagrid 的序号
checkbox:true//是否显示 checkbox 控件
});

DataGrid 参数还有很多，包括是否具有保存按钮，是否具有删除按钮，是否异步获取后台数据，是否删除等等及其他的事件处理，这里就不一一从注释中讲述了。

这个代码中的红色部分，讲述的就是列是怎样分组的，是否出现翻页的功能。

下面 介绍下DataGrid 怎样添加DataPacker 空间，在修改的时候，怎样弹出Form 进行修改，不是在DataGrid 的格子里修改（默认是在DataGrid的格子中继续修改的）
先给大家看看两个效果图吧，下面第一个图是 编辑状态下直接在Datagrid格子里添加的 DataPicker组件，第二个图，是在修改的时候弹出的Form表单的方式

呵呵，看了这个两个实现的图是不是很酷啊，下面讲解第一个图中的DataPicker 是怎样添加进来的，其实方法很简单，就是将Datagrid 的参数的列增加一个日期类型就行了，代码如下：

 columns:[{field:'date1',label:'DATE1',type:'date'},//列中增加 type 属性，使type属性值为 date （小写）这样，在datagrid中点击要编辑列为日期格式的时候，datagrid 就会自动弹出 DatePicker 组件供你来选择日期

添加 日期选择组件DatePicker是不是非常简单哦，针对第二个图中，当编辑一行的时候，会弹出一个form表单来提供你来编辑，这个方式也是否非常简单的，只需要在DataGrid参数中增加一个formPanel 为true 的参数就可以了（参数代码： formPanel:true,），增加这个参数之后，Datagrid 会默认出一个双击行事件，当双击行的时候，就会出现 第二个图的Form表单样式，如果，你选择了多个行来进行编辑的时候，这也支持的，弹出的表单会出现下一条的按钮，如下图：

这个图就是我在选择多个行之后，点击编辑所选是出现的页面，在Datagird上弹出了一个Form表单，这时，可以一条一条进行编辑，编辑一个之后，点下一条可所选择的下一个数据，当编辑完之后，可以点击确认，这时，你做编辑的数据会全部保存到数据库中

呵呵，是不是通过EHT这个开发平台框架来实现Datagrid 非常简单啊，好了，这里就不在介绍了，感兴趣的网友请经常关注我的博客，下一期，我会介绍Tree,ProgressBar,Accrodion等在EHT开发框架中的具体应用，同时可以到 http://demo.ehtsoft.com/ 看看EHT开发框架的demo演示。（功能不是很全，不过，有新功能的时候，我会逐步更新的）