GT-Grid的帮助文档总结

GT-Grid是使用很普遍，很耐使的报表展示组件，它是一个基于Ajax技术的列表组件.

拥有丰富的功能以及良好易用性和用户体验.

它是 EC Side列表组件 的更新换代产品.

(ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jspTag技术)

下面介绍该组件的组成：

1.======== 基础函数 =========

GT.$grid(idOrObj) 根据id取得一个grid对象.

var mygrid = new GT.Grid( config );  创建列表对象 config为grid的定义

mygrid.render() 在页面内生成列表. 一定要在页面onload之后调用.  或者直接使用下面的语句：

GT.Utils.onLoad( function(){
         mygrid.render();
} );

2.======== Dataset的定义 =========

data                  dataset里的数据集(数组),使用远程数据加载时,无需定义.
fields                是一个数组, 描述record各个字段的信息,类似数据库表中的列信息.
uniqueField    {s/i} 数据记录中,用来表示"唯一性"的字段
recordType     {s} 记录的类型,目前只支持两种: object,array

3.======== Dataset的字段(field)定义  =========

name :    {s}  字段的名字 (虽然时name 但是性质和id类似, 在一个数据集内要保持唯一性)
type :　   {s}  字段的类型  ( 目前只支持 string ,int, float , 为什么没有date类型?因为我觉得没必要,以后我会找机会解释一下我的想法和建议)
index :     {s}  字段对应的"record的属性名". 根据index,GT-Grid就可以知道这一列 对应的时record哪个属性的值.

4.======== GT.Grid 的定义 =========

autoLoad:true自动加载 false不自动加载

id   {s} 列表id
width   {i/s} 列表宽度 支持%
height   {i/s} 列表高度 支持%
container  {s/dom} 列表的容器的id. 列表最后是要显示在页面中某个位置.这个容器就是那个"位置",通常是一个div或者时td.
replaceContainer {b} 是否用列表代替容器元素
customHead  {s/dom} 自定义表头对应的table的id或对象,或table的HTML代码

columns   {a}数组. 列定义

dataset   {o} 列表对应的数据集

loadURL   {s} 读取数据的url
saveURL   {s} 提交数据的url

language  {s} 默认语言
skin   {s} 默认皮肤

toolbarPosition  {s} 工具栏的位置. 可选值:'top'/'bottom'/null,  暂时不支持上下都显示.
toolbarContent  {s} 具栏上要显示的东西. state表示的数据数量信息(分页信息),如共几条 共几页 当前是第几条等等..
 toolbarContent 默认= "nav | goto | pagesize | reload | add del save | print | filter chart | state" ,

resizable  {b} 是否可手动改变整个列表区域的大小( 默认: false)
minWidth  {i} 可手动改变大小时,最小宽度
minHeight  {i} 可手动改变大小时,最小高度
showIndexColumn  {b} 是否显示索引列
stripeRows  {b} 是否交替显示行颜色
lightOverRow  {b} 是否开启行的鼠标悬停指示
defaultRecord  {o/a} 默认的记录样板,新增记录时,将按此样板新增.

transparentMask  {b} 是否显示全透明的遮罩 (默认: false )

clickStartEdit  {b} 是否为"点击单元格直接进入编辑状态"
reloadAfterSave  {b} 提交数据后是否自动刷新列表
recountAfterSave {b} 提交数据后是否清空总记录数(以便后台重新统计总记录数)

showIndexColumn  {b} 是否显示索引列,就是用来标识当前页行号的列.

showGridMenu  {b} 是否开启主菜单
allowCustomSkin  {b} 是否开启主菜单上的皮肤选择选项
allowFreeze  {b} 是否开启主菜单上的冻结列选项
allowHide  {b} 是否开启主菜单上的隐藏列选项
allowGroup  {b} 是否开启主菜单上的列编组选项

selectRowByCheck : false
submitUpdatedFields : false
cleanContent
setContent( contentData )

5.======= GT.Grid的列(column)定义 =========

id   {s}  列对象的id
width   {i}  列的宽度(目前不支持%)
header   {s}  列的标题
fieldName : null, {s}  列对应的 Dataset中字段(field)的名字

align : 'left' , {s}  列数据单元格水平对齐方式, 可选值: left(默认) center right
hdAlign : 'left' , {s}  列表头水平对齐方式, 可选值: left(默认) center right

frozen   {b}  列是否被冻结
hidden   {b}  列是否被隐藏
sortOrder : null, {s}  列的排序状态

sortable  {b}  列是否可排序
moveable  {b}  列是否可手动移动
resizable  {b}  列是否可手动调节列宽
hideable  {b}  列是否可隐藏
frozenable  {b}  列是否可冻结
groupable  {b}  列是否可进行编组
filterable  {b}  列是否可参与过滤
printable  {b}  列是否可打印
editable  {b}  列是否可编辑

toolTip   {b}  列数据是否显示toopTip

minWidth  {i}  列的最小宽度
styleClass : null, {s}  列的数据单元格的style className
emptyText  {s}  当该列对应的数据不纯在时,默认显示的内容

hdRenderer  function(header,cobj)   列表头的渲染器
renderer  function(value ,record,columnObj,grid,colNo,rowNo) 单元格渲染器
editor   {o}  对应的编辑器定义 ,如 { type ... , validRule... getDisplayValue... ,} 见例子
filterField  {o}  过滤时使用的过滤器

6.======== GT.Grid 的方法 =========

getDeletedRecords function()  取得所有删除的数据
getUpdatedRecords function()  取得所有更新过的数据
getInsertedRecords function()  取得所有新增的数据

setSize   function(newWidth,newHeight) 设置单元格属性
refresh   function()   重新生成列表,但是数据并不重新载入
reload   function(data)   重新载入数据,并重新生成列表
query   function(params)

getColumn  function(colNoIdTd) 根据单元格或column对象id 取得column对象
getRecord  function( rowNoTdTr) 根据行号 或 单元格 或 tr 取得数据记录

getPageInfo  function() 返回分页信息 数据结构:{ pageSize : 20, pageNum : 0, totalRowNum :0,totalPageNum : 0, startRowNum :0, endRowNum :20 }

insert   function(record, startEdit ) 添加一条记录 , record为要添加的记录,如果没有指定或为null,那么将添加defaultRecord; startEdit,添加后是否自动开始编辑该行,默认为true.

7.======== GT.Grid 的事件/回调/钩子函数 =========

onClickCell  function(value, record , cell, row,  colNO, rowNO,columnObj,grid) 钩子:在选中某单元格时调用,返回false,则中止选中行为
onDblClickCell  function(value, record , cell, row,  colNO, rowNO,columnObj,grid) 钩子:双击单元格时调用
onClickHead  function(event,headCell,colObj,grid) 钩子:点击列表头

onComplete  function()  钩子:列表生成后调用

onShow   function()  列表由隐藏状态到显示状态时调用(需要开发人员手动调用,且必须调用)
onResize  function()  钩子:列表大小发生变化时调用

onMouseMove  function(event,grid) 鼠标在列表数据区移动时调用的函数. 
beforeSelectRow  function(record ,row, rowNo, grid) 钩子:在选中某行前调用,返回false,则中止选中行为
afterSelectRow : 钩子:选中某行之后调用

beforeEdit  function()   钩子:编辑单元格前调用(虽然无参数,但是可与 activeCell activeRecord交互)
afterEdit  function()   钩子:编辑单元格前调用(虽然无参数,但是可与 activeCell activeRecord交互)
beforeSave  function(requestParameter) 钩子:保存数据前前调用 返回false,则中止save  参数为提交的所有参数组成的json对象,结构后面说明
beforeLoad  function(requestParameter) 钩子:读取数据前调用 返回false,则中止load  参数为提交的所有参数组成的json对象,结构后面说明
beforeGotoPage

beforeInsert  function(record)   钩子:添加数据前调用 返回false,则中止insert  参数为新增的记录
afterInsert :  钩子:添加数据后调用 

beforeUpdate  function(record,fieldName,newValue) 钩子:修改数据前调用 返回false,则中止update  参数为编辑的记录,编辑的字段,新值
afterUpdate :  钩子:修改数据后调用

beforeDelete  function(record)   钩子:删除数据前调用 返回false,则中止del  参数为删除的记录
afterDelete :  钩子:删除数据后调用

onUpdateRecord : 钩子:在记录发生改变时调用

saveResponseHandler
loadResponseHandler

8.======== GT.Grid 的属性  =========

activeCell  {dom} 只读,当前(最后一次)选中的单元格(td对象)
activeColumn  {o} 只读,当前(最后一次)选中的列对象
activeRow  {dom} 只读,当前(最后一次)选中的行
activeRecord  {o/a} 只读,当前(最后一次)选中的行对应的数据记录

selectedRows  {a} 所有选中的行
columnList  {a} 所有列对象的数组
columnMap  {m} 所有列对象集合,key-value形式,key为column的id

9.======= GT.Grid 类方法 (类似静态方法)=========

findGridByElement  function(obj) 根据一个td或tr取得其所属于的列表对象

isSelectedRow   function(row) 判断某一行(tr) 是否被选中

getAllRows   function(grid)  取得列表的所有tr

render    function(grid)  渲染(生成列表) 参数是列表对象或其id.

10.======= GT.Grid 数据传输格式说明 =========
Gt-Grid 与后台进行数据交互 使用的都是 json串 (序列化后的json对象)

11.======= load操作 =========

load操作 客户端提交的json串:
[code="javascript"]
{
 action  : 'load', // 执行的操作类型,load表示是加载数据

 // 分页信息
 pageInfo : {
          pageSize : 20 ,  // 每页显示条数. 这个值决定于 你创建grid时的设置.
          totalRowNum : 0  , // 总记录数. 这个值在第一次载入列表时 为 0 ,以后是什么值 取决于服务端返回的值.
          startRowNum : 1, // 开始行号. 第一次载入列表或是查看列表的首页时,会传入1,(注意表示"开始行号"的数字是从1开始.
          endRowNum : (startRowNum+pageSize-1)  // 结束行号.这个值会在客户端计算好之后发给服务端.
 },

 // 排序信息
 sortInfo : [
   {
            columnId : "排序的列id" , 
            fieldName : "排序的列对应的dataset中的field字段名" ,
            sortOrder : "asc"  // 排序的顺序状态 : 升序"asc"  降序"desc"  默认"defaultsort"
   }

下一篇讲实例》