电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 用 Struts 实现动态单选按钮更新 [打印本页]

作者: look_w 时间: 2018-7-16 11:42 标题: 用 Struts 实现动态单选按钮更新

第 3 步. 创建单选按钮 JSP清单 3 包含表单页面的 JSP 代码，表单页面中包含单选按钮和预选的值。请注意 Java 文件和逻辑、HTML、bean 标记与表单底部的 JavaScript 函数之间的关系。我对 mountains 集合进行迭代，以创建单选按钮。这个工作完成之后，我添加 JavaScript 并将 selectedMountain 的值填充到其中，并与单选按钮数组进行比较，以选择正确的按钮。
清单 3. 包含单选按钮和预选值的 JSP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<html:html locale="true">
<head>
      <title><bean:message key="testForm.title"/></title>
      <html:base/>
</head>
<body>
<h3><bean:message key="testForm.heading"/></h3>
<html:form action="/FormAction" name="testForm"
         type="com.strutsrecipes.RadioTestForm">
      <h4><bean:message key="testForm.instruction"/></h4>

      
      <bean:define id="selectedRadio" property="selectedMountain" name="testForm"/>
      
      <logic:iterate id="mountain" property="mountains" name="testForm">
         <%-- you need this hack to get the value of the mountains to the page --%>
         <bean:define id="mountainValue">
                        <bean:write name="mountain"/>
         </bean:define>
         <html:radio property="selectedMountain"
                     value="<%=mountainValue%>"
                     styleId="<%=mountainValue%>"/>
         <bean:write name="mountain"/><br/>
      </logic:iterate><br/>

      <html:submit/>    <html:reset/>
      <script type="text/javascript">
         
      </script>
</html:form>
</body>
</html:html>

第 4 步. 创建显示页面显示页面基本与复选框诀窍中使用的页面相同，区别只是不需要迭代，因为只选中了一个值。需要做的只是列出 bean 中选中的 mountain，如清单 4 所示：
清单 4. 显示页面的 JSP

1
2
3
4
5
6
7

<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%>
<%-- html code, etc... --%>
<bean:write name="mountain"/><br/>
<hr size=5 color="black"/>
<%-- some more html code, etc... --%>

第 5 步. 编写 Action 类正像我在提到过的，Action 类比起这个诀窍中的其他组件来说，做的工作并不多。在这里要做的仅仅是得到 String 数组和 selectedMountain 的值，并让显示页面能够使用它们。
清单 5. Action 类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

ipackage com.strutsrecipes;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* The Action for the Radio Button test
*/
public final class RadioTestAction extends Action {
// -------------------------- OTHER METHODS --------------------------
/**
   * The Action for the Radio Button test
   */
public ActionForward execute(ActionMapping mapping,
   ActionForm form, HttpServletRequest request, HttpServletResponse response
                              )
      throws ServletException, Exception {
      // Extract attributes needed
      String selectedMountains = ((RadioTestForm) form).getSelectedMountain();
      System.out.println("htmlString RETURNED*********\n" + selectedMountains);
      //Save your htmlString in the session
      HttpSession session = request.getSession();
      session.setAttribute(Constants.MOUNTAINS, selectedMountains);
      return (mapping.findForward("success"));
}
}

诀窍内部诀窍背后真正起作用的是 JavaScript。首先，我在清单 5 中，为 JSP 表单内的 selectedMountain 字段定义了一个 JSP 脚本变量，如下所示：

1	<bean:define id="selectedRadio" property="selectedMountains" name="testForm"/>

在表单下面，我创建了一个 JavaScript 函数，包含以下两行：

1 2	var selRadio = document.getElementById("<bean:write name="selectedRadio"/>"); selRadio.checked=true;

在客户端脚本内部，我创建了 selRadio JavaScript 变量然后对文档内的所有元素进行查找（find），查找 id （或者预编译代码中的 styleId）与 selectedRadio 变量匹配的元素。我通过把 <html:radio/> 标记的 styleId 属性设置成与它的名称/值匹配来做到这点。在 JavaScript 函数迅速地在页面上的 ID 之间迭代的时候，只是把单一单选按钮设置为 selected。
替代方法用如下所示的 JavaScript 方法也能产生同样效果：

1
2
3

var selectedRadio =
document.forms["testForm"].elements["<bean:writename="selectedRadio"/>"];
selectedRadio.checked=true;

这个脚本只区分表单元素的 name 属性而不是 id 属性。两种实现都可以工作，所以具体选择哪一种取决于个人需要和偏好。JSP 表单页面的实际输出看起来像清单 6：
清单 6. JSP 表单页面的输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<input type="radio" name="selectedMountain" value="Everest" id="Everest"/>
Everest<br/>

<input type="radio" name="selectedMountain" value="K2" id="K2"/>
K2<br/>
<input type="radio" name="selectedMountain"
  value="Kangchenjunga" checked="checked" id="Kangchenjunga"/>
Kangchenjunga<br/>

<input type="radio" name="selectedMountain" value="Lhotse" id="Lhotse"/>
Lhotse<br/>

<input type="radio" name="selectedMountain" value="Makalu" id="Makalu"/>
Makalu<br/>

<input type="radio" name="selectedMountain" value="Cho Oyu" id="Cho Oyu"/>
Cho Oyu<br/>

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)