`
jwen
  • 浏览: 63207 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

html radio框

    博客分类:
  • java
阅读更多
在显示的明细一览,每一行前面加一个radio框,让用户选择哪个user.进行删除操作.
SampleJsp:
  <logic:present name="sampleForm" property="userList" >
  <logic:iterate id="user" name=" sampleForm " property="userList">
  <tr>
    <td>
  <html:radio name="sampleForm" property="selectedUserId" value="<%=((jp.co.mhcb.obs.persis.entity.User)pageContext.getAttribute("user ")).getId().toString() %>" />
   </td>
   <td><bean:write name="user" property="id" /></td>
   <td><bean:write name="user" property="name" /></td>
  </tr>
</logic:iterate>
</logic:present>

sampleForm.java:
    String selectedUserId;
    public String getSelectedUserId () { return selectedUserId; }
    public void setSelectedUserId(String selectedUserId) {
        this.selectedUserId = selectedUserId;
    }
SampleAction.java
public ActionForward delete(ActionMapping mapping,
  ActionForm argForm, HttpServletRequest req, HttpServletResponse res)
        throws Exception {
        SampleForm form = (SampleForm) argForm;
        String selectedUserId = form.getSelectedUserId();
        // get user by selected id
        User user = getUser(selectedUserId);
        // delete user
        }
radio框. propertys值对应form里的对象.value值是该行radio对应的user中的id(数据表中user的id是主键),那么当用户选中任何一个radio,struts通过form得到propertys值,就可以得到选中哪个user了,然后进行相应操作.
设置哪个user被选中,一是通过用户选择,没的说.二,通过程序控制,如果进入初期画面,我要让user.id = ‘3’的radio被选中,只要在初期Action中form.selectedUserId(“3”);一切搞定,就一句话,进入初期画面时, user.id = ‘3’的radio被选中了.

注意以下标签
<html:radio name="sampleForm" property="selectedUserId" value="<%= ((jp.co.mhcb.obs.persis.entity.User)pageContext.getAttribute("user ")).getId().toString() %>" />
下面发挥想象一下以下标签啥意思?
<html:radio name="sampleForm" property="selectedUserId" value="<%= ((jp.co.mhcb.obs.persis.entity.User)pageContext.getAttribute("user ")).getObject1().getObject1().getObject2()…………getObjectN().getId().toString() %>" />
能看出来什么?
User包含object1,object2包含object3,….objectN-1包含objectN,objectN有id属性.
看出来了吗?灵活运用,想象一下,各个entity和form,action该如何写?


<html:checkbox >
<html:checkbox name=" sampleForm" property="chechbox1" value="true" />
<html:checkbox name=" sampleForm" property="chechbox2" value="false" />
<html:checkbox name=" sampleForm" property="chechbox3" value="true" />
第二个框未选中,其他选中.form里面对应三个String chechbox1,chechbox2, chechbox3;下面来个复杂点的,多选择对话框multibox
SampleJsp中:
<logic:iterate name = "sampleForm" id="user" property="userList">
  <html:multibox property="selectedUsers">
    <bean:write name="user" property="id"/>
  </html:multibox>
  <bean:write name="user" property="name"/>
</logic:iterate>

SampleForm中:
    private String userList[] = new String[0];
    public String[] getUserList () { return userList;}
    public void setUserList(String[]userList) {this.userList = userList;}

    private String selectedUsers[] = new String[0];
    public String[] getSelectedUsers () {return selectedUsers;}
    public void setSelectedUsers (String[]selectedUsers) {this.selectedUsers = selectedUsers;}

如果我们在初期时在action里对bean赋值:
userList = { User(”1”,”name1”), User(”2”, ”name2”), User(”3”,”name3”) }
selectedUsers = {“1”,”3”}
那画面选中第一第三个选择框.

用户修改选择框,选择了第二,第三个,那么在action里取bean的值
String selectedItems[] = new String[list.getSize()];
selectedItems = form.getSelectedItems();
for ( int i = 0 ; i < selectedItems.length ; ++i ){
  LOGGER.debug( "selected " + i + ": " + selectedItems[i]);
}
Selected 0 : 2
Selected 1 : 3
selectedUsers = {“2”,”3”}

如何确定选中那条数据呢??
画面上有一user表,每条数据前面有个button,对应一条记录,如何确定选中那条数据呢??

SampleJsp:
<logic:iterate id="user" indexId="buttonIndex" name="sampleForm" property="userList">
<tr>
<td>
<html:submit property="button" indexed='false' >
<bean:message key="label.button.selectUser"/>
</td>
<td><bean:write name="user" property="id" /></td>
<td><bean:write name="user" property="name" /></td>
</tr>
<html:hidden name="sampleForm" property="selectUserIndex" value='<%= "" + buttonIndex %>'/>
</logic:iterate>

SampleAction.java
   int index = Integer.parseInt(form.getSelectUserIndex());
   通过一个隐藏变量,得到选中第几条数据,然后就能做相应处理.

Session—> jsp显示数据
session也能让jsp显示数据.但如果我做为设计者,是不提倡这样做的.为什么就不说了.但日本以前的设计很可能会用到session和jsp传数据.那我就有必要讲一下如何用了?做为高达的设计者还是尽量不要用session和jsp沟通.
有个下拉列表框,里面显示所有用户名称.用session传数据.
SampleJsp:
<%pageContext.setAttribute("userList",(List) (FwThreadContext
                .getAttribute("AllUser")));
%>
<html:select property="selectedUser">
  <html:options collection="userList" property="id" labelProperty="name" />
</html:select>

SampleForm.java:
    String selectedUser;
Form里只要一个selectedUser,表示选择的user. 下拉列表框用session表示.
在action等地方设置了session的内容,那下拉列表框就能显示内容了.这里session名为AllUser, labelProperty="name"是下拉列表框显示的东东, property="id"是下拉列表框每条数据隐藏的东东.通过property="selectedUser"里得到选中那条数据

<html:text name="sampleForm" property="name"
value="<%= (FwThreadContext.getAttribute("UserName")).toString() %>" />
这里很简单就是把session名为UserName设置到Text框中.得的时候还是通过form中的name得到.
分享到:
评论

相关推荐

    html中radio值的获取、赋值、注册事件示例详解

    在HTML中,单选按钮(radio)是一种表单元素,用于让浏览者从一组选项中选择一个选项。Radio按钮通常用于需要用户从有限的选项中做出单选的情况,比如性别选择或者选项偏好设置。由于多个单选按钮可以共享相同的name...

    html修改默认单选框样式

    在网页设计中,HTML元素是基础构建块,其中包括单选按钮(`&lt;input type="radio"&gt;`)。默认情况下,这些单选按钮具有浏览器提供的统一样式,但为了提供更个性化的用户体验,开发者经常需要自定义这些元素的外观。本文...

    取消选中单选框radio的三种方式示例介绍

    本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。 代码如下: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;...

    自定义radio&checkbox;样式

    CSS3引入了一系列强大的选择器,使得我们可以更精确地定位和操作HTML元素。例如: 1. 类选择器(`.class`):通过类名选取元素。 2. ID选择器(`#id`):通过元素的ID选取唯一元素。 3. 属性选择器(`[attribute]`...

    HTML复选框和单选框 checkbox和radio事件介绍

    HTML中的复选框(Checkbox)和单选框(Radio)是网页交互中常见的元素,用于收集用户的选择数据。它们在事件处理方面有一些特殊性,尤其是关于`change`和`click`事件的区别。 首先,让我们来看复选框和单选框的基本...

    radio 单选复选框美化

    本主题“radio单选复选框美化”主要探讨如何使用HTML5和CSS3技术来提升这些元素的视觉效果,为用户提供更佳的交互体验。 HTML5提供了基本的`&lt;input type="radio"&gt;`和`&lt;input type="checkbox"&gt;`标签来创建单选和复选...

    js 特效 html 特效 RADIO导航(一)

    js 特效 html 特效 RADIO导航(一)

    html5 css3 复选框Checkbox、单选框Radiobox按钮美化实例.rar

    纯CSS3美化复选框和单选框按钮,用HTML5的CSS3技术美化网页上的Checkbox和Radiobox按钮,经过美化后,变得时尚多了,和默认风格完全不一样了,美化后的风格也是目前在手机上比较容易看到的效果,实现方法和具体代码...

    html打钩打叉效果

    例如,复选框通常用`&lt;input type="checkbox"&gt;`表示,而单选按钮则用`&lt;input type="radio"&gt;`表示。 2. **CSS样式**: 要改变复选框和单选按钮的默认外观,我们可以利用CSS选择器来定位这些元素,并应用自定义样式。...

    12_表单-单选框-radio.html

    12_表单-单选框-radio

    checkbox与radio好看的样式

    在 HTML 中,`&lt;input type="checkbox"&gt;` 用于创建一个可选的复选框,而 `&lt;input type="radio"&gt;` 创建的是单选按钮。这两个元素都需要一个关联的 `&lt;label&gt;` 元素,以便通过点击标签本身就能激活对应的输入控件。例如...

    Radio按钮用法举例

    在Web开发中,HTML `&lt;input&gt;` 标签的 `type="radio"` 属性用于创建Radio按钮。每个按钮都有一个唯一的值,并且通过相同的name属性来分组,确保同一组内的按钮互斥。 源码实现方面,我们通常会用到JavaScript或者...

    JQuery 自定义 radio与checkbox

    本话题主要关注如何使用jQuery来实现自定义的radio(单选按钮)和checkbox(复选框)的美化。在现代Web界面设计中,为了提供更美观、用户体验更好的表单元素,开发者经常需要对这些标准HTML元素进行定制。 首先,...

    带动画效果的CSS3 checkbox复选框、radio单选按钮特效.rar

    又一款漂亮的带动画效果的CSS3 checkbox复选框、radio单选按钮特效,鼠标点击那些按钮时,会有动画效果,而且一改默认单选框和复选框的呆板样式,将里面的对勾和小点换成了其它的自定义图案,比原来的漂亮多了。

    基于easyui 1.4.5的单选和多选框组件

    在EasyUI中,我们可以使用`&lt;input type="radio"&gt;`标签配合`data-options`属性来创建一个具有EasyUI样式的单选框。例如: ```html &lt;input type="radio" name="group1" value="1" data-options="checked:true"&gt; ...

    微信小程序如何实现radio单选框单击打勾和取消

    在微信小程序中,实现`radio`单选框的单击打勾和取消功能,开发者需要对小程序的`radio`组件有深入的理解,并掌握相应的样式定制技巧。以下将详细阐述这一过程。 1. **使用`radio`组件** 微信小程序提供了`radio`...

    layui 实现自动选择radio单选框(checked)的方法

    HTML表单中的单选框(radio)允许用户从一组预定义的选项中选择一个。在这篇文章中,我们关注的是使用Layui框架来实现自动选择单选框(radio)的功能,特别是设置单选框的“checked”属性。 首先,我们要了解的是,...

    三种取消选中单选框radio的方法

    在前端开发中,单选框(radio)是常用于让用户从一组选项中选择一个的表单元素。当需要在页面上动态地取消选中某个单选框时,可以通过JavaScript或jQuery来实现。本文将详细讨论三种取消选中单选框radio的方法,这些...

    layui radio性别单选框赋值方法

    这篇文章详细介绍了如何使用layui的radio组件实现性别单选框,并通过JavaScript动态为性别单选框赋值。 知识点一:性别单选框的HTML结构 性别单选框在HTML中通常由一组单选按钮组成,每个按钮代表一种选择。在layui...

Global site tag (gtag.js) - Google Analytics