应用场景
- 将下拉选项显示为表单提交按钮
使用前
使用后
样例代码
按钮显示选项值
按钮显示选项值
<script type="text/javascript"> var selectBoxName = "status";//根据下拉选项字段id替换“status”。下拉选项在子表单中时,请用审查元素方式获取元素name值 $(function(){ $(FormUtil.getField(selectBoxName)).parent().hide(); $(FormUtil.getField(selectBoxName)).children().each(function(){ if($(this).attr("value") != ""){ var cssClass = $(".form-button:last").attr("class"); var button = "<div type=\"button\" class=\"form-cell\"><button class=\"" + cssClass + "\" onclick=\"completeWithVariable($(this));return false;\" value=\"" + $(this).attr("value") + "\">" + $(this).attr("value") + "</button></div>"; $(".form-button:last").after(button); } }); }); function completeWithVariable(obj){ $(FormUtil.getField(selectBoxName)).val($(obj).val()); $("#assignmentComplete").trigger("click"); } </script> <style type="text/css"> input#assignmentComplete{ display: none; } </style>
按钮显示选项标签
按钮显示选项标签
<script type="text/javascript"> var selectBoxName = "status";//根据下拉选项字段id替换“status”。下拉选项在子表单中时,请用审查元素方式获取元素name值 $(function() { $(FormUtil.getField(selectBoxName)).parent().hide(); $(FormUtil.getField(selectBoxName)).children().each(function() { if ($(this).attr("value") != "" && $(this).text() != "") { var cssClass = $(".form-button:last").attr("class"); var button = "<div type=\"button\" class=\"form-cell\"><button class=\"" + cssClass + "\" onclick=\"completeWithVariable($(this));return false;\" value=\"" + $(this).attr("value") + "\">" + $(this).text() + "</button></div>"; $(".form-button:last").after(button); } }); }); function completeWithVariable(obj) { $(FormUtil.getField(selectBoxName)).val($(obj).val()); $("#assignmentComplete").trigger("click"); } </script> <style type="text/css"> input#assignmentComplete { display: none; } </style>
按钮控制section以弹出框显示
比如要实现:点击Approved时直接提交,点击Rejected时弹出section2,点击Clarification Required时弹出section3
首先在表单上设置section2和section3的可见性由下拉选项值控制
然后在custom html定义:
<div id="dialog" title="" style="display:none;"> </div> <script type="text/javascript"> var selectBoxName = "status";//下拉选项id var actionSections = {//选项值对应的section "Rejected" : "#section2", "Clarification Required" : "#section3" }; $(function(){ $(FormUtil.getField(selectBoxName)).parent().hide();//隐藏下拉选项所在section $(FormUtil.getField(selectBoxName)).children().each(function(){//遍历下拉选项,渲染为按钮放在表单底部,在点击时调用completeWithVariable方法 if($(this).attr("value") != ""){ var cssClass = $(".form-button:last").attr("class"); var button = "<div class=\"form-cell\"><button class=\"" + cssClass + "\" onclick=\"completeWithVariable($(this));return false;\" value=\"" + $(this).attr("value") + "\">" + $(this).attr("value") + "</button></div>"; $(".form-button:last").after(button); } }); for(var prop in actionSections){// if ($(actionSections[prop]).find(".form-error-message").length > 0) {//如果section的字段未通过校验,提交后再次弹出该section completeWithVariable(FormUtil.getField(selectBoxName)); } else {//隐藏下拉选项控制的section $(actionSections[prop]).hide(); } } }); function completeWithVariable(obj){//响应按钮点击 if (actionSections[$(obj).val()] !== undefined) {//如果选项值有对应section的处理 $(FormUtil.getField(selectBoxName)).val($(obj).val()).trigger("change"); $( "#dialog" ).attr("title", $(obj).val()); var section = $(actionSections[$(obj).val()]); $( "#dialog" ).append(section);//将选项值对应的section放入弹出框 $( "#dialog" ).find("label.label").attr("style", "text-align:left;color:#000;"); $( "#dialog" ).dialog({//配置弹出框并显示 resizable: false, height: "auto", width: 600, modal: true, open: function () {//弹出框初始化,对富文本编辑器重新渲染 //fix for rich text try { $(section).find("textarea.tinymce").each(function(){ tinyMCE.get($(this).attr("id")).remove(); $(this).richtext({mode : '', height : '200'}); }); } catch (err) {} $(section).show(); }, buttons: { "Submit": function() {//点击弹出框的"提交"处理 $(section).hide(); $(".form-container").append(section);//将选项值对应的section放回表单中 //fix for rich text对富文本编辑器重新渲染 $(section).find("textarea.tinymce").each(function(){ tinyMCE.get($(this).attr("id")).remove(); $(this).richtext({mode : '', height : '200'}); }); $("#assignmentComplete").trigger("click");//触发流程完成按钮点击事件 $( this ).dialog( "close" );//关闭弹出框 }, Cancel: function() {//点击弹出框的"取消"处理 $(section).hide(); $(".form-container").append(section); $( this ).dialog( "close" ); } } }); setTimeout(function(){$.unblockUI();}, 20); } else {//如果选项值没有对应的section则直接触发流程完成按钮点击事件 $(FormUtil.getField(selectBoxName)).val($(obj).val()); $("#assignmentComplete").trigger("click"); } } </script> <style type="text/css"> //隐藏流程完成按钮 input#assignmentComplete{ display: none; } </style>
点击后弹窗样例应用: APP_5776_reject_button_section_popup-validation.jwa