java随记

坚持就是胜利!

 

实现jsf中的h:dataTable 组件的h:column内的h:selectBooleanCheckbox组件的全选的方法

    标题太长,不知道怎么用更准确的语言来形容这个,呵呵:) 初学jsf时遇到不少的问题,比如在客端视图中有一个<table>标签的一列均是<input type="checkbox" />标签如
<table><tr><td><input type="checkbox" /></td><td>name</td></tr><tr><td><input ="checkbox" /></td><td>name</td></tr><table> .要实现所有的<input>标签的全选在jsp中我们可以给所有<input>标签的name属性赋一个相同的值再用javascript进行循环处理就可以了. 但是在jsf中就不是那么容易的事了,因为jsf会给所有的<input>标签生成一个不相同值的id属性和一个不同值name属性.
    来看看jsf中的解决方案
jsf中 <h:dataTable> 通常绑定一个ListDataModel 或者是ArrayDataModel等数据模型.而该数据模型通常封装List,或都Array之类的对象,这些对象的元素都是一些bean 对象,把数据库中表的字段映射成bean  再给该bean添加一个额外boolean型的属性,用来绑定 <h:selectBooleanCheckbox>组件,在backing bean中就可以通过判断这个绑定值来处理<h:dataTable>组件选中的行对应的数据模型所拥有的bean了.  那么如何在页面实现<input type="checkbox"/>的全选呢,还是用javascript 只是javascript要先对<table>标签进行操作了 这就没jsp中那么直观. js代码



</script><script  language="javascript" type="">
 function SetCheckedStatus()
{
    var oTable=document.all['fors:data'];
 var oChkAll=document.all['fors:selectall']

 if(oTable != null && oChkAll != null)
 {
  for(j=1;j<oTable.rows.length;j++)
  {
   oTable.rows(j).cells(0).children.item(0).checked=oChkAll.checked;
  }
 }
}

</script>

jsf页面代码:


<%@page contentType="text/html; charset=GB2312"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<head>
  <script type="" src="css/screen.js"></script>
<script language="javascript" type="">
 pressed="fail";
function setPress(newValue){
   pressed=newValue;
   }
function confirmSubmit(){
  if(pressed=="add"){
   wid =calculateCenterWidth(340);
    hi=calculateCenterHeight(160);
    popup=window.open("adduser.faces","popup","height=160,width=340,toolbar=no,left="+wid+",top="+hi+",menubar=no,scrollbars=no");
    popup.focus();
    return false;
  }
  if(pressed=="del"){
    return confirm("确定要删除吗?");
  }
  if(pressed=="save"){
    return confirm("确定要修改吗?");
  }
}

</script><script  language="javascript" type="">
 function SetCheckedStatus()
{
    var oTable=document.all['fors:data'];
 var oChkAll=document.all['fors:selectall']

 if(oTable != null && oChkAll != null)
 {
  for(j=1;j<oTable.rows.length;j++)
  {
   oTable.rows(j).cells(0).children.item(0).checked=oChkAll.checked;
  }
 }
}

</script><link href="css/styles3.css" rel="stylesheet" type="text/css"/>
<title>用户管理</title>
</head>
<body bgcolor="#ffffff">
<f:view>
  <h:form id="fors" onsubmit="return confirmSubmit()">
    <h:panelGrid id="top" cellspacing="0" cellpadding="0" width="100%" border="0" columns="3" columnClasses="left,topMiddle,right">
      <h:graphicImage value="images/jiao1.gif"/>
      <h:outputText value=""/>
      <h:graphicImage value="images/jiao2.gif"/>
    </h:panelGrid>
    <h:panelGrid cellspacing="0" cellpadding="0" width="100%" border="0" columnClasses="middleLeft,btstyle,middleRight" columns="3">
      <h:outputText value=""/>
      <h:panelGroup>
        <!-- 数据-->
        <h:panelGrid id="act" columns="1" cellpadding="0" cellspacing="0" width="100%" border="0" columnClasses="btstyle">
          <h:panelGroup>
            <h:selectBooleanCheckbox id="selectall" onclick="SetCheckedStatus()"/>
            <h:outputLabel for="selectall">
              <h:outputText value="全选"/>
            </h:outputLabel>
            <h:commandButton value="编辑" onclick="setPress('editor')"/>
            <h:commandButton value="删除" onclick="setPress('del')" actionListener="#{function.delUserTriggered}"/>
            <h:commandButton value="增加" onclick="setPress('add')"/>
            <h:commandButton value="保存" onclick="setPress('save')" actionListener="#{function.saveUserTriggered}"/>
          </h:panelGroup>
        </h:panelGrid>
        <h:dataTable id="data" value="#{function.userInfoModel}" var="user" width="100%" border="1" cellpadding="0" cellspacing="0">
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText1" value="选择"/>
            </f:facet>
            <h:selectBooleanCheckbox id="selectBooleanCheckbox1" value="#{user.editor}"/>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText7" value="登录名"/>
            </f:facet>
            <h:outputText value="#{user.username}" rendered="#{not user.editor}"/>
            <h:inputText value="#{user.username}" rendered="#{user.editor}">            </h:inputText>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText2" value="用户名"/>
            </f:facet>
            <h:outputText value="#{user.name}" rendered="#{not user.editor}"/>
            <h:inputText value="#{user.name}" rendered="#{user.editor}">            </h:inputText>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText3" value="用户密码"/>
            </f:facet>
            <h:outputText value="********" rendered="#{not user.editor}">            </h:outputText>
            <h:inputSecret id="inputSecret1" value="#{user.password}" redisplay="true" rendered="#{user.editor}"/>
            <h:message for="inputSecret1"/>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText4" value="性别"/>
            </f:facet>
            <h:outputText value="#{user.xingbie}" rendered="#{not user.editor}"/>

            <h:selectOneListbox id="selectOneListbox1"  size="1" value="#{user.xingbie}"  rendered="#{user.editor}" style="width:100px">
                <f:selectItems value="#{function.xinbeiList}"/>
              </h:selectOneListbox>
              <h:message for="selectOneListbox1"/>


          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText5" value="岗位"/>
            </f:facet>
            <h:outputText value="#{user.gangwei}" rendered="#{not user.editor}"/>
            <h:inputText value="#{user.gangwei}" rendered="#{user.editor}">            </h:inputText>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText id="headerText6" value="部门"/>
            </f:facet>
            <h:outputText value="#{user.bumen}" rendered="#{not user.editor}"/>
            <h:inputText value="#{user.bumen}" rendered="#{user.editor}">            </h:inputText>
          </h:column>
        </h:dataTable>
        <!-- 数据-->
      </h:panelGroup>
      <h:outputText value=""/>
    </h:panelGrid>
    <table id="fors:bottom" border="0" cellpadding="0" cellspacing="0" width="100%">
   
      <tbody>
        <tr>
          <td class="left">
            <img src="images/jiao3.gif" alt=""/>
          </td>
          <td class="bottomMiddle">          </td>
          <td class="right">
            <img src="images/jiao4.gif" alt=""/>
          </td>
        </tr>
      </tbody>
    </table>
  </h:form>
</f:view>

</body>
</html>

因为时间原因也懒的写一个完整的应用了,不过我想有以上的代码也够了,毕竟这里只是解决一个小问题.



posted on 2006-07-07 15:02 傻 瓜 阅读(7259) 评论(1)  编辑  收藏 所属分类: Java Server Faces

评论

# re: 实现jsf中的h:dataTable 组件的h:column内的h:selectBooleanCheckbox组件的全选的方法[未登录] 2009-07-26 12:05 me

good!
thanks  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(7)

我参与的团队

随笔分类

随笔档案

文章分类

友情链接

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜