基于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 组件的功能演示见：

http://demo.ehtsoft.com/

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, 删除按钮触发的事件

};