`
jackle_liu
  • 浏览: 147630 次
文章分类
社区版块
存档分类
最新评论

table全选(jsf)

阅读更多

  在日常应用中,经常需要对table中的数据进行批量操作(例如: 删除),在jsp中实现这样操作的例子比比介是,但是要找在jsf中实现的例子可就难了.

  通过对appfuse的研究,发现了一个比较精妙的js函数(在script/global.js中).

js 代码
  1. function checkAll(theForm) { // check all the checkboxes in the list   
  2.   for (var i=0;i
  3.     var e = theForm.elements[i];   
  4.         var eName = e.name;   
  5.         if (eName != 'allbox' &&    
  6.             (e.type.indexOf("checkbox") == 0)) {   
  7.             e.checked = theForm.allbox.checked;        
  8.         }   
  9.     }    
  10. }  

        看来只要如此这般写我的table就可达到目的了:

  1. <t:dataTable id="houses" var="house"  
  2.     value="#{houseList.groupHouses}" rows="25" >  
  3.   
  4.     <t:column>  
  5.         <f:facet name="header">  
  6.                <input type="checkbox" name="allbox" onclick="checkAll(document.getElementById('editHouse'));"/>  
  7.         </f:facet>  
  8.         <h:selectBooleanCheckbox  name="rowCheck"/>  
  9.     </t:column>  
  10.   
  11.     <t:column>  
  12.         <f:facet name="header">  
  13.                 <h:outputText value="#{text['portal.home.table.house.title']}" />  
  14.         </f:facet>  
  15.         <h:outputText value="#{house.name}" escape="true"/>  
  16.     </t:column>  
  17.   
  18.   
  19. </t:dataTable>  
注意table最左边的一列:
  1. <t:column>  
  2.     <f:facet name="header">  
  3.            <input type="checkbox" name="allbox" onclick="checkAll(document.getElementById('editHouse'));"/>  
  4.     f:facet>  
  5.     <h:selectBooleanCheckbox  name="rowCheck"/>  
  6. t:column>  

  这是关键,事先说一下,form的id是"editHouse".

        这是摸索了一晚上才找到的办法,希望大家看到后少走弯路.

       

分享到:
评论
6 楼 yourenyouyu2008 2008-06-01  
选是选中了,后台怎么获取呀?
5 楼 yxlrock 2007-09-26  
还有使用这种方法在托管bean 怎样才能取到选中行的值。。。。
4 楼 yxlrock 2007-09-26  
<h:selectBooleanCheckbox  name="rowCheck"/>  你的name从那里来的,你自己开发的吗???

QQ373051727
3 楼 fangbiao23 2007-09-10  
这个不是很好吧~~
一选可就是整个表,而不是一个页面的行数据啦!
2 楼 hzw321hzw 2007-08-02  
<br/>
<strong>jackle_liu 写道:</strong><br/>
<div class='quote_div'>
<p>  在日常应用中,经常需要对table中的数据进行批量操作(例如: 删除),在jsp中实现这样操作的例子比比介是,但是要找在jsf中实现的例子可就难了.</p>
<p>  通过对appfuse的研究,发现了一个比较精妙的js函数(在script/global.js中).</p>
<div class='code_title'>js 代码</div>
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
    <li class='alt'><font color='#ff00ff'><span><span class='keyword'>function</span><span> checkAll(theTable) { </span><span class='comment'>// check all the checkboxes in the list </span><span>  </span></span> </font></li>
    <li class=''><font color='#ff00ff'><span>var body=theTbale.body;  </span> </font></li>
    <li class=''><span/><font color='#ff00ff'><span class='keyword'>   for</span><span> (</span><span class='keyword'>var</span><span> i=0,j=body.childNodes.length;i 〈</span></font> j;i++){ </li>
    <li class='alt'><font color='#ff00ff'><span>       </span><span class='keyword'>var</span><span> e = document.getElementById(theTable.id+":"+i+":select"); //获取CHECKBOX的引用  </span> </font></li>
    <li class=''><font color='#ff00ff'><span>        </span><span> </span> </font></li>
    <li class='alt'><font color='#ff00ff'><span>     </span> </font></li>
    <li class=''><font color='#ff00ff'><span> </span> </font></li>
    <li class='alt'><font color='#ff00ff'><span>        e.checked = !e.checked;  //反选      </span> </font></li>
    <li class=''><font color='#ff00ff'><span>          </span> </font></li>
    <li class='alt'><font color='#ff00ff'><span>    }    </span> </font></li>
    <li class=''><font color='#ff99cc'><span><font color='#ff00ff'>}</font>  </span> </font></li>
</ol>
</div>
<p>        看来只要如此这般写我的table就可达到目的了:<span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'><span class='tag'/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<div class='code_title'>
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-xml'>
    <li class='alt'><span><span class='tag'>&lt;</span><span class='tag-name'>t:dataTable</span><span> </span><span class='attribute'>id</span><span>=</span><span class='attribute-value'>"houses"</span><span> </span><span class='attribute'>var</span><span>=</span><span class='attribute-value'>"house"</span><span>  </span></span> </li>
    <li class=''><span>    </span><span class='attribute'>value</span><span>=</span><span class='attribute-value'>"#{houseList.groupHouses}"</span><span> </span><span class='attribute'>rows</span><span>=</span><span class='attribute-value'>"25"</span><span> </span><span class='tag'>&gt;</span><span>  </span> </li>
    <li class='alt'><span>  </span> </li>
    <li class=''><span>    </span><span class='tag'>&lt;</span><span class='tag-name'>t:column</span><span class='tag'>&gt;</span><span>  </span> </li>
    <li class='alt'><span>        </span><span class='tag'>&lt;</span><span class='tag-name'>f:facet</span><span> </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"header"</span><span class='tag'>&gt;</span><span>  </span> </li>
    <li class=''><span>               </span><span class='tag'>&lt;</span><span class='tag-name'>input</span><span> </span><span class='attribute'>type</span><span>=</span><span class='attribute-value'>"checkbox"</span><span> </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"allbox"</span><span> </span><span class='attribute'>onclick</span><span>=</span><span class='attribute-value'>"checkAll(document.getElementById('editHouse'));"</span><span class='tag'>/&gt;</span><span>  </span> </li>
    <li class='alt'><span>        </span><span class='tag'><span class='tag-name'>f:facet</span><span class='tag'>&gt;</span><span>  </span> </span></li>
    <li class=''><span>        </span><span class='tag'>&lt;</span><span class='tag-name'>h:selectBooleanCheckbox</span><span> <font color='#00ff00'>id="select"</font> </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"rowCheck"</span><span class='tag'>/&gt;</span><span>  </span> </li>
    <li class='alt'><span>    </span><span class='tag'><span class='tag-name'>t:column</span><span class='tag'>&gt;</span><span>  </span> </span></li>
    <li class=''><span>  </span> </li>
    <li class='alt'><span>    </span><span class='tag'>&lt;</span><span class='tag-name'>t:column</span><span class='tag'>&gt;</span><span>  </span> </li>
    <li class=''><span>        </span><span class='tag'>&lt;</span><span class='tag-name'>f:facet</span><span> </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"header"</span><span class='tag'>&gt;</span><span>  </span> </li>
    <li class='alt'><span>                </span><span class='tag'>&lt;</span><span class='tag-name'>h:outputText</span><span> </span><span class='attribute'>value</span><span>=</span><span class='attribute-value'>"#{text['portal.home.table.house.title']}"</span><span> </span><span class='tag'>/&gt;</span><span>  </span> </li>
    <li class=''><span>        </span><span class='tag'><span class='tag-name'>f:facet</span><span class='tag'>&gt;</span><span>  </span> </span></li>
    <li class='alt'><span>        </span><span class='tag'>&lt;</span><span class='tag-name'>h:outputText</span><span> </span><span class='attribute'>value</span><span>=</span><span class='attribute-value'>"#{house.name}"</span><span> </span><span class='attribute'>escape</span><span>=</span><span class='attribute-value'>"true"</span><span class='tag'>/&gt;</span><span>  </span> </li>
    <li class=''><span>    </span><span class='tag'><span class='tag-name'>t:column</span><span class='tag'>&gt;</span><span>  </span> </span></li>
    <li class='alt'><span>  </span> </li>
    <li class=''><span>  </span> </li>
    <li class='alt'><span/><span class='tag'><span class='tag-name'>t:dataTable</span><span class='tag'>&gt;</span><span>  </span> </span></li>
</ol>
</div>
</div>
<div class='code_title'>注意table最左边的一列:</div>
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-xml'>
    <li class='alt'><span><span class='tag'>&lt;</span><span class='tag-name'>t:column</span><span class='tag'>&gt;</span><span>  </span></span> </li>
    <li class=''><span>    </span><span class='tag'>&lt;</span><span class='tag-name'>f:facet</span><span> </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"header"</span><span class='tag'>&gt;</span><span>  </span> </li>
    <li class='alt'><span>           </span><span class='tag'>&lt;</span><span class='tag-name'>input</span><span> </span><span class='attribute'>type</span><span>=</span><span class='attribute-value'>"checkbox"</span><span> </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"allbox"</span><span> </span><span class='attribute'>onclick</span><span>=</span><span class='attribute-value'>"checkAll(document.getElementById(<font color='#00ff00'>'editHouse:houses'</font>));"</span><span class='tag'>/&gt;</span><span>  </span> </li>
    <li class=''><span>    </span><span class='tag'><span class='tag-name'>f:facet</span><span class='tag'>&gt;</span><span>  </span> </span></li>
    <li class='alt'><span>    </span><span class='tag'>&lt;</span><span class='tag-name'>h:selectBooleanCheckbox</span><span>  </span><span class='attribute'>name</span><span>=</span><span class='attribute-value'>"rowCheck"</span><span class='tag'>/&gt;</span><span>  </span> </li>
    <li class=''><span/><span class='tag'><span class='tag-name'>t:column</span><span class='tag'>&gt;</span><span>  </span> </span></li>
</ol>
</div>
<p>  这是关键,事先说一下,form的id是"editHouse".</p>
<p>        这是摸索了一晚上才找到的办法,希望大家看到后少走弯路.</p>
<p>        </p>
</div>
<br/>
也可以试试直接取TABLE而不是取FORM,不过要注意JSF的ID命名规则.<br/>
<br/>
<br/>
1 楼 movomoto 2007-07-31  
感谢大大。。终于解决了这个问题

相关推荐

    vue2.0在table中实现全选和反选的示例代码

    Vue 2.0 中 Table 全选和反选的示例代码 在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式,本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的...

    table全选反选

    jQuery表格行全选反选插件

    JSF中使用BooleanCheckbox实现全选功能

    在JavaServer Faces (JSF)框架中,实现全选功能通常是通过使用BooleanCheckbox组件来完成的。这篇博客文章“JSF中使用BooleanCheckbox实现全选功能”可能详细讲解了如何利用这种组件在用户界面中创建一个可以勾选的...

    jq实现table表单的全选功能

    通过jq实现了table表单的全选(取消全选),单击选择复选框等功能,当复选框全部选中后,全选框则选中

    android checkbox全选反选

    "Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作,包括全选和反选的功能。ListView是Android系统提供的一种列表视图,它可以显示大量数据并允许用户进行交互。下面我们...

    ant design的table组件实现全选功能以及自定义分页

    ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent ...

    表格中全选按钮的使用以及删除功能的实现

    在Java Web开发中,创建一个具有全选按钮和删除功能的表格是常见的需求,这能够提升用户界面的交互性和操作效率。本篇文章将详细讲解如何实现这个功能。 首先,我们需要理解表格(Table)在Web应用中的基本结构。...

    实现table表格checkbox复选框的全选 反选

    在网页开发中,表格(Table)是常用的数据展示方式,而复选框(Checkbox)则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细...

    layui结合form,table的全选、反选v1.0示例讲解

    1、需要引入layui.css和layui.js 2、html代码如下: &lt;table class=layui-table&gt; &lt;input type=checkbox name= lay-skin=primary lay-filter=allChoose&gt; &lt;td&gt;ID 角色名 唯一标识 状态 &lt;td&gt;

    table表格的全反选,删除,增加表格,列的显示与隐藏,数据的获取

    自己用jQuery写的一个table的jQuery操作的demo,里面几乎涵盖了大部分的jquery语法,对想学习jquery的同学来说是很有帮助的

    GridView 单选和全选功能以及全选操作和取消全选

    在很多场景下,我们可能需要为GridView添加单选、多选以及全选和取消全选的功能,比如在图片选择器或者列表设置中。下面我们将详细探讨如何实现这些功能。 1. **GridView的基本使用** GridView继承自AbsListView,...

    tapestry table

    一个关于table在tapestry里应用的例子

    原生JS 实现简单的全选反选.html

    实现table表格checkbox复选框的全选 反选, 适用于原生table。

    C# Winform DatagridView 分页及 全选/ 取消全选 功能

    在这个场景中,我们将关注两个特定的功能:分页和全选/取消全选。这些功能在处理大量数据时特别有用,能够提高用户界面的响应速度和用户体验。 首先,我们来详细讲解`DataGridView`的分页功能。在处理大量数据时,...

    全选,全不选,不全选按钮

    选中全选按钮,则checkbox【name=‘tids’】全部选中,有一个name为'tids'的没有选中,则全选按钮不选中,当name为'tids'全部选中,则全选自动选中

    Android在recycleview中进行全选和取消全选

    在实际应用中,我们经常需要实现全选和取消全选的功能,特别是在涉及到多选操作的场景,如文件管理、联系人选择等。本教程将详细讲解如何在RecyclerView中实现全选和取消全选,并获取已选择的数据。 首先,我们需要...

    JQuery实现checkbox的全选取消全选

    在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...

    jQuery实现table表格checkbox全选的方法分析

    本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题...

    全选与取消全选

    全选与取消全选

Global site tag (gtag.js) - Google Analytics