基于jQuery内核Datagrid实现及功能介绍-EHT开发平台框架UI
向大家介绍下Datagrid的实现方式及EHT开发平台框架Datagrid的功能，DataGrid 大家都了解，DataGrid 简单的说，就是一个可滚动可调整列宽可选择等功能的数据表格。
在介绍Datagrid之前，先让大家看下Datagrid实现效果，如下图：
具体demo演示见：http://demo.ehtsoft.com/
从上图可以看出该Datagrid具有列分组，多选，单选，表单等功能，下面简单的介绍下该DataGrid的实现，由于Datagrid代码非常多（近2000行），就不把所有的代码贴出来了，贴代码的缩量截图
EHT开发框架UI DataGrid 主要分为三个部分 头（header）、体（body）、尾（footer）三个部分,通过相应的js代码将三个部分有机的结合起来，就形成了如图的DataGrid 组件。
上面代码中，doQueryService方法，doDeleteService 方法等 do* 方法，就是提供了DataGrid远程访问数据的方法接口，同时通过远程数据将DataGrid填充形成如图的效果。从代码截图可以看出，addEmptyRow(),editSelectedRows()，editAllRows() 当方法是用于操作 DataGrid 的方法，从方面名前缀可以看出，方法分别表示 添加空行，编辑选择行，编辑所有行等。有关Eht DataGrid 组件的功能演示见：
Eht DataGrid 的功能如下：
1、具有列分组的功能
2、具有列本地排序的功能
3、具有列拖拽的功能
4、具有单独列可编辑的功能
5、具有单独行可编辑的功能
6、具有全部可编辑的功能
7、具有列数据选择的功能
8、具有DatePicker选择器的功能
9、具有数据表格参照的功能
10、具有数据tree参照的功能
11、具有数据验证的功能
12、通过和EHT开发平台框架的后台，DataGrid 组件具有自己远程数据调用的保存、查询、删除等功能
13、具有单行数据的Form表单弹出修改及多行数据Form表单的弹出修改功能
14、具有列固定的功能（类似于Excel列冻结的功能）
15、具有翻页的功能
16、具有命令按钮触发监听扩展功能
17、具有行数据扩展功能
18、具有单元格数据变化（change）监听扩展功能
19、就有单元格label动态显示功能
...
等等，就不具体介绍了
具体功能在EHT开发框架中应用见：http://demo.ehtsoft.com ,
开发框架下载地址：http://www.ehtsoft.com/module/webpage/eht-download.jsp
EHT 开发框架中UI DataGrid 的调用也非常简单，调用方法如下：
new Eht.DataGrid({selector:"#datagriddiv"});//参数是一个json格式的配置参数，通过参数的配置来实现Datagrid的各项功能，下面将参数配置代码贴给代价，用作开发的参考
{
selector:null,//html页面中的div元素的id等， 如：“#divid”
parentHeight:false,//DataGrid 的高度是否等于父容器高度，默认否
loadinit:true,//初始显示界面时，是否将访问后台数据，并将后台数据展现到 Datagrid中
formPanel:false,//添加或修改的时候，是否弹出Form表单方式
resetColWidth:false,//数据加载成功后，强制一次 column 的计算,false 不强制计算，true 强制计算
seq:true,//显示序列
height:null,
width:null,
editable:false,//是否允许编辑
readonly:false,//是否只读
orderby:true,//是否具备本地列排序
dragcolumn:true,//是否支持列拖拽
selectedField:"selected",//数据选中后，数据默认选择属性
editableField:"editable",//单行数据编辑时默认属性
opstatusField:"op_status",//modify 修改,new 新建
codeDefaultField:"default",//Datagrid参照代码默认值的属性
multable : false,//多选
checkbox:false,//ui 是否展现 checkbox
isFixedColumn:false,//是否固定列
fixedColumn:0,//固定列数
footbar:true,//是否显示尾部
isPaginate:true,//是否显示翻页的按钮
commandbar:false,//是否显示命令按钮
addButton:true,//是否具备添加按钮
editAllButton:true,//是否具备编辑所有的按钮
editSelectedButton:false,//是否具备编辑选择项目的按钮
saveButton:true,//是否具备保存按钮
deleteButton:true,//是否具备删除的按钮
paginate:new Eht.Paginate(),//默认翻页对象
paginateField:"paginate",//从后台返回json中的翻页对象属性key -- not use
dataField:"data", //从后台返回json中的列表数据属性key -- not use
deleteReload:false,//true 删除后台数据后，重新reload 当前页的数据，false 不重新查询后台数据显示
saveReload:true,//true 重新读取后台数据 当 doSaveService 方法执行完ajax保存之后，返回结果重新 load 页面 , false 表示不load页面保持现有的数据页面
saveClick:null, //Function 类型,参数 data,event,保存按钮触发的事件,data 为已经修改或新增的数据
saveDataBefore:function(data){},//保存数据前的方法
doSaveService:function(data,saveResp){}, // 保存 ajax
doQueryService:null,//function(paginate,query,loadResp){},// 查询 ajax
deleteDataBefore:function(data){return true;},//删除数据前调用
doDeleteService:function(data,delResp){},
loadQuery:{},//从后台查询获取数据的条件，json格式，属性为后台查询条件key
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:true},//DataGrid列配置，列中具有是否该列可编辑，该列只读，该列数据变化后回调方法，该列代码参照，该列label显示函数等等
{field:'field2',label:'label-02'},
{field:'field3',label:'label-03'},
{field:'field4',label:'label-04', 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'},
{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":"藏族"}]},
{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;
}}],
data:[],
emptyDisplay:"<NULL>",//未定义及空的数据显示
dblClickRowable:true,//是否允许双击
dblClickRow:function(data,e){
if(datagrid.options.formPanel==true){
datagrid.showFormPanel(data, $(e.currentTarget));
}
},
clickRow:function(data,e){},
addDataBefore:function(newdata,datas){
return true;
},
addDataAfter:function(newdata,datas){
return true;
},
addRowClick:null, //Function 类型,参数为 data,event, 新建按钮事件 创建事件方法
editRowsClick:null, //Function 类型,参数 data,event,编辑按钮触发的事件（所有编辑）
editSelectedClick:null,//Function 类型,参数 data,event,编辑按钮触发的事件（选择的数据）
deleteRowClick:null //Function 类型,参数 data,event, 删除按钮触发的事件
};