应用场景

  • 将下拉选项显示为表单提交按钮

使用前

使用后

样例代码

按钮显示选项值

按钮显示选项值
<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

官方参考

  • No labels