WAFII控件样例演示

演示功能说明

本例演示了单元格格式化的相关内容，通过格式化，可以使得表格显示各种各样的内容，使得表格的显示更加丰富。格式化包括正向格式化和反向格式化。正向格式化的意思是将装载的真实值(一般为绑定的model值或者query中值)格式化为需要显示的值，反格式化的意思是将显示的值反格式化为真正的值，一般表格如果需要提交或者需要调用getRowRealData,getCell等方法时，必须写对应的反格式化函数，如果表格仅仅为了展示，可以只写格式化函数。实现格式化需要通过两种方式：

1.第一种方式：设置列的formatter和formatoptions，formatter为一个字符串，在表格内部对应一个格式化类，在需要格式化时会调用。formatoptions可以做具体的格式化配置，为一个对象，可以放任意值，根据formatter的不同而不同。比如：formatter="date" formatoptions="{srcformat:'Y-m-d',newformat:'d/m/Y'}",格式化类为date，格式化选项的意思是将日期从y-m-d格式化为d/m/y. 表格内置了部分格式化类，可参考内置的格式化类
2.第二种方式：设置列的customformatter和customunformatter，这两个属性的值都是函数，customformatter为正向格式化函数，customunformatter为反向格式化函数，函数的具体用法可以参考格式化函数说明

内置的格式化类

类型(formatter)	配置(formatoptions)	说明
默认支持的formater在下表中,一般用于显示表格中，也可以用于可编辑表格中，但要求可编辑表格对应的列不能编辑。
integer	thousandsSeparator,defaulValue	thousandsSeparator决定了千分位的符号，一般为逗号。如果数据为空，则显示缺省值
number	decimalSeparator,thousandsSeparator,decimalPlaces,defaulValue	thousandsSeparator决定了千分位的符号，一般为逗号。decimalSeparator决定小数分隔符,decimalPlaces决定有多少小数位. 如果当前数据为空，则显示defaultValue.
currency	decimalSeparator,thousandsSeparator,decimalPlaces,defaulValue,prefix,suffix	thousandsSeparator决定了千分位的符号，一般为逗号。decimalSeparator决定小数分隔符,decimalPlaces决定有多少小数位，如果数据为空，则显示defaultValue. prefix,suffix标示要加入到数字前面或者后面的符号
date	srcformat,newformat	srcformat指的是源格式化，newformat目标格式化.
checkbox	disabled,value	disabled指的是是否可勾选checkbox，默认为true，不可勾选。value为checkbox对应真实值列表，以:分割，默认为1:0 比如： formatter="checkbox" formatoptions="{disabled:false,value:'Yes:No'}"
email	none	自动增加mailto:到email.
showlink	baseLinkUrl,addParam,target,idName,onclick	baseLinkUrl是链接的URL.addParam额外的参数。target链接打开的地方。idName是增加到链接的第一个参数。onclick为点击链接时的处理函数，onclick为函数名，使用单引号括起来。此函数接收4个参数，分别是rowId,gridid,addParam,pos
wafcheckbox	value,defaultValue	value是个对象，指定根据当前列的值格式化为什么内容，默认格式化为是和否。当然也可以指定，比如：formatoptions="{value:{'1':'网络','0':'报纸'}}",可以指定一组值。 defaultValue是指未选中情况下的默认值，系统内置默认为0;
wafenum	enumSource	下拉框的格式化，enumSource为数组，包括选项的别名，值等。例如：formatoptions="{enumSource:[{'alias':'未提交','value':0},{'alias':'未审批','value':1},{'alias':'审批中','value':2},{'alias':'审批通过','value':3},{'alias':'审批不通过','value':4}]}"
f7	displayFormat	f7要格式化显示的内容，默认显示那么，自定义如下：formatoptions="{displayFormat:'{name}-{country}'}"

自定义格式化类和自定义格式化函数

自定义格式化器有两种方式，第一种是使用函数，customformatter和customunformatter。第二种是自定义一种新的格式化类。一般来说，如果需要在多个页面格式化相同的内容，就采用第二种方式，自定义格式化类，从而可以在多个地方引用。

1. 第一种方式：自定义格式化函数示例代码：

自定义函数格式化国家图片

/**
* 根据国家的不同，格式化不同的图片
* @param cellvalue  国家单元格的值
* @param options    列的相关配置
* @param rowObject  行对象值
 */
function countryFormatter(cellvalue, options, rowObject){
     if(cellvalue === "Japan"){
          return "<img src='<%=request.getContextPath()%>/demo/images/japan.png' 
                           realValue='"+cellvalue+"'/>"
     }else if(cellvalue === "America"){
          return "<img src='<%=request.getContextPath()%>/demo/images/america.png' 
                           realValue='"+cellvalue+"'/>"
     }else{
          return "<img src='<%=request.getContextPath()%>/demo/images/china.png' 
                           realValue='"+cellvalue+"'/>"
     }
}
/**
* 根据显示图片的不同，返回真正的单元格值
* @param cellvalue  格式化后单元格的值
* @param options    列的相关配置
* @param cell       单元格对象
 */
function countryUnFormatter(cellvalue, options,cell){
     return waf("img",cell).attr("realValue");
}

API说明：

customformatter回调函数 参数:(cellvalue,options,rowObject)

cellvalue : 被格式化的值,一般为绑定的值或者model中的值，真实的值，从后台返回的值。
options : 配置参数，包括{ rowId: rid, colModel: cm}等。rowid为当前行id，colModel为列配置。
rowObject:当前行的数据对象，一般对应一条记录。
需要返回字符串，这个字符串会被加入到当前的单元格TD中

customunformatter回调函数 参数:(cellvalue,options,cellobject)

cellvalue: 需要反格式化的值，也是界面中显示的值.
options : 配置参数，包括{ rowId: rid, colModel: cm}等，rowid为当前行id，colModel为列配置。
cellobject:当前的单元格TD对象
需要返回单元格中真正的值，这个值通常会被提交到后台，或者被方法getRowData和getCell调用后使用。

2. 第二种方式：自定义格式化类示例代码

自定义格式化类需要继承表格内置的格式化父类，类名为cellformatter.defaultFormatter.其中cellformatter为命名空间，defaultFormatter为格式化类名，需要调用waf.defineCustomeClass来定义新的格式化类。父类中提供了format和unformat两个方法，分别代表正向格式化化和反向格式化函数。
如下面的案例，其中，cellformatter.wafnewcheckbox为新的定义的类，命名空间cellformatter必须是固定的，wafnewcheckbox为新的类名，这个新的类名会被设置到列的formatter属性中。后面的cellformatter.defaultFormatter为继承的父类。如下面的案例：

自定义显示checkbox示例代码

/**
 * 自定义格式化类wafnewcheckbox
 * 格式化大数据为复选框,
 如果data大于100，则选中，否则不选中，只做演示案例，无具体业务含义。
 * 具体使用时，只需要将列的formatter设置为wafnewcheckbox即可。
 */
waf.defineCustomeClass("cellformatter.wafnewcheckbox", cellformatter.defaultFormatter, {
     format:function(cellval, rwd){
          var ret,data;
          data = parseInt(cellval);
          if(data>100){
               ret = "<input type='checkbox' checked='true' disabled='true' realValue='"+
                     data+"'/>";
          }else{
               ret = "<input type='checkbox' disabled='true' realValue='"+data+"'/>";
          }
          return ret;
     },
     unformat:function(cell, rowId){
          return waf("input",cell).attr("realValue");
     }
});

API说明：

父类中的属性说明 属性:(table,gid, opts)

table : 表格对象，在子类中可以使用this.table访问
gid : 表格id,在子类中可以使用this.gid访问
opts:参数，在子类中可以使用this.opts访问,opts中包含了rowid(行id)，colModel表格列对象配置等。

format函数 参数:(cellval, rwd)

cellvalue : 被格式化的值,一般为绑定的值或者model中的值，真实的值，从后台返回的值。
rwd:当前行的数据对象，一般对应一条记录。
需要返回字符串，这个字符串会被加入到当前的单元格TD中

unformat函数 参数:(cellobject，rowid)

rowid: 当前行id
cellobject:当前的单元格TD对象
需要返回单元格中真正的值，这个值通常会被提交到后台，或者被方法getRowData和getCell调用后使用。

表格列内嵌按钮或者菜单示例代码

内嵌linkbutton

<wafctrl:gridColumn label="Click操作" name="operatorColumn" width="120">
     <wafctrl:linkButton id="btnRowEdit"  onclick="test1"  caption="编辑"/>
     <wafctrl:linkButton id="btnRowRemove" onclick="test1" caption="删除"/>
     <wafctrl:linkButton id="btnRowAudit" onclick="test1" tagClass="ui-icon-edit"/>
</wafctrl:gridColumn>
<wafctrl:gridColumn label="Action绑定" name="operatorColumn2" width="80">
     <wafctrl:linkButton id="btnRowEdit2"  actionBinding="\{downViewAction}"
     caption="审核" iconCls="btn-edit"/>
</wafctrl:gridColumn>

内嵌menubutton

<wafctrl:gridColumn label="Menu" name="menuOperation" width="150">
     <wafctrl:menuButton id="mb_workflow" caption="工作流" menuWidth="150px">
          <wafctrl:menuItem caption="多级审批" iconCls="btn-dealmultilevelaudit"
                                onclick="show('多级审批')"/>
          <wafctrl:menuItem caption="流程图" iconCls="btn-flowchart"
                                onclick="show('流程图')"/>
          <wafctrl:menuItem caption="业务流程列表" iconCls="btn-view"
                                onclick="show('业务流程列表')"/>
          <wafctrl:hsplitButton/>
          <wafctrl:menuItem caption="下一步处理人" iconCls="btn-nextactor"
                                onclick="show('下一步处理人')"/>
          <wafctrl:menuItem caption="审批结果查看" iconCls="btn-multapproveresult"
                                onclick="show('审批结果查看')"/>
          <wafctrl:menuItem caption="传阅反馈查看" onclick="show('传阅反馈查看')"/>
          <wafctrl:hsplitButton/>
          <wafctrl:menuItem caption="发送工作流短信" iconCls="btn-sendmessage"
                                onclick="show('发送工作流短信')"/>
     </wafctrl:menuButton>
     <wafctrl:menuButton id="billtransfer" caption="单据转换" menuWidth="80px"
                              actionBinding="\{downViewAction}">
          <wafctrl:menuItem caption="上查" iconCls="btn-dealmultilevelaudit"
                                onclick="show('上查')"/>
          <wafctrl:menuItem caption="下查" iconCls="btn-flowchart" onclick="show('下查')"/>
     </wafctrl:menuButton>
</wafctrl:gridColumn>