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"

}

下一篇讲实例》