泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素地长度

《泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素地长度》由会员分享，可在线阅读，更多相关《泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素地长度（38页珍藏版）》请在装配图网上搜索。

1、word仅限阅读 请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单HTML设计器实现自定义控制表单元素的长度与其他常见需某某现案例文档主题(Title)【开发技巧】流程表单HTML扩展开发推荐：设计器实现设置表单元素的长度作者(Author)胡顺审批者(To Be Approved By)说明(ments)文件名称(File Name)【开发技巧】流程表单HTML扩展开发推荐：设计器实现设置表单元素的长度.doc序号日期版本变更说明修改人注释1.2017-12-19创建目录功能点X泰宏2.2018-2-1完善各模块内容胡顺3.4.目录1.说明62.准备工作73.实现自主设置

2、表单元素的长度73.1.支持PC端与手机端HMTL模式流程表单单个流程73.2.HMTL模式流程引入样式文件一劳永逸84.实现隐藏表单元素表单边框的需求114.1.代码块114.2.实现效果115.实现表单未输入内容时悬浮提醒的效果125.1.代码块125.2.实现效果136.实现提交时校验某某的需求156.1.代码块156.2.实现效果177.实现某个check框设置为必填的需求187.1.代码块188.html打印时解决签字意见多个空格问题198.1.代码块198.2.实现效果209.html同一节点多个签字节点排序。219.1.多个签字节点按时间先后正序排序219.2.多个签字节点按时间

3、先后倒序排序249.3. 实现效果2610.html签字节点格式调整2710.1. html签字节点格式调整为“内容居左，署名居右2710.2. 实现效果2811. html签字按时间排序并调整格式2911.1 按时间先后顺序排序并调整格式2911.2. 按时间先后倒序排序并调整格式301. 说明难度：预计时间：1小时涉与代码开发：有目标需求： 此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进展适当调整。l 可以按照客户要求对时间流程表单进展适当改造。流程表单上面布局、校验、样式等功能可以jQuery的方式进展适当改造。知识点：根本

4、信息： 背景知识：1、 在阅读本教程之前,需具备html和JavaScript根本知识。2、 在阅读本教程之前,需具备jsp页面读写的根本能力。最终效果：l 通过流程表单HTML设计器实现自定义控制表单元素的长度l 实现隐藏表单原始边框l 实现表单元素未输入内容时悬浮提醒的效果l html签字节点格式调整内容在左，署名在右l html签字节点按时间排序并调整格式2. 准备工作1、 准备一台和正式环境一致操作系统的服务器。3. 推荐实现自主设置表单元素的长度将附件提供的width.css上传到服务器的/css/width/目录下面。3.1. 支持PC端与手机端HMTL模式流程表单单个流程1. 在

5、代码块中单个流程引入css样式文件如如图1。图12. 在需要自主设置长度单元格式设置class 例如图2 里面 的class w50 表示设置这个框子里面的input长度为50px。如果设置为w100 如此限制长度为100px，具体效果如图3图2图33.2. HMTL模式流程引入样式文件一劳永逸1. 新建流程界面流程引入css样式文件 需要修改ecology/workflow/request/AddRequestIframe.jsp文件。如如图4。图42. 查看与处理流程界面流程引入css样式文件需要修改ecology/workflow/request/ManageRequestNoFormI

6、frame.jsp。如如图4。图53. 手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/client.jsp。如如图6。图64. 实现隐藏表单元素表单边框的需求4.1. 代码块.excelOuterTableinput,.excelOuterTableselect,.excelOuterTable .e8_innerShow,.excelOuterTable .e8_outScroll border: 0px !important; 4.2. 实现效果例：原生页面图7开发修改后：5. 实现表单未输入内容时悬浮提醒的效果此方法只适用于输入框提示。5.1

7、. 代码块$(document).ready(function()inputTipText(););function inputTipText() $(divclass*=holder input) .each(function() if($(this).val() = ) var oldVal=$(this).parent(.holder).attr(data-holder); if($(this).val()=)$(this).attr(value,oldVal).css(color:#888); $(this) .css(color:#888) .focus(function() if(

8、$(this).val()!=oldVal)$(this).css(color:#000)else$(this).val().css(color:#888) ) .blur(function() if($(this).val()=)$(this).val(oldVal).css(color:#888) ) .keydown(function()$(this).css(color:#000); ); 2. 在需要自主设置提示内容的单元格设置class名为holder如果属性名称class已经存在，需在原有名称后空格后添加holder，以与设置自定义属性为提示内容data-holder的值，例如图

9、8 里面 的class w50 表示设置这个输入框的提示内容为“请输入标题， 如图8。注： class名为holder，自定义属性名为data-holder，不可更改。具体效果如图9图85.2. 实现效果例：原生界面开发修改后：图96. 实现提交时校验某某的需求6.1. 代码块jQuery(document).ready(function() checkCustomize = function() var issubmit=false; var card=jQuery(#field11365).val(); issubmit = IdentityCodeValid(card); return

10、issubmit; ;);function IdentityCodeValid(code) var city=11:,12:某某,13:某某,14:某某,15:某某,21:某某,22:某某,23:某某 ,31:某某,32:某某,33:某某,34:某某,35:某某,36:某某,37:某某,41:某某,42:某某 ,43:某某,44:某某,45:某某,46:某某,50:某某,51:某某,52:某某,53:某某,54:某某 ,61:某某,62:某某,63:某某,64:某某,65:某某,71:某某,81:某某,82:澳门,91:国外 ; var tip = ; var pass= true; if(!

11、code | !/d6(18|19|20)?d2(01-9|112)(01-9|12d|301)d3(d|X)$/i.test(code) tip = 某某号格式错误; pass = false; else if(!citycode.substr(0,2) tip = 地址编码错误; pass = false; else /18位某某需要验证最后一位校验位 if(code.length = 18) code = code.split(); /(aiWi)(mod 11) /加权因子 var factor = 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,

12、 8, 4, 2 ; /校验位 var parity = 1, 0, X, 9, 8, 7, 6, 5, 4, 3, 2 ; var sum = 0; var ai = 0; var wi = 0; for (var i = 0; i 17; i+) ai = codei; wi = factori; sum += ai * wi; var last = paritysum % 11; if(paritysum % 11 != code17) tip = 某某校验位错误; pass =false; if(!pass) window.top.Dialog.alert(提醒：+tip+!); re

13、turn pass; 6.2. 实现效果7. 实现某个check框设置为必填的需求7.1. 代码块jQuery(document).ready(function() checkCustomize = function() var issubmit=false; if(jQuery(#field11359).attr(checked) window.top.Dialog.alert(提醒：选择框已经选中!); issubmit=true; else window.top.Dialog.alert(提醒：选择框未选择!); return issubmit; );8. html打印时解决签字意见多个

14、空格问题8.1. 代码块将以下代码块放在ecologyworkflowrequestPrintRequest.jsp文件中，如如下图：jQuery(document).ready(function() jQuery(.span_mc).each(function() var a=jQuery.trim(jQuery(this).html(); /console.log(=+a);if(=a) $(this).remove(); /删除全部br jQuery(.span_mc).next(br).remove(); /删除空签字意见的下一个br / jQuery(.span_mc).parent

15、().find(br).remove();); );8.2. 实现效果例：原生界面删除空的签字意见和一个换行符删除空的签字意见和全部换行符9. 推荐多内容区域多节点签字意见排序9.1. 多个签字节点按时间先后正序排序1. 将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp已办和ecologyworkflowrequest WorkflowManageRequestHtml.jsp待办，文件中，如如下图：.excelTempDiv .td_edesign .remark display: none; .excelTempDiv .td_edes

16、ign .span_mc display: block !important; .excelTempDiv .td_edesign .span_mc span display: block; $(document).ready(function() onSortDesc(); ); var onSortDesc = function() var ul = jQuery(.remark); for(var i = 0; i ul.length; i+) var lis = jQuery(.remark:eq( + i + ).children(.span_mc); var ux = ; for(

17、var j = 0; j lis.length; j+) var tmp = ; tmp.dom = lisj; var remindTime = lisj.innerHTML.substring(lisj.innerHTML.length - 20); var str = remindTime.toString(); tmp.date = new Date(str.replace(/-/g, /); ux.push(tmp); ux.sort(function(a, b) return a.date - b.date; ); for(var g = 0; g ux.length; g+) u

18、li.appendChild(uxg.dom); jQuery(.remark).find(br).remove(); jQuery(.remark).show(); 2. 在需要自主设置排序的单元格设置class名为remark如果属性名称class已经存在，需在原有名称后空格后添加remark 。注： class名为remark，不可更改。具体效果如如下图：9.2. 多个签字节点按时间先后倒序排序1. 将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp已办和ecologyworkflowrequest WorkflowManageRequ

19、estHtml.jsp待办文件中，如如下图：.excelTempDiv .td_edesign .remark display: none; .excelTempDiv .td_edesign .span_mc display: block !important; .excelTempDiv .td_edesign .span_mc span display: block; $(document).ready(function() onSortDesc(); ); var onSortDesc = function() var ul = jQuery(.remark); for(var i =

20、 0; i ul.length; i+) var lis = jQuery(.remark:eq( + i + ).children(.span_mc); var ux = ; for(var j = 0; j lis.length; j+) var tmp = ; tmp.dom = lisj; var remindTime = lisj.innerHTML.substring(lisj.innerHTML.length - 20); var str = remindTime.toString(); tmp.date = new Date(str.replace(/-/g, /); ux.p

21、ush(tmp); ux.sort(function(a, b) return b.date - a.date; ); for(var g = 0; g ux.length; g+) uli.appendChild(uxg.dom); jQuery(.remark).find(br).remove(); jQuery(.remark).show(); 图22在需要自主设置排序的单元格设置class名为remark如果属性名称class已经存在，需在原有名称后空格后添加remark 。注： class名为remark，不可更改。具体效果如如下图：9.3. 实现效果按时间先后顺序排序，如如下图10

22、. 推荐html表单签字节点格式调整10.1. html签字节点格式调整为“内容居左，署名居右以下调整的格式为：内容在居左，署名居右：将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp已办和ecologyworkflowrequest WorkflowManageRequestHtml.jsp待办 、ecologyworkflowrequestPrintRequest.jsp打印，文件中可根据需求只添加其中某一文件代码如如下图：.excelTempDiv .td_edesign .span_mc display: block !importa

23、nt;text-align: right;.excelTempDiv .td_edesign .span_mc span:first-child display: block;text-align: left;.excelTempDiv .td_edesign .span_mc img:first-child display: block;text-align: left;max-height: 100px;$(document).ready(function() /删除所有的换行 jQuery(.remark).parent().find(br).remove(); );10.2. 实现效果

24、原生界面:修改后：内容居左，署名居右；11. 多内容区域签字签字意见按时间排序11.1. 按时间先后顺序排序并调整格式将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp已办和ecologyworkflowrequest WorkflowManageRequestHtml.jsp待办，文件中.excelTempDiv .td_edesign .remark display: none; /*排序前隐藏内容*/.excelTempDiv .td_edesign .span_mc display: block !important;text-ali

25、gn: right;.excelTempDiv .td_edesign .span_mc span display: block;text-align: left;$(document).ready(function() onSortDesc(); ); var onSortDesc = function() var ul = jQuery(.remark); for(var i = 0; i ul.length; i+) var lis = jQuery(.remark:eq( + i + ).children(.span_mc); var ux = ; for(var j = 0; j l

26、is.length; j+) var tmp = ; tmp.dom = lisj; var remindTime = lisj.innerHTML.substring(lisj.innerHTML.length - 20); var str = remindTime.toString(); tmp.date = new Date(str.replace(/-/g, /); ux.push(tmp); ux.sort(function(a, b) return a.date - b.date; ); for(var g = 0; g ux.length; g+) uli.appendChild

27、(uxg.dom); jQuery(.remark).find(br).remove(); jQuery(.remark).show(); 效果如下：11.2. 按时间先后倒序排序并调整格式将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp已办和ecologyworkflowrequest WorkflowManageRequestHtml.jsp待办，文件中.excelTempDiv .td_edesign .remark display: none; /*排序前隐藏内容*/.excelTempDiv .td_edesign .span_m

28、c display: block !important;text-align: right;.excelTempDiv .td_edesign .span_mc span display: block;text-align: left;$(document).ready(function() onSortDesc(); ); var onSortDesc = function() var ul = jQuery(.remark); for(var i = 0; i ul.length; i+) var lis = jQuery(.remark:eq( + i + ).children(.spa

29、n_mc); var ux = ; for(var j = 0; j lis.length; j+) var tmp = ; tmp.dom = lisj; var remindTime = lisj.innerHTML.substring(lisj.innerHTML.length - 20); var str = remindTime.toString(); tmp.date = new Date(str.replace(/-/g, /); ux.push(tmp); ux.sort(function(a, b) return b.date - a.date; ); for(var g = 0; g ux.length; g+) uli.appendChild(uxg.dom); jQuery(.remark).find(br).remove(); jQuery(.remark).show(); 11.3 实现效果效果如下：文案大全