在日常应用中,经常需要对table中的数据进行批量操作(例如: 删除),在jsp中实现这样操作的例子比比介是,但是要找在jsf中实现的例子可就难了.
通过对appfuse的研究,发现了一个比较精妙的js函数(在script/global.js中).
js 代码
- function checkAll(theForm) {
- for (var i=0;i
- var e = theForm.elements[i];
- var eName = e.name;
- if (eName != 'allbox' &&
- (e.type.indexOf("checkbox") == 0)) {
- e.checked = theForm.allbox.checked;
- }
- }
- }
看来只要如此这般写我的table就可达到目的了:
- <t:dataTable id="houses" var="house"
- value="#{houseList.groupHouses}" rows="25" >
-
- <t:column>
- <f:facet name="header">
- <input type="checkbox" name="allbox" onclick="checkAll(document.getElementById('editHouse'));"/>
- </f:facet>
- <h:selectBooleanCheckbox name="rowCheck"/>
- </t:column>
-
- <t:column>
- <f:facet name="header">
- <h:outputText value="#{text['portal.home.table.house.title']}" />
- </f:facet>
- <h:outputText value="#{house.name}" escape="true"/>
- </t:column>
-
-
- </t:dataTable>
注意table最左边的一列:
- <t:column>
- <f:facet name="header">
- <input type="checkbox" name="allbox" onclick="checkAll(document.getElementById('editHouse'));"/>
- f:facet>
- <h:selectBooleanCheckbox name="rowCheck"/>
- t:column>
这是关键,事先说一下,form的id是"editHouse".
这是摸索了一晚上才找到的办法,希望大家看到后少走弯路.
分享到:
相关推荐
Vue 2.0 中 Table 全选和反选的示例代码 在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式,本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的...
jQuery表格行全选反选插件
在JavaServer Faces (JSF)框架中,实现全选功能通常是通过使用BooleanCheckbox组件来完成的。这篇博客文章“JSF中使用BooleanCheckbox实现全选功能”可能详细讲解了如何利用这种组件在用户界面中创建一个可以勾选的...
通过jq实现了table表单的全选(取消全选),单击选择复选框等功能,当复选框全部选中后,全选框则选中
"Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作,包括全选和反选的功能。ListView是Android系统提供的一种列表视图,它可以显示大量数据并允许用户进行交互。下面我们...
ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent ...
在Java Web开发中,创建一个具有全选按钮和删除功能的表格是常见的需求,这能够提升用户界面的交互性和操作效率。本篇文章将详细讲解如何实现这个功能。 首先,我们需要理解表格(Table)在Web应用中的基本结构。...
在网页开发中,表格(Table)是常用的数据展示方式,而复选框(Checkbox)则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细...
1、需要引入layui.css和layui.js 2、html代码如下: <table class=layui-table> <input type=checkbox name= lay-skin=primary lay-filter=allChoose> <td>ID 角色名 唯一标识 状态 <td>
自己用jQuery写的一个table的jQuery操作的demo,里面几乎涵盖了大部分的jquery语法,对想学习jquery的同学来说是很有帮助的
在很多场景下,我们可能需要为GridView添加单选、多选以及全选和取消全选的功能,比如在图片选择器或者列表设置中。下面我们将详细探讨如何实现这些功能。 1. **GridView的基本使用** GridView继承自AbsListView,...
一个关于table在tapestry里应用的例子
实现table表格checkbox复选框的全选 反选, 适用于原生table。
在这个场景中,我们将关注两个特定的功能:分页和全选/取消全选。这些功能在处理大量数据时特别有用,能够提高用户界面的响应速度和用户体验。 首先,我们来详细讲解`DataGridView`的分页功能。在处理大量数据时,...
选中全选按钮,则checkbox【name=‘tids’】全部选中,有一个name为'tids'的没有选中,则全选按钮不选中,当name为'tids'全部选中,则全选自动选中
在实际应用中,我们经常需要实现全选和取消全选的功能,特别是在涉及到多选操作的场景,如文件管理、联系人选择等。本教程将详细讲解如何在RecyclerView中实现全选和取消全选,并获取已选择的数据。 首先,我们需要...
在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题...
全选与取消全选