京华ExOA协同系统(J2EE版)数据表格控件二次开发手册.doc

1 概述在现有的业务流程中，经常会遇到同一个表单申请多条记录的情况，由于现有产品表单的局限性，不能动态地添加多条业务记录，因此需要一个可以由用户自行添加记录的控件，方便记录数据。经过多次试验，数据表格控件是一个比较好的解决方案。图1 数据表格控件设置界面在数据表格控件中填写脚本函数与表单控件中的脚本函数有几个相同点和不同点1、相同点：表格控件中的脚本函数和表单控件中的脚本函数都是javaScript。2、不同点：两个表格控件生成的页面不同，表格控件的页面嵌套在表单控件的页面中。2 属性配置在表单设计的时候可以通过“嵌套JSP”控件拉出数据表格控件，并可以设置有什么列，设计列的内容和样式。列的设置包括列标识、列名称、数据类型、控制类型等。2.1 数据类型类型名称说明字符整型浮点型日期配合日期控件，返回格式”yyyy-MM-dd”2.2 控件类型控件名称说明文本框下拉选择需要设置备选内容日期控件数据类型必须为日期文本域可以输入多条记录自定义2.3 校验方法只需要在校验方法中填入校验方法名。自己写校验的方法，方法的参数为value,record,colObj,grid，如：校验输入值是否为百分数。function checkqz(value,record,colObj,grid) var content = value; var reg = /(100|1-9?d?(.d)?)%$/; if(reg.test(content) return true; else return 请输入正确格式,0-100以内数字+%，只保留一位小数; 2.4 渲染方法可以改变列表的格式，用法类似校验方法。2.5 备选内容当控件类型选择的是下拉框时，下拉框的内容由此确定格式为控件显示内容1:下拉显示内容1,控件显示内容2:下拉显示内容2。如：计薪:计薪,调休:调休3 脚本开发3.1 内置事件3.1.1 afterEdit( value, oldValue, record, col, grid)对单元格进行修改后，光标离开单元格时触发事件参数名称类型参数说明ValueAny新输入的值OldValueAny旧值RecordObject or array该操作所在行记录集合对象ColObject该操作所在列对象GridObject表格控件对象3.1.2 beforeEdit( value, record, col, grid) 在对单元格修改之前触发事件参数名称类型参数说明ValueAny新输入的值RecordObject or array该操作所在行记录集合对象ColObject该操作所在列对象GridObject表格控件对象3.1.3 beforeRowSelect( record, row, rowNo, grid) 在选中一行之前触发事件参数名称类型参数说明RecordObject or array获取该行记录rowObject获取该行对象rowNoNumber获取选择的行号Gridgrid表格控件对象3.1.4 beforeDelete(data, row, grid) 在删除一行之前触发事件参数名称类型参数说明daraRecord or Object数据记录rowObject行对象GridObject控件对象3.1.5 afterRowSelect(value, record, cell, row, colNo, columnObj, grid) 在选中一行后触发事件参数名称类型参数说明valueAny当前值recordObject or array行记录cellObject单元格对象rowObject行对象colNoNumber列序号columnObjObject列对象gridObject表格控件对象3.1.6 customRowAttribute(record, rowNo, grid) 修改行记录参数名称类型参数说明recordObject or array行记录rowNoNumber选中的行数gridObject表格控件对象3.1.7 onComplete( grid) 控件加载完成后触发事件参数名称类型参数说明gridObject表格控件对象3.1.8 onRowClick(value,record,cell,row, colNo, columnObj, grid) 点击行触发事件参数名称类型参数说明valueAny选择的当前值recordObject or array行记录cellObject单元格对象rowObject行对象colNoNumber所选列序号columnObjObject列对象gridObject表格控件对象3.1.9 onRowDblClick(value,record,cell,row,colNo,columnObj,grid)双击行触发事件参数名称类型参数说明valueAny选择的当前值recordObject or array行记录cellObject单元格对象rowObject行对象colNoNumber所选列序号columnObjObject列对象gridObject表格控件对象3.1.10 onInitGridOption(gridOption)初始化表格配置参数名称类型参数说明gridOptionObject初始化表格配置3.2 应用案例3.2.1 案例一：在某些步骤设置某些列只读案例场景：绩效考核表单使用了数据表格控件进行考核的录入，由于考核并不是一个步骤即可完成，因此出现了某些步骤的列只读的需求。如当部门领导评分后，流转回被考核人不能修改评分。解决方案：在某些步骤通过脚本控制控件的列显示属性，使得在该步骤下该列只读脚本实例：function onInitGridOption(gridOption) /*如果当前步骤是 开始步骤*/ var currActName = parent.getCurrWorkItemInfo(actName); if(currActName=开始) var colNames = wcjg,wwcyy,zgjh,zpf,bzpf,fgldpf.split(,); var iCount = colNames=null?0:colNames.length;for(var i=0;icolNames.length;i+)for(var iCol = 0;iColgridOption.columns.length;iCol+)if(gridOption.columnsiCol.id=colNamesi)/*设置列只读*/gridOption.columnsiCol.editable = false;gridOption.columnsiCol.editor = null; else if(currActName=申请人) var colNames = gzxm,khbf,qz.split(,); var iCount = colNames=null?0:colNames.length;for(var i=0;icolNames.length;i+)for(var iCol = 0;iCol5)alert(请假后五天内不补假单系统将不给予输入);record.jsrq = ;grid.refreshRow(grid.activeRow,grid.activeRecord);if(col.id=sjd)var sjd = record.sjd;var date1 = record.ksrq;var date2 = record.jsrq;var day = getDays(date1,date2);/*使用异步方式发送回后台通过java代码计算*/var hour ;if(sjd=整天)/*根据时间段算时数*/ hour = day*8;else hour = day*4;record.qjts = day;record.qjss = hour;grid.refreshRow(grid.activeRow,grid.activeRecord);if(col.id=qjts)/*根据自己输的天数计算出时数*/var sjd = record.sjd;var day = record.qjts;var hour ;if(sjd=整天) hour = day*8;else hour = day*4;record.qjts = day;record.qjss = hour;grid.refreshRow(grid.activeRow,grid.activeRecord);运行效果：图3-2 集团员工请假明细3.2.3 案例三：表单某些数据项是数据表格某些列合计的结果案例场景：绩效考核流程中，在最后考核总评出来时需要根据一定的规则得到总分，通过人工方式计算不专业也可能有错漏，因此，通过自动计算总分是很必要的。解决方案：获取控件中的值，将每行的权重值乘以分值然后将所有行加起来，得到总评分。脚本描述：function afterEdit(value,oldValue,record,col,grid)/*输入自评分后，系统马上计算总评分*/if(col.id=zpf)var zpfzf = 0;var records = getRecords();for(var i=0;irecords.length;i+)var rowRecord = recordsi;var qz = 0;var zpf = 0;if(rowRecord.qz!=null) /*得到权重值*/qz = rowRecord.qz;qz = qz.replace(%,);qz = qz/100;if(rowRecord.zpf!=null)zpf = rowRecord.zpf;zpfzf = zpfzf + qz*zpf; /*计算总分*/parent.setDsValueByDsName(自评总得分,zpfzf.toFixed(2),); /*将得分赋值到表单中*/*控制权重值的总和不能超过100%*/if(col.id=qz)var qzs = 0;var records = getRecords();for(var i=0;i1)alert(权重总数不得大于100%);record.qz = ;grid.refreshRow(grid.activeRow,grid.activeRecord);运行效果：图3-3 月度工作目标考核明细3.3 参考API4 其它4.1 表格控件的数据如何套到Word中在word套打模板中添加书签，书签名称应该为：”FNestJspCtrl_”+控件名称，即可将表格控件套到word实现套打。表单效果：图4-1 出差申请明细套打效果：图4-2 出差申请套打明细4.2 提供表单二次开发的函数4.2.1 getRecords()功能说明：获取数据表格的所有行的记录，返回一个数组常用场景：计算多条记录之间的总和或者检查多条记录间的关系应用例子：在流程发送之前，判断办公用品列表的是否已经填写内容。function docInst_OnBeforeSend(sendType,param1,param2,param3) var htmlId = getFormObjectIdByHTMLObjectName(办公用品);/*得到控件id*/ var dataGridObj = document.frames(FNestJspCtrl+htmlId);/*得到控件对象*/ var records = dataGridObj.getRecords(); if(records.length=0)/*或者判断哪条记录的必填项不能为空*/ alert(“请选择办公用品”); return false; 运行效果：图4-3 办公用品申请表4.2.2 insert(record,startEdit) 功能说明：插入一行记录常用场景：动态插入一条记录应用例子：在办公用品申请表中，选择一种办公用品然后将该办公用品的信息插入到数据表格中。function setConsumables(consumablesArray) var htmlId =