简介
WAFⅡ表格控件是一个基于Ajax控制的表格控件，提供了Web上数据的展示和操作功能。目前已经内置了分页，编辑，排序，合计，格式化，动态列，冻结、自定义编辑器，多表头,行列融合，可编辑表格校验等功能。
表格的数据是异步装载的，一般如果需要初始化的时候设置表格的属性或者表格数据加载完成后做操作，不能写在initalizeAction方法中。如果需要表格初始化时动态设置属性，需要在BIM工具上设置loadinit=false,然后在initalizeAction方法中设置初始化属性，然后调用方法reloadGrid.如果需要表格数据加载完成后做操作，一般写在loadComplete事件中。
使用方法
2.1 静态框架使用方法仅EAS7.5版本
<wafctrl:editGrid id="editGrid" entrys="${entrys}" loadInit="false" mtype="post" autowidth="true" sortname="" height="300" shrinkToFit="false" multiselect="true">
<wafctrl:gridColumn label="总数" name="total" index="total" align="right" width="120">
<wafctrl:numberField id="txtTotal" name="total" formatType="percent"/>
</wafctrl:gridColumn>
</wafctrl:editGrid>
2.2 JS动态创建EAS8.0+
var options = {
id:"myGrid",
editable:true,
editModel:"cellEdit",
colModel:[
{
name:"username",label:"用户名",width:100,edittype:"waftext",formatter:"waftext",editable:true,
editoptions:{inputJson:{name:"username",dataBind:"username"}}
},
{
name:"age",label:"年龄",width:100,edittype:"numberfield",formatter:"numberfield",editable:true,
editoptions:{inputJson:{name:"age",formatType:"number",dataBind:"age"}}
},
{
name:"borndate",label:"出生日期",width:100,edittype:"datepicker",formatter:"datepicker",editable:true,
editoptions:{datepickerjson:{name:"borndate",dataBind:"borndate",changeMonth:false,dateFormat:"yy-mm-dd"}}
},
{
name:"email",label:"电子邮箱",width:100,edittype:"waftext",formatter:"waftext",editable:true,
editoptions:{inputJson:{name:"email",dataBind:"email"}}
}
]
};
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",
editable:true,
editModel:"cellEdit",
colModel:[
{
name:"username",label:"用户名",width:100,edittype:"waftext",formatter:"waftext",editable:true,
editoptions:{inputJson:{name:"username",dataBind:"username"}}
},
{
name:"age",label:"年龄",width:100,edittype:"numberfield",formatter:"numberfield",editable:true,
editoptions:{inputJson:{name:"age",formatType:"number",dataBind:"age"}}
},
{
name:"borndate",label:"出生日期",width:100,edittype:"datepicker",formatter:"datepicker",editable:true,
editoptions:{datepickerjson:{name:"borndate",dataBind:"borndate",changeMonth:false,dateFormat:"yy-mm-dd"}}
},
{
name:"email",label:"电子邮箱",width:100,edittype:"waftext",formatter:"waftext",editable:true,
editoptions:{inputJson:{name:"email",dataBind:"email"}}
}
]
};
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","afterSaveCell",fn);
属性说明
id String 缺省值: null 不可以在运行期改变 EAS7.5+
定义表格的id
multiselect Boolean 缺省值: false EAS7.5+
定义grid中的数据行是否可以被多选。会在grid的最左边增加一列checkbox的选择框。
editable Boolean 缺省值: true EAS7.5+
定义表格是否可以编辑。
hidden Boolean 缺省值: false EAS7.5+
决定是否在初始化的时候隐藏列
tabindex Integer 缺省值: 0 EAS7.5+
全键盘操作时，规定控件的控制次序。
gridConfig Boolean 缺省值: false EAS7.5+
是否允许动态更改表格配置
数据源
entryProp String 缺省值: “entrys” EAS7.5+
分录在info对象中对应的属性名,默认为entrys,一个界面有多个分录时，必须设置这个属性。
loadInit Boolean 缺省值: true EAS7.5+
定义初始化时是否自动装载数据。如果初始化时不自动装载数据，一般在initalizeAction中手动调用waf(‘#list2’).wafGrid(‘reloadGrid’)来装载数据。
datatype String 缺省值: “json” EAS7.5+
定义表格的数据源格式，有两种方式,分别为json和local。json要求url必须存在，会从对应的url获取数据。local为定义在客户端的数组数据，比如分录表格。如果没有必要从后台请求数据，则使用local方式。
mtype String 缺省值: “GET” EAS7.5+
定义请求方式。’POST”或’GET”
url String 缺省值: “” EAS7.5+
定义请求的URL地址。
postData Object 缺省值: {} EAS7.5+
设置直接通过url传递到服务器的参数。本属性的调用方式是传递一个形如{name1:value,name2:value2…}的数组。
sortname String 缺省值: “” EAS7.5+
设置默认的排序字段名称。这个参数会被增加到url上传递到服务器端。默认值:emptyString.运行期改变排序的字段名之后，可以调用reloadGrid重新加载表格。
sortorder String 缺省值: “asc” EAS7.5+
设置默认的排序方式。可选值asc或desc.设置完成后，需要下次刷新数据时才能看到效果。
编辑模式
editModel String 缺省值: “cellEdit” 不可以在运行期改变 EAS7.5+
可编辑表格的编辑模式。7.5版本提供了两种编辑模式，分别是cellEdit和floatEdit,默认为cellEdit，8.0以上版本仅支持cellEdit模式.
editModelOptions Object 缺省值: {} 不可以在运行期改变 EAS7.5+
可编辑表格的编辑模式配置。editModelOptions中包含两个属性，分别是target和actions.target指定新增和编辑时弹出的层，比如target:’#entry’.actions为浮动编辑的操作配置.actions的配置和setFloatActions方法中的配置一致。
宽高
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 String 缺省值: 150 EAS7.5+
可设置为数字和auto值,不能设置为百分比.动态改变表格的高度可以通过方法setGridHeight来设置.
shrinkToFit Boolean 缺省值: true EAS7.5+
定义初始化时候每列的宽度的算法。如果设置为true，表示每列的宽度按照所有列设定的宽度值的和与grid设定的宽度按比例进行缩放。如果设置为false，则列宽按照colModel中设定的宽度显示
forceFit Boolean 缺省值: true 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: 整个记录对象。
customSummaryType Function 缺省值: null EAS7.5+
自定义合计函数，该函数接收两个参数(cm,ret).cm为当前列的配置，ret为表格中当前列的数据数组。
summaryTpl String 缺省值: null EAS7.5+
在合计行上显示的合计信息
如果设置为true，则会在grid的底部，导航条之上显示一个只有一行的table。列的数量和colModel定义的数量一致。
全键盘配置
keyOptions Object 缺省值: {} EAS7.5+
1.addNewRowForLastCell:当这个值为false时，到表格的最后一个单元格后,不新增行。否则，新增一行
2.lastCellAction:如果默认最后一个单元格新增一行，如果不设置此值，新增行的操作为addRow，如果覆盖了这个值，则调用设置的这个参数，必须是一个函数。
3.horizontal:全键盘走向，默认是横向，如果设置为false，则按照竖向走动。
分页
表格是否包含分页栏
设置分页的模式，可选值包括block,more,scroll,traditional,virtual.
rowNum Integer 缺省值: 20 EAS7.5+
设置每一个grid的单页显示多少条记录。这个参数会通过url参数传递到服务器端进行分页处理。如果你设置了页面最多显示10条记录，也就是rowNum=10，但是服务器端返回了15条记录，页面上也只会显示10条记录。设置本值为-1表示页面显示记录没有限制。
设置分页栏出现的位置，可以设置为left,center,right,或者是指定外部的一个id选择器.默认为right,显示在分页栏的右边，如果设置为xx，则分页栏的位置会显示在id为xx的标签上
rowList Array 缺省值: [] EAS7.5+
本参数用来为grid生成一个可供选择的调整每页显示记录条数的下拉菜单。在grid中选择修改这个值，grid会用新的选择值来修改rowNum参数并传递到服务器端。可以设置的格式如[10,20,30]
page Integer 缺省值: 1 EAS7.5+
设置显示第几页
分页栏中出现的页码的个数，一般设置为奇数,只有在pagerModel为block时才生效
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的显示信息，则默认的分页元素会被冲掉。
显示
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等属性
多表头
useColSpanStyle Boolean 缺省值: false EAS7.5+
是否合并分组对应的列
startColumnName String 缺省值: null EAS7.5+
开始合并的列名。多表头包含的列必须在冻结的同一侧，即：多表头的列必须全部冻结或者全部不冻结。
numberOfColumns Integer 缺省值: null EAS7.5+
合并的列数，其中包括隐藏列。多表头包含的列必须在冻结的同一侧，即：多表头的列必须全部冻结或者全部不冻结。
titleText String 缺省值: null EAS7.5+
合并后的列的label
校验
validateOnSumbit Boolean 缺省值: false EAS7.5+
决定表格在提交时是否校验
表格列
name String 缺省值: null 不可以在运行期改变 EAS7.5+
必输项，表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid,cbandrn.列名不能是数字
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
editable Boolean 缺省值: true EAS7.5+
设置是否可编辑。
tagClass String 缺省值: “” EAS7.5+
给每个列设置class，这个class会增加到列对应的每个td上
对列进行格式化时设置的格式化类型。详细请查看格式化
对某些列进行格式化的选项设置
对列进行格式化时设置的函数
对列进行反格式化时设置的函数
edittype String 缺省值: null EAS8.2-
编辑器类型，可以新建一个编辑器，然后在这里设置新编辑器的类型。不再建议使用，建议直接在列上增加自定义字段，可视化修改字段属性！
editoptions Object 缺省值: null EAS8.2-
编辑器选项，通用用于新编辑器的选项，需要外部传递的参数在这里设置。不再建议使用，建议直接在列上增加自定义字段，可视化修改字段属性！
方法说明
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: 表格配置项
- 返回值说明: 无
清除当前装载的数据，如果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 参数: (无) 返回值类型: (String) EAS7.5+
返回选中的所有行id，单选和多选都适用 [参考样例]
getRowCount 参数: (无) 返回值类型: (Integer) EAS7.5+
返回总记录数 [参考样例]
返回当前页记录数,一般来说他和rowNum应该是相等的，但是如果删除了记录之后，可能就不相等了，此方法取得是真正存在的记录数。 [参考样例]
getChangedRows 参数: (无) 返回值类型: (Object) EAS7.5+
返回可编辑表格修改值对应的行和删除值对应的行。 [参考样例]
lockRow 参数: (rowid) 返回值类型: (Object) EAS7.5+
锁定行。 [参考样例]
- 参数说明:
- rowid: 行id
- 返回值说明: 无
unLockRow 参数: (rowid) 返回值类型: (Object) EAS7.5+
解锁行。 [参考样例]
- 参数说明:
- rowid: 行id
- 返回值说明: 无
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: 列名
- 返回值说明: 无
设置某个列的风格。 [参考样例]
- 参数说明:
- colName: 列名
- style: css样式
- footer: 页脚是否同样设置
- callback:回调函数,回调函数的参数为: rowId,colId,colModel,回调函数可以返回新的style
- 返回值说明: 无
lockColumn 参数: (colName) 返回值类型: (undefined) EAS7.5+
将某个列锁定，不能编辑。 [参考样例]
- 参数说明:
- colName: 列名
- 返回值说明: 无
unLockColumn 参数: (colName) 返回值类型: (undefined) EAS7.5+
将某个列解除锁定，使其可以编辑。 [参考样例]
- 参数说明:
- colName: 列名
- 返回值说明: 无
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
- 返回值说明: 无
getCurrentEditCellXY 参数: (无) 返回值类型: (Object) EAS7.5+
此方法可以返回正在编辑的行与列索引 [参考样例]
getCellConfig 参数: (colName,rowId) 返回值类型: (Object) EAS7.5+
返回单元格的配置信息,如果动态改变过单元格的配置信息，则返回动态改变后的，否则返回初始化时在列上配置的信息 [参考样例]
- 参数说明:
- colName: 列名
- rowId: 行id
- 返回值说明: 无
changeCellConfig 参数: (rowId,colName,config) 返回值类型: (undefined) EAS7.5+
通过此方法可以批量更改cell的配置信息。可更改的单元格的配置信息，包括: editable–是否可编辑editoptions–编辑框选项edittype–编辑器类型formatter–格式化类型formatoptions–格式化类型配置项 [参考样例]
- 参数说明:
- rowId: 行id
- colName: 列名
- config: 需要更改的对象集合
- 返回值说明: 无
setCellEditorAllConfig 参数: (colName,propName,value,tagType,rowId) 返回值类型: (undefined) EAS7.5+
设置单元格编辑框的相关属性信息，比如可以动态的通过此方法来更改f7的filteritem或者query等属性值。具体可参考: 可编辑表格相关控制 [参考样例]
- 参数说明:
- colName: 列名
- propName: 属性名，这里的属性和各个编辑控件TAG中的属性保持一致
- value: 属性值
- tagType: 对应JSP中当前列包含的编辑控件的tag类别，上面的列中包含了三个tag标签，分别为promptBox，promptGrid和validator，因此，tagType为promptBox，promptGrid和validator中的一个.
- rowId: 行id，默认不传递rowId。如果rowId为空，则更新绑定在整个列上的编辑器的属性。如果rowId不为空，则只设置当前单元格的编辑器信息。
- 返回值说明: 无
lockCell 参数: (rowid,colName) 返回值类型: (undefined) EAS7.5+
锁定单元格，使其不能编辑。 [参考样例]
- 参数说明:
- rowid: 行id
- colName: 列名称
- 返回值说明: 无
unLockCell 参数: (rowid,colName) 返回值类型: (undefined) EAS7.5+
解锁单元格，使其可以编辑。 [参考样例]
- 参数说明:
- rowid: 行id
- colName: 列名称
- 返回值说明: 无
在调用表格的校验后，可以通过此方法获取单元格值不符合要求的单元格集合。 [参考样例]
getChangedCells 参数: (无) 返回值类型: (Array) EAS7.5+
获取改动过的单元格。 [参考样例]
设置多表头. [参考样例]
- 参数说明:
- o: 配置对象{useColSpanStyle:false,groupHeaders:[]}。
- 返回值说明: 无
销毁多表头. [参考样例]
得到多表头的配置. [参考样例]
设置多表头相关属性
- 参数说明:
- index: 可以以多个表头进行分组，标示更改哪一个
- propName: 属性名
- value: 属性值
- 返回值说明: 无
得到多表头的配置值
- 参数说明:
- propName: 属性值。
- 返回值说明: 无
设置表格footer的数据 [参考样例]
- 参数说明:
- data: JSON数据。
- isFormat: 是否格式化
- server: 是否服务端合计。
- 返回值说明: 无
返回表格行的footer数据 [参考样例]
- 参数说明:
- isFormat: 是否反格式化
- server: 是否服务端合计。
- 返回值说明: 无
调用此方法来自动计算表格的合计相关设置 [参考样例]
- 参数说明:
- p: p为一个JSON对象，包括三个部分。1.isFormat是否按照列的设置来格式化，默认为true。2.colName–列名，单独对某列进行合计。3.datas–合计的数据来源，为数组。如果不设置此属性，从当前表格中获取数据来合计。
- 返回值说明: 无
根据参数创建分页栏,options类似于{rowList:[5,10,20,40,50],rowNum:5}
- 参数说明:
- options: JSON对象。
- loaddata: 是否装载数据,默认重新刷新数据。
- 返回值说明: 无
删除分页栏
设置分页栏属性
- 参数说明:
- propName: 属性名，可以为对象
- value: 属性值
- loaddata: 是否装载数据，默认装载
- 返回值说明: 无
返回分页属性值
- 参数说明:
- propName: 属性名。
- 返回值说明: 无
removeAllFloatActions 参数: (无) 返回值类型: (undefined) EAS7.5+
删除浮动栏上的所有action，一般如果想自定义浮动栏的action可以这样做。 [参考样例]
setFloatActions 参数: (actions) 返回值类型: (undefined) EAS7.5+
设置浮动栏的action列表 [参考样例]
- 参数说明:
- actions:数组，数组中的每个对象可以包含三个属性，比如。add:(必填),为action对应的名称，会作为action的class存在.客户程序中可以通过这个选择器来查找对应的元素，比如:overlay.find(“.actions.add”),默认提供了add,edit,remove，可以自定义按钮的名字。add的值为true或者false，如果设置会false，会将对应的action删除掉。定义为true，会增加相应的action.elem:(可选),可以使用当前的elem来替换默认的结构。onclick:(可选),可以使用当前的onclick来替换默认的事件。
- 返回值说明: 无
事件说明
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创建后触发，此时并没有请求数据。
beforeReloadGrid 参数: (table) EAS7.5+
重新刷新表格前触发。
ondblClickRow 参数: (rowid,iRow,iCol,e) EAS7.5+
双击行时触发。 [参考样例]
- 参数说明:
- rowid: 行id
- iRow: row对应的index
- iCol: cell的index
- e: 事件对象event
在点击了分页按钮并且组装数据之前触发，或者也在输入了页码并且回车时触发。 [参考样例]
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: 事件对象
在编辑之前格式化单元格的值，格式化后的值会传递到编辑控件中. [参考样例]
- 参数说明:
- rowid: 行id
- cellname: 在colModel中的位置
- value: cell的值
- iRow: 行的index
- iCol: 列的index
beforeEditCell 参数: (rowid,cellname,value,iRow,iCol,rowdata) EAS7.5+
在编辑单元格之前触发.具体可参考可编辑表格相关控制 [参考样例]
- 参数说明:
- rowid: 行id
- cellname: 在colModel中的位置
- value: cell的值
- iRow: 行的index
- iCol: 列的index
- rowdata: 整个行的值对象
afterEditCell 参数: (rowid,cellname,value,iRow,iCol) EAS7.5+
在单元格被编辑之后触发，也就是在元素被插入到DOM中之后. [参考样例]
- 参数说明:
- rowid: 行id
- cellname: 在colModel中的值
- value: cell的值
- iRow: 行的index
- iCol: 列的index
beforeSaveCell 参数: (rowid,cellname,value,iRow,iCol) EAS7.5+
在被保存之前触发，这个函数可以返回新的值来代替正在编辑的值,此事件只要在单元格的值已经发生变化时才出发。 [参考样例]
- 参数说明:
- rowid: 行id
- cellname: 在colModel中的位置
- value: cell的值
- iRow: 行的index
- iCol: 列的index
afterSaveCell 参数: (rowid,cellname,value,iRow,iCol,oldValue) EAS7.5+
在cell被成功的保存之后触发，通常在这个地方来改变保存的值，或者在这里计算另外一个单元格的值，比如可以在这里更改f7的过滤条件filteritem.,此事件只要在单元格的值已经发生变化时才出发。 [参考样例]
- 参数说明:
- rowid: 行id
- cellname: 在colModel中的位置
- value: cell的值
- iRow: 行的index
- iCol: 列的index
- oldValue: 单元格修改之前的值
afterRestoreCell 参数: (rowid,value,iRow,iCol) EAS7.5+
在调用restoreCell方法之后触发或者使用ESC键取消了编辑状态. [参考样例]
- 参数说明:
- rowid: 行id
- value: cell的值
- iRow: 行的index
- iCol: 列的index
样例集合
- 单元格编辑模式
- 浮动编辑模式
- 自定义编辑模式
- 方法事件及全键盘
- 可编辑表格格式化
- 带校验单元格编辑
- 自定义表格编辑器
- 动态更新列编辑器
- 动态更新单元格编辑器
- 可编辑表格其他控制
- 可编辑表格冻结
- 可编辑表格合计行
- 财务表格