如何使用Dojo在Spring WebFlow项目中创建所需的复选框

时间:2012-10-12 17:11:12

标签: spring spring-mvc dojo spring-webflow

如何使用Dojo在Spring WebFlow项目中创建所需的复选框。我想知道如何在提交以下页面时复选框。如果用户没有单击其中一个复选框选项,我不希望提交工作。感谢。

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>



<style type="text/css" media="screen">
 @import url("<c:url value="/resources/dojo/resources/dojo.css"/>");
 @import url("<c:url value="/resources/dijit/themes/claro/claro.css"/>");
</style>     

<script djconfig="parseOnLoad: true"
 src="<c:url value="/resources/dojo/dojo.js"/>" type="text/javascript"></script>
<script type="text/javascript"
 src="<c:url value="/resources/spring/Spring.js" />"> </script>
<script type="text/javascript"
 src="<c:url value="/resources/spring/Spring-Dojo.js" />"></script>
<script type="text/javascript">dojo.require("dojo.parser");</script>

<html>
<head>
<title>Spring 3.0 MVC - Web Flow Example</title>
</head>
<body class="claro">
    <h2>CheckBox Test</h2>
    <p>
    <p>
    <form:form commandName="customer" id="customer">
        <input type="hidden" name="_flowExecutionKey"
            value="${flowExecutionKey}" />
        <div id="container">
            <table>
                <tr>
                    <td><font color=red><form:errors path="sex" /></font><b>Do you have a kid(s) of the follow sex type:</b></td>
                    <td><form:checkbox path="sex" id="sex" value="MALE" /> MALE |  
                        <form:checkbox path="sex" id="sex" value="FEMALE" />FEMALE
                        <script type="text/javascript">
                            dojo.query("#sex input[type='checkbox']").forEach(function(element){
                                Spring.addDecoration(new Spring.ElementDecoration({
                                    elementId: element.id,
                                    widgetType : "dijit.form.CheckBox",
                                    widgetAttrs : { checked : element.checked, required : true,
                                        validate: function (){
                                               if(dojo.query("INPUT[type='checkbox']", 'customer').filter(function(n){return n.checked;}).length > 0){return true;} else {alert('choose a type');return false;}
                                          }
}
                                }));
                            });
                        </script>
                        </td></tr>
                        </table>
        </div>
        <p>
        <input type="submit" name="_eventId_submit" id="submit" value="Submit" />
        <input type="submit" name="_eventId_cancel" value="Cancel" />
        <p>
        <script type="text/javascript">
            Spring.addDecoration(new Spring.ValidateAllDecoration({
                elementId : 'submit',
                event : 'onclick'
            }));
        </script>
    </form:form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

让我猜一下:0或只有1个复选框真的有装饰。

这里有几件事:复选框不是单选按钮,你不应该这样使用它们。

每个checkox都需要不同的ID和路径,因为每个复选框都有不同的字段。

即使你设法做你想做的事,有人也可以检查男性和女性......

您可以使用带有form:checkbox的多个复选框,但它们会链接到数组或列表

验证函数的示例(如果它是您拥有的唯一复选框,否则查询类或类似的东西):

validate: function (){
           if(dojo.query("INPUT[type='checkbox']", 'customer').filter(function(n){return n.checked;}).length > 0){return true;} else {alert('choose a type');return false;}
      }