显示表格

简介

WAFⅡ表格控件是一个基于Ajax控制的表格控件,提供了Web上数据的展示和操作功能。目前已经内置了分页,编辑,排序,合计,格式化,动态列,冻结、自定义编辑器,多表头,行列融合,可编辑表格校验等功能。

表格的数据是异步装载的,一般如果需要初始化的时候设置表格的属性或者表格数据加载完成后做操作,不能写在initalizeAction方法中。如果需要表格初始化时动态设置属性,需要在BIM工具上设置loadinit=false,然后在initalizeAction方法中设置初始化属性,然后调用方法reloadGrid.如果需要表格数据加载完成后做操作,一般写在loadComplete事件中。


使用方法

2.1 静态框架使用方法仅EAS7.5版本
<wafctrl:grid id="queryGrid" url="/getGridData.do" sortname="" height="auto" altRows="false" autowidth="true">
    <wafctrl:gridColumn label="id" name="id" width="40" />
</wafctrl:grid>
2.2 JS动态创建EAS8.0+
var options = {
    id:"myGrid", 
    colModel:[
        {name:"username",label:"用户名",width:100},
	{name:"age",label:"年龄",width:100},
	{name:"address",label:"住址",width:100},
	{name:"email",label:"电子邮箱",width:100}
    ]
};
var parentDom = waf("body");
var dom = waf.createDOM("grid", options);
waf.appendDOM(parentDom, dom);
waf.initComponent("grid", options, dom);
2.3 通用DOM创建EAS8.0+
<table id="myGrid"></table>
<!--DOM创建好之后,使用js初始化控件-->
var options = {
    id:"myGrid", 
    colModel:[
        {name:"username",label:"用户名",width:100},
	{name:"age",label:"年龄",width:100},
	{name:"address",label:"住址",width:100},
	{name:"email",label:"电子邮箱",width:100}
    ]
};
waf("#myGrid").wafGrid(options);
2.4 方法&事件使用EAS7.5+
//调用方法
waf("#id").wafGrid("method", parameter...);
//eg:方法调用
waf("#id").wafGrid("getRowId", 1);
waf("#id").wafGrid("reloadGrid");
//eg:更改事件
waf("#id").wafGrid("option","beforeProcessing",fn);

属性说明

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义表格的id

hidden Boolean 缺省值: false EAS7.5+

设置表格是否隐藏

gridConfig Boolean 缺省值: false EAS7.5+

是否允许动态更改表格配置

gridview Boolean 缺省值: false EAS7.5+

构造一行数据后添加到grid中,如果设为true则是批量将表格的数据构造完成后再添加到grid中。

multiboxonly Boolean 缺省值: false 不可以在运行期改变 EAS7.5+

只有当multiselect=true时起作用,如果multiselect设置为true,那么点击行任何位置都可以选中行。当multiboxonly设置为ture之后,就只有点击行前面的checkbox才会选中行。如果点击其它没有被选中的行,那么点中的行被选择,其它行取消选择。

ctrlkey Boolean 缺省值: false 不可以在运行期改变 EAS7.5+

只有当multiselect=true时起作用,如果此属性为true,单击时同时按照ctrl键会多选记录,此时复选框列会不显示。

style String 缺省值: “” EAS7.5+

设置表格的css样式

数据源

queryPK String 缺省值: null 不可以在运行期改变 EAS7.5+

表格的查询对象

filterItems String 缺省值: null 不可以在运行期改变 EAS7.5+

后台查询条件的过滤参数。

sortname String 缺省值: “” EAS7.5+

设置默认的排序字段名称。这个参数会被增加到url上传递到服务器端。默认值:emptyString.运行期改变排序的字段名之后,可以调用reloadGrid重新加载表格。

sortorder String 缺省值: “asc” EAS7.5+

设置默认的排序方式。可选值asc或desc.设置完成后,需要下次刷新数据时才能看到效果。

loadInit Boolean 缺省值: true EAS7.5+

定义初始化时是否自动装载数据。如果初始化时不自动装载数据,一般在initalizeAction中手动调用waf(‘#list2’).wafGrid(‘reloadGrid’)来装载数据。

mtype String 缺省值: “GET” EAS7.5+

定义请求方式。’POST’或’GET’

url String 缺省值: “” EAS7.5+

定义请求的URL地址。

datatype String 缺省值: “json” EAS7.5+

定义表格的数据源格式,有两种方式,分别为json和local。json要求url必须存在,会从对应的url获取数据。local为定义在客户端的数组数据,比如分录表格。如果没有必要从后台请求数据,则使用local方式。

postData Object 缺省值: {} EAS7.5+

设置直接通过url传递到服务器的参数。本属性的调用方式是传递一个形如{name1:value,name2:value2…}的数组

表格选择

multiselect Boolean 缺省值: false EAS7.5+

定义grid中的数据行是否可以被多选。如果为true则会在grid的最左边增加一列checkbox的选择框。

selectAllPage Boolean 缺省值: false EAS7.5+

是否开启跨页全选功能。

宽高

autowidth Boolean 缺省值: true EAS7.5+

设置为true,表格的宽度会根据父元素的宽度自动重新计算。如果设置为false,表格的宽度为设置的列宽相加之和。如果要在运行中动态设置宽度,需要通过setGridWidth方法来修改。

width Integer或String 缺省值: “auto” EAS7.5+

定义grid的宽度,不能设置为百分比,只能设置为数字或者auto。但是如果同时设置了autowidth为true,则这里设置的width失效。如果不设置当前值或者设置为auto,则按照各个列定义在colModel中的宽度总和作为grid的宽度。如果设置了本值,则grid中每一个列的初始宽度按照shrinkToFit参数定义来确定。动态改变表格的宽度通过方法setGridWidth来设置。

height Integer或String 缺省值: 150 EAS7.5+

可设置为auto、数字和数字+px,不能设置为百分比.动态改变表格的高度可以通过方法setGridHeight来设置.

shrinkToFit Boolean 缺省值: true EAS7.5+

定义初始化时候每列的宽度的算法。如果设置为true,表示每列的宽度按照所有列设定的宽度值的和与grid设定的宽度按比例进行缩放。如果设置为false,则列宽按照colModel中设定的宽度显示

forceFit Boolean 缺省值: false EAS7.5+

如果设置为true,并且用户改变了列宽度,那么右边临近的列宽度会自动调整以适应grid的整体宽度。这种情况下,是没有水平滚动条的。注意: 本选项与shrinkToFit选项不相容。如果shrinkToFit设置为false,那么forceFit的设置将被忽略。

客户端合计

autoSummary Boolean 缺省值: false EAS7.5+

如果设置为true,表格在数据变化时会自动计算。

summaryType String 缺省值: null EAS7.5+

计算类型。包括sum,count,avg,min,max.这些可定义为funciton,如果定义了之后,会传递相应的参数,包括val,name,record。val: 当前值,name:列名,record: 整个记录对象。列属性,8.2配置工具中,此属性通过表格设置。

customSummaryType Function 缺省值: null EAS7.5+

自定义合计函数,该函数接收两个参数(cm,ret).cm为当前列的配置,ret为表格中当前列的数据数组。列属性,8.2配置工具中,此属性通过表格设置。

summaryTpl String 缺省值: null EAS7.5+

在合计行上显示的合计信息。列属性,8.2配置工具中,此属性通过表格设置。

服务端合计

userDataOnFooter Boolean 缺省值: false EAS7.5+

如果设置为true,则直接把userData中的数据显示在grid的页脚。规则是: 如果userData数据包含和colModel中name一样的名字,那么userData的值就显示在该列。否则,什么都不显示。

customServerSummary Function 缺省值: null EAS7.5+

服务器端合计自定义函数(参数: 所有列名和计算类型拼好的字符串)

footerrow Boolean 缺省值: false EAS8.0-

如果设置为true,则会在grid的底部,导航条之上显示一个只有一行的table。列的数量和colModel定义的数量一致。

summaryAllType Function 缺省值: sum EAS7.5+

计算类型,默认为sum。列属性,8.2配置工具中,此属性通过表格设置。

summaryAllTpl String 缺省值: null EAS7.5+

设置合计行中的显示模板.列属性,8.2配置工具中,此属性通过表格设置。

按需查询

isDemandQuery Boolean 缺省值: false 不可以在运行期改变 EAS7.5+

决定表格查询的字段是否按需查询

多表头

useColSpanStyle Boolean 缺省值: false EAS7.5+

是否合并分组对应的列

startColumnName String 缺省值: null EAS7.5+

开始合并的列名。多表头包含的列必须在冻结的同一侧,即:多表头的列必须全部冻结或者全部不冻结。

numberOfColumns Integer 缺省值: null EAS7.5+

合并的列数,如果列是隐藏的,它将会被跳过.多表头包含的列必须在冻结的同一侧,即:多表头的列必须全部冻结或者全部不冻结。

titleText String 缺省值: null EAS7.5+

合并后的列的label

列冻结

frozen Boolean 缺省值: false EAS7.5+

冻结列的开关设置。列属性,8.2配置工具中,此属性通过表格设置。

行融合

rowspan Boolean 缺省值: false EAS7.5+

该列是否参加行合并的开关。列属性,8.2配置工具中,此属性通过表格设置。

rowSpanKey Boolean 缺省值: false EAS7.5+

该列是否作为合并的参照列,默认以number进行参照,如果设置了之后,在此列之后的合并就根据此列进行分组合并。列属性,8.2配置工具中,此属性通过表格设置。

rowSpanSelect Boolean 缺省值: false EAS7.5+

该参数在行融合下决定是否整单选中。

numColrowSpan Boolean 缺省值: true EAS7.5+

行融合时决定序号列是否参与融合。

cbColrowSpan Boolean 缺省值: true EAS8.2-

行融合时决定复选框所在列是否参与融合。如果表格设置整单选中且表格为多选时,默认为多选列融合,不建议设置此属性。

分页

includePager Boolean 缺省值: true 不可以在运行期改变 EAS7.5+

表格是否包含分页栏

pagerModel String 缺省值: “block” EAS7.5+

设置分页的模式,可选值包括block,more,scroll,traditional,virtual.

rowNum Integer 缺省值: 20 EAS7.5+

设置每一个grid的单页显示多少条记录。这个参数会通过url参数传递到服务器端进行分页处理。 如果你设置了页面最多显示10条记录,也就是rowNum=10,但是服务器端返回了15条记录,页面上也只会显示10条记录。设置本值为-1表示页面显示记录没有限制。

pagerpos String 缺省值: “right” EAS7.5+

设置分页栏出现的位置,可以设置为left,center,right,或者是指定外部的一个id选择器.默认为right,显示在分页栏的右边,如果设置为xx,则分页栏的位置会显示在id为xx的标签上

page Integer 缺省值: 1 EAS7.5+

设置显示第几页

rowList Array 缺省值: [] EAS7.5+

本参数用来为grid生成一个可供选择的调整每页显示记录条数的下拉菜单。在grid中选择修改这个值,grid会用新的选择值来修改rowNum参数并传递到服务器端。可以设置的格式如[10,20,30]

pageTemplate Array 缺省值: null EAS7.5+

pageTemplate-为一个JSON数组,数组中指定在分页栏中各个位置显示的内容,结构为:[{pos:content},{…},{…}].例如pageTemplate:[{left:{0}共{1}个人员},{xxx:{0}共{1}个人员}],第一个对象将会在分页栏的left位置上显示查询出来的概要信息,第二个对象会在id为xxx的选择器上显示出分页栏信息。注意: 1.如果pageTemplate适应于pagerModel为traditional,block,more三种类型。2.如果pagerpos设置的默认分页元素放置在right位置,pageTemplate也设置了right的显示信息,则默认的分页元素会被冲掉。

pgbuttons Integer 缺省值: 5 EAS7.5+

分页栏中出现的页码的个数,一般设置为奇数,只有在pagerModel为block时才生效

显示

rownumbers Boolean 缺省值: true EAS7.5+

如果定义为true,则会在grid的左边增加一列,增加的列用来显示记录行数,记录从1开始显示。这种情况下,colModel被一个name为rn的列自动扩展。由此,我们要注意了,在我们自己定义的列中,不要使用name=’rn’这种名称。

altRows Boolean 缺省值: false EAS7.5+

定义表格是否显示为斑马线样式,需要配合altclass一起使用。设置完成后,需要下次刷新数据时才能看到效果

altclass String 缺省值: “ui-priority-secondary” EAS7.5+

定义表格交替行的class。只有设置了altRows为true才有效。设置完成后,需要下次刷新数据时才能看到效果。

breakLine Boolean 缺省值: true EAS7.5+

表格数据是否折行显示

rownumOption Object 缺省值: {width:17} EAS7.5+

行号列的相关配置,可以增加formatter和formatteroption等属性

树表

treeGrid Boolean 缺省值: false EAS8.2+

是否为树表的开关

expandedLevel Integer 缺省值: 1 EAS8.2+

缺省展开层级

ExpandColumn String 缺省值: “” EAS8.2+

树形展现的列

parentId String 缺省值: null EAS8.2+

树表父字段名

表格列

name String 缺省值: null 不可以在运行期改变 EAS7.5+

必输项,表格列的名称,所有关键字,保留字都不能作为名称使用包括subgrid,cbandrn.列名不能是数字。对应绑定属性的英文名,如果是自定义列,其和id值一致

label String 缺省值: null EAS7.5+

列对应的标题

sorttype String 缺省值: “text” EAS7.5+

用在当datatype为local时,定义搜索列的类型,可选值: int/integer-对integer排序float/number/currency-排序数字date-排序日期text-排序文本

sortable Boolean 缺省值: true EAS7.5+

是否可排序

align String 缺省值: “center” EAS7.5+

定义单元格对齐方式;可选值: left,center,right.

width Integer或String 缺省值: 80 EAS7.5+

默认列的宽度,只能是象素值,不能是百分比

key Boolean 缺省值: false 不可以在运行期改变 EAS7.5+

标示某列是否是主键列

index String 缺省值: null EAS7.5+

当排序时定义排序字段名称的索引,参数名为sidx

tagClass String 缺省值: “” EAS7.5+

给每个列设置class,这个class会增加到列对应的每个td上

formatter String 缺省值: “” EAS7.5+

对列进行格式化时设置的格式化类型,详细请查看格式化

formatoptions Object 缺省值: null EAS7.5+

对某些列进行格式化的选项设置

customformatter Function 缺省值: null EAS7.5+

对列进行格式化时设置的函数

customunformatter Function 缺省值: null EAS7.5+

对列进行反格式化时设置的函数


方法说明

option 参数: (property[,value]) 返回值类型: (任何类型) EAS7.5+

获得或设置显示表格/可编辑表格某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值 [参考样例]

  • 参数说明:
        - property: 必要参数,表格控件的属性
        - value: 可选参数,表格控件的属性值
  • 返回值说明:
        参数没有value时,返回值为相应属性的值,返回值类型为属性对应的类型;参数有value时此方法的作用是设置属性的值,没有返回值。

option 参数: (options) 返回值类型: (undefined) EAS7.5+

对控件多个属性进行一次性设置

  • 参数说明:
        - options: 形式如{property:value[,property1:value1,…]}的json对象,用来描述标签的属性和相应的值
  • 返回值说明: 无

setGridHeight 参数: (new_height) 返回值类型: (undefined) EAS7.5+

设置表格的高度 [参考样例]

  • 参数说明:
        - new_height: 可以是auto、数字和数字+px
  • 返回值说明: 无

setGridWidth 参数: (new_width,shrink) 返回值类型: (undefined) EAS7.5+

设置表格的宽度 [参考样例]

  • 参数说明:
        - new_width: 只能是数字
        - shrink: shrink和shrinkToFit有相同的效果
  • 返回值说明: 无

getOriginalWidth 参数: (无) 返回值类型: (Integer) EAS7.5+

返回表格初始的宽度,初始宽度等于各个列的宽度相加。

  • 参数说明: 无
  • 返回值说明: 无

reloadGrid 参数: (无) 返回值类型: (undefined) EAS7.5+

重新请求数据,发起一个请求,请求json数据。此方法不会更新header部分,如果想更改,请使用gridUnload来装载表格的配置 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

setGridData 参数: (data,reload) 返回值类型: (undefined) EAS7.5+

当datatype为local时,也就是在分录中,通过此方法可以设置表格中的数据集合

  • 参数说明:
        - data: 数据集合,是一个数组
        - reload: reload为true,则装载表格,否则不装载
  • 返回值说明: 无

gridRestore 参数: (p) 返回值类型: (undefined) EAS7.5+

配置表格配置项重新恢复表格.

  • 参数说明:
        - p: 表格配置项
  • 返回值说明: 无

clearGridData 参数: (clearfooter) 返回值类型: (undefined) EAS7.5+

清除当前装载的数据,如果clearfooter设置为true,则会将footer的信息也清除掉 [参考样例]

  • 参数说明:
        - clearfooter: Boolean
  • 返回值说明: 无

gridDestroy 参数: (无) 返回值类型: (Object) EAS7.5+

卸载对应的表格,清除所有的html元素和相关的绑定事件

  • 参数说明: 无
  • 返回值说明: 无

gridUnload 参数: (editgrid_id) 返回值类型: (Object) EAS7.5+

和GridDestroy唯一的不同是,table元素和pager元素还被保留

  • 参数说明:
        - editgrid_id: id标识
  • 返回值说明: 无

getDataIDs 参数: (无) 返回值类型: (Array) EAS7.5+

返回行id,是个数组 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

getRowIndex 参数: (rowid) 返回值类型: (Integer) EAS7.5+

返回行的index值 [参考样例]

  • 参数说明:
        - rowid: 行id
  • 返回值说明: 无

getRowId 参数: (rowIndex) 返回值类型: (String) EAS7.5+

返回行的id值 [参考样例]

  • 参数说明:
        - rowindex: 行索引
  • 返回值说明: 无

getRowObject 参数: (rowid) 返回值类型: (Object) EAS7.5+

返回HTML行对象 [参考样例]

  • 参数说明:
        - rowid: 行id
  • 返回值说明: 返回HTML的TR对象

getRowRealData 参数: (rowid) 返回值类型: (Object) EAS7.5+

返回每一行真正的值对象。 [参考样例]

  • 参数说明:
        - rowid: 行id
  • 返回值说明: 无

getAllRowData 参数: (无) 返回值类型: (Array) EAS7.5+

返回表格的所有行数据。 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

setRowData 参数: (rowid,data,cssprop,record) 返回值类型: (Boolean) EAS7.5+

更新某行的数据,注意不要使用这个方法在编辑状态。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - data: 格式为: {name1:value1,name2:value2…}的JSON对象
        - cssprop: cssprop为css相关属性。我们可以仅仅设置css而不用更新数据,如果data为false的话
        - record: 如果参数设置为true,请当前表格为可编辑表格时,会标示此单元格被修改过,加红色标示,否则不记录。
  • 返回值说明: 更新成功返回true,失败返回false

addLocalRowData 参数: (data,pos,src) 返回值类型: (undefined) EAS7.5+

将一组JSON对象加入到表格中,此方法用于分录中,此时表格不支持分页。

  • 参数说明:
        - data: JSON数组,存放若干个行数据
        - pos: 增加在那个位置,默认为after,可选值为first,before,last,after
        - src: 行的id,在pos为before和after时,决定插入在哪行的前面或者后面
  • 返回值说明: 无

setRowStyle 参数: (rowid,style) 返回值类型: (undefined) EAS7.5+

更新某行的数据,注意不要使用这个方法在编辑状态。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - style: style为css相关属性
  • 返回值说明: 无

addRow 参数: (p,record) 返回值类型: (undefined) EAS7.5+

在表格中增加一行 [参考样例]

  • 参数说明:
        - p: 参数为p,是一个对象{data:{},position:”last”,src:”“,afterAddRow:null,autoFocus:true}position:last(插入在最后一行)|first(插入在第一行)|before(插入在某行前面,通过src指定)|after(插入在某行后面,通过src指定)src:rowId.某行的ID,如果position为last和first,则src不用传递afterAddRow:增加某行之后的回调data为插入的数据autoFocus默认为ture,编辑完后是否将焦点放到单元格上。rowID:新增行的rowId
        - record: 如果参数设置为true,请当前表格为可编辑表格时,会标示此单元格被修改过,加红色标示,否则不记录。
  • 返回值说明: 无

delRow 参数: (rowid,p) 返回值类型: (undefined) EAS7.5+

删除行。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - p: p为一个对象,{beforeDelRow:null,afterDelRow:null},可以覆盖这两个回调来做判断和后续处理,beforeDelRow的参数为(rowId,t,colModel)afterDelRow的参数为(t,colModel)删除行时,要求必须存在key=true的列,否则从getChangedRows中获取不到被删除行,删除不会成功。
  • 返回值说明: 无

setSelection 参数: (rowid,onselectrow) 返回值类型: (undefined) EAS7.5+

切换行id=rowid的选中状态。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - onselectrow: 如果onselectionrow为true,则onSelectRow被触发,否则不会触发
  • 返回值说明: 无

removeSelect 参数: (rowId) 返回值类型: (undefined) EAS7.5+

移除记录的选中状态,在多选的情况下,如果传递了rowId,则只会将rowId对应的记录的选中状态移除,否则全部移除。注意: rowId为字符串,请加上冒号 [参考样例]

  • 参数说明:
        - rowId: 行id
  • 返回值说明: 无

moveRowUp 参数: (rowid) 返回值类型: (undefined) EAS7.5+

向上移动某行 [参考样例]

  • 参数说明:
        - rowid: 被移动的行id
  • 返回值说明: 无

moveRowDown 参数: (rowid) 返回值类型: (undefined) EAS7.5+

向下移动某行 [参考样例]

  • 参数说明:
        - rowid: 被移动的行id
  • 返回值说明: 无

swapRow 参数: (srcRowid,destRowid) 返回值类型: (undefined) EAS7.5+

交换移动两行 [参考样例]

  • 参数说明:
        - srcRowid: 被交换的行id
        - destRowid: 被交换的行id
  • 返回值说明: 无

moveRow 参数: (rowid,index) 返回值类型: (undefined) EAS7.5+

移动rowid对应的行到index对应的位置 [参考样例]

  • 参数说明:
        - rowid: 行id
        - index: 位置
  • 返回值说明: 无

getSelectedRow 参数: (无) 返回值类型: (String) EAS7.5+

返回选中的rowid,只返回一个 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

getSelectedRows 参数: (无) 返回值类型: (Array) EAS7.5+

返回选中的所有行id,单选和多选都适用 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

getRowCount 参数: (无) 返回值类型: (Integer) EAS7.5+

返回总记录数 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

getPageRowCount 参数: (无) 返回值类型: (Integer) EAS7.5+

返回当前页记录数,一般来说他和rowNum应该是相等的,但是如果删除了记录之后,可能就不相等了,此方法取得是真正存在的记录数。 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

setColumnConfig 参数: (col,config) 返回值类型: (Object) EAS7.5+

设置表格列对象

  • 参数说明:
        - col: 列名或者列索引
        - config: 表格列对象
  • 返回值说明: 无

getColumnConfig 参数: (colName) 返回值类型: (object) EAS7.5+

获取某列的配置 [参考样例]

  • 参数说明:
        - colName: 列名
  • 返回值说明: 无

getAllColumn 参数: (无) 返回值类型: (array) EAS7.5+

获取所有的列配置 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

getColumnName 参数: (colIndex) 返回值类型: (String) EAS7.5+

获取列索引获取列名 [参考样例]

  • 参数说明:
        - colIndex: 列索引
  • 返回值说明: 无

setColumnProp 参数: (colName,propName,value) 返回值类型: (undefined) EAS7.5+

设置列配置中的某个属性 [参考样例]

  • 参数说明:
        - colName: 列名
        - propName: 属性名
        - value: 值
  • 返回值说明: 无

getColumnProp 参数: (colName,propName) 返回值类型: (undefined) EAS7.5+

获取列配置中的某个属性 [参考样例]

  • 参数说明:
        - colName: 列名
        - propName: 属性名
  • 返回值说明: 无

getColValue 参数: (colname,returntype,mathoperation) 返回值类型: (Array或Integer) EAS7.5+

该方法会返回某列的所有值 [参考样例]

  • 参数说明:
        - colname: 列名
        - returntype: 如果设置为false(缺省值),返回的数组仅仅包含值.如果设置为true,返回的数组包含对象.对象的格式为{id:rowid,value:cellvalue}
        - mathoperation: mathoperation有效的参数为sum,avg,count。如果有效,则会自动进行计算,如果无效,返回空数组
  • 返回值说明: 无

showColumn 参数: (colname或者[colnames],rebuildWidth) 返回值类型: (undefined) EAS7.5+

显示某列,可以批量显示某些列。 [参考样例]

  • 参数说明:
        - colname或者[colnames]: 列名
        - rebuildWidth: 重新计算表格的宽度
  • 返回值说明: 无

hideColumn 参数: (colname或者[colnames],rebuildWidth) 返回值类型: (undefined) EAS7.5+

隐藏列,可批量隐藏列。 [参考样例]

  • 参数说明:
        - colname或者[colnames]: 列名
        - rebuildWidth: 重新计算表格的宽度
  • 返回值说明: 无

setLabel 参数: (colname,data,class,properties) 返回值类型: (undefined) EAS7.5+

设置某列的标签。 [参考样例]

  • 参数说明:
        - colname: 列名
        - data: data如果是empty,则不会发生变化
        - class: class为对应的css属性
        - properties: property为label的属性
  • 返回值说明: 无

sortGrid 参数: (colname,sor) 返回值类型: (undefined) EAS7.5+

根据某列来进行排序 [参考样例]

  • 参数说明:
        - colname: 列名
        - sor: asc或者desc
  • 返回值说明: 无

swapColumns 参数: (srcColName,destColName) 返回值类型: (undefined) EAS7.5+

交换两列 [参考样例]

  • 参数说明:
        - srcColName: 列1
        - destColName: 列2
  • 返回值说明: 无

moveColumn 参数: (colName,pos) 返回值类型: (undefined) EAS7.5+

移动列到某个位置 [参考样例]

  • 参数说明:
        - colName: 列名
        - pos: 要移动到的位置
  • 返回值说明: 无

moveColumnForward 参数: (colName) 返回值类型: (undefined) EAS7.5+

向前移动某列 [参考样例]

  • 参数说明:
        - colName: 列名
  • 返回值说明: 无

moveColumnBack 参数: (colName) 返回值类型: (undefined) EAS7.5+

向后移动某列 [参考样例]

  • 参数说明:
        - colName: 列名
  • 返回值说明: 无

addColumn 参数: (config,index,loaddata) 返回值类型: (undefined) EAS7.5+

增加一列. [参考样例]

  • 参数说明:
        - config: config为列的配置,和gridColumn.tag中的配置一样,注意config的name不能为rn,cb和subgrid
        - index: index为插入的位置,如果没有传递或者undefined,默认追加到最后
        - loaddata: loaddata增加列后是否装载数据
  • 返回值说明: 无

removeColumn 参数: (colName,loaddata) 返回值类型: (undefined) EAS7.5+

移除表格中的某列. [参考样例]

  • 参数说明:
        - colName: 列名,注意列名不能为rn,cb和subgrid
        - loaddata:移除后是否装载数据,默认装载数据
  • 返回值说明: 无

removeAllColumn 参数: (无) 返回值类型: (undefined) EAS7.5+

移除表格中所有的列,移除后不再装载数据. [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

destroyFrozenColumns 参数: (无) 返回值类型: (undefined) EAS7.5+

解锁所有的冻结列 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

addFrozenColumn 参数: (colName) 返回值类型: (undefined) EAS7.5+

增加冻结列。 [参考样例]

  • 参数说明:
        - colName: 列名
  • 返回值说明: 无

removeFrozenColumn 参数: (colName) 返回值类型: (undefined) EAS7.5+

将某个冻结列解锁。 [参考样例]

  • 参数说明:
        - colName: 列名
  • 返回值说明: 无

setColumnStyle 参数: (colname,style,footer,callback) 返回值类型: (undefined) EAS7.5+

设置某个列的风格。 [参考样例]

  • 参数说明:
        - colName: 列名
        - style: css样式
        - footer: 页脚是否同样设置
        - callback: 回调函数,回调函数的参数为: rowId,colId,colModel,回调函数可以返回新的style
  • 返回值说明: 无

getCellObject 参数: (rowid,col) 返回值类型: (Object或Boolean) EAS7.5+

获取CELL对象,和getCell不同的是,此方法返回整个td对象。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - col: 列索引或者列名
  • 返回值说明: 无

getCell 参数: (rowid,iCol) 返回值类型: (Object或Boolean) EAS7.5+

返回cell内容,当你编辑行或者单元格的时候,不要使用这个方法,他会返回cell内容,而不是真正的input中的内容。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - iCol: 列索引或者列名
  • 返回值说明: 无

setCell 参数: (rowid,colname,data,class,attrp,forceup,record) 返回值类型: (undefined) EAS7.5+

设置单元格的内容,可同时设置css和更改td的属性值。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - colname: 列名或者列索引
        - data: cell值,如果为空时,且forceup为false或者不设置,不会更改单元格的值,如果forceup为true,则更改单元格的值
        - class: 如果class是字符串,通过addClass增加。如果是个对象,则写入到单元格对应的css属性中
        - attrp: 通过此参数来设置td的属性值,此属性值使用jquery的attr来更改
        - forceup: 如果参数设置为true,会更新单元格的值,否则需要看data是否是空字符串。
        - record: 如果参数设置为true,请当前表格为可编辑表格时,会标示此单元格被修改过,加红色标示,否则不记录。
  • 返回值说明: 无

setCellStyle 参数: (rowid,col,style) 返回值类型: (undefined) EAS7.5+

设置单元格的风格。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - col: 列名或者列索引
        - style: css字符串,例如background-color:#cdcdcd
  • 返回值说明: 无

setGroupHeaders 参数: (o) 返回值类型: (undefined) EAS7.5+

设置多表头 [参考样例]

  • 参数说明:
        - o: 配置对象{useColSpanStyle:false,groupHeaders:[]}。
  • 返回值说明: 无

destroyGroupHeader 参数: (无) 返回值类型: (undefined) EAS7.5+

销毁多表头 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

getGroupHeadersConfig 参数: (无) 返回值类型: (Object) EAS7.5+

得到多表头的配置 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

setFooterData 参数: (data,isFormat, server) 返回值类型: (undefined) EAS7.5+

设置表格footer的数据 [参考样例]

  • 参数说明:
        - data: JSON数据。
        - isFormat: 是否格式化 。
        - server: 是否服务端合计。
  • 返回值说明: 无

getFooterData 参数: (isFormat,server) 返回值类型: (Object) EAS7.5+

返回表格行的footer数据 [参考样例]

  • 参数说明:
        - isFormat: 是否反格式化
        - server: 是否服务端合计。
  • 返回值说明: 无

calcFooterData 参数: (p) 返回值类型: (undefined) EAS7.5+

调用此方法来自动计算表格的合计相关设置 [参考样例]

  • 参数说明:
        - p: p为一个JSON对象,包括三个部分。1.isFormat是否按照列的设置来格式化,默认为true。2.colName–列名,单独对某列进行合计。3.datas–合计的数据来源,为数组。如果不设置此属性,从当前表格中获取数据来合计。
  • 返回值说明: 无

createPager 参数: (options,loaddata) 返回值类型: (undefined) EAS7.5+

根据参数创建分页栏,options类似于{rowList:[5,10,20,40,50],rowNum:5}

  • 参数说明:
        - options: JSON对象。
        - loaddata: 是否装载数据,默认重新刷新数据。
  • 返回值说明: 无

deletePager 参数: (无) 返回值类型: (undefined) EAS7.5+

删除分页栏

  • 参数说明: 无。
  • 返回值说明: 无

setPagerProp 参数: (propName,value,loaddata) 返回值类型: (undefined) EAS7.5+

设置分页栏属性

  • 参数说明:
        - propName: 属性名,可以为对象
        - value: 属性值
        - loaddata: 是否装载数据,默认装载
  • 返回值说明: 无

getPagerProp 参数: (propName) 返回值类型: (undefined) EAS7.5+

返回分页属性值

  • 参数说明:
        - propName: 属性名。
  • 返回值说明: 无

setGridLeftHeadMsg 参数: (message) 返回值类型: (undefined) EAS7.5+

设置全选左边栏文字信息,跨页全选设置为true时才可以使用。

  • 参数说明:
  • message (String) : 需要显示的信息字符串
  • 返回值说明: 无

setGridRightHeadMsg 参数: (message) 返回值类型: (undefined) EAS7.5+

设置全选右边栏文字信息,跨页全选设置为true时才可以使用。

  • 参数说明:
  • message (String) : 需要显示的信息字符串
  • 返回值说明: 无

事件说明

beforeRequest 参数: (无) EAS7.5+

事件在开始请求数据之前触发,如果事件返回false,不会发起远程请求,此事件调用时还未发送ajax请求。显示表格和分录在请求数据时都会调用此事件 [参考样例]

  • 参数说明: 无。

loadBeforeSend 参数: (xhr,settings) EAS7.5+

在ajax请求被发送之前,通过这个回调函数来修改ajax参数。使用这个事件可以设置自定义的头信息,返回false将会取消这个请求。此事件只有在datatype为json时触发。 [参考样例]

  • 参数说明:
        - xhr: ajax的相关配置,代表XMLHttpRequest
        - settings: 请求的相关配置,比如url

serializeGridData 参数: (postData) EAS7.5+

设置发送ajax请求时的序列化数据,返回值是序列化后的数据。如果想加自定义的参数传递到后台,可以使用这个函数。 [参考样例]

  • 参数说明:
        - postData: 传递到后台的相关数据,默认包括page,rows,sidx,sord等参数

loadError 参数: (xhr,status,error) EAS7.5+

如果请求失败,则会调用这个函数。 [参考样例]

  • 参数说明:
        - xhr: ajax请求对象
        - status: 返回状态信息
        - error: 错误信息

beforeProcessing 参数: (data,status,xhr) EAS7.5+

刚从服务器端返回的数据还未处理之前触发。注意: 数据会依据datatype的类型来格式化,如果是json,则数据是一个Javascript对象 [参考样例]

  • 参数说明:
        - data: 返回的数据,此数据根据dataType类型的不同而不同
        - status: 返回状态信息
        - xhr: ajax请求对象

loadComplete 参数: (data) EAS7.5+

当从服务器端返回数据并装载完成后触发。 [参考样例]

  • 参数说明:
        - data: 装载完成后的表格相关数据,data是个对象,包括以下属性page:当前页码records:总记录数rows:行数据,是一个数组,数组中存放每个表格的JSON对象total:总页数userdata:用户自定义数据

afterCreateGrid 参数: (table) EAS7.5+

表格DOM创建后触发,此时并没有请求数据。

  • 参数说明:
        - table: 表格本身

beforeReloadGrid 参数: (table) EAS7.5+

重新刷新表格前触发。

  • 参数说明:
        - table: 表格本身

ondblClickRow 参数: (rowid,iRow,iCol,e) EAS7.5+

双击行时触发。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - iRow: row对应的index
        - iCol: cell的index
        - e: 事件对象event

onPaging 参数: (pgButton) EAS7.5+

在点击了分页按钮并且组装数据之前触发,或者也在输入了页码并且回车时触发。 [参考样例]

  • 参数说明:
        - pgButton: 行id

onRightClickRow 参数: (rowid,iRow,iCol,e) EAS7.5+

右键点击行时触发。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - iRow: row对应的index
        - iCol: cell的索引值
        - e: 事件对象event

onSortCol 参数: (index,iCol,sortorder) EAS7.5+

在点击了列进行排序还未排序前触发。 [参考样例]

  • 参数说明:
        - index: 在colModel中的index
        - iCol: 列的index
        - sortorder: asc/desc

afterInsertRow 参数: (rowid,rowdata,rowelem) EAS7.5+

事件在每行记录被插入后触发。注意: 在gridview设置为true时,该事件不会触发。 [参考样例]

  • 参数说明:
        - rowid: 插入行的id
        - rowdata: 当前行对应的数据,只包含了表格列对应的数据,格式为name:value,name为colModel中的名字
        - rowelem: 是从服务器返回的元素。他的数据肯定包含了rowdata,并且可能比rowdata多。意思就是说,这里的有些字段并没有别显示在表格上。

beforeSelectRow 参数: (rowid,e) EAS7.5+

用户点击行的时候触发,但是在选择之前。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - e: 事件对象

onSelectRow 参数: (rowid,status) EAS7.5+

在行被点击后。

  • 参数说明:
        - rowid: 选择的行id
        - status: 选择的状态

onSelectAll 参数: (aRowids,status) EAS7.5+

在multiselect为true并且点击表头的checkbox时触发,注意: aRowids仅仅包含id。 [参考样例]

  • 参数说明:
        - aRowids: 选择的行id
        - status: 选择的状态

onCellSelect 参数: (rowid,iCol,cellcontent,e) EAS7.5+

点击某个单元格时触发。 [参考样例]

  • 参数说明:
        - rowid: 行id
        - iCol: cell的索引值
        - cellcontent: cell单元格内容
        - e: 事件对象

afterSelectAll 参数: (无) EAS7.5+

全部勾选之后触发。

  • 参数说明: 无

afterCancelSelect 参数: (无) EAS7.5+

取消勾选之后触发。

  • 参数说明: 无

beforeExpandTreeGridRow 参数: (无) EAS8.2+

树节点展开前触发。

  • 参数说明: 无

afterExpandTreeGridRow 参数: (无) EAS8.2+

树节点展开后触发。

  • 参数说明: 无

样例集合

  1. 基本表格
  2. 表格多选方式
  3. 冻结
  4. 格式化
  5. 表格方法
  6. 表格事件
  7. 多表头
  8. 客户端合计
  9. 服务器端合计
  10. 行融合
  11. 表格列与数据控制
  12. 动态化表格
  13. 块状分页
  14. 更多分页
  15. 滚动分页
  16. 列分组例子
  17. 虚模式分页
  18. 跨页全选