- 浏览: 485736 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (250)
- concurrent (11)
- io (1)
- CI (10)
- linux (57)
- windows (2)
- java (38)
- mac (4)
- eclipse (9)
- db (13)
- python (5)
- groovy (5)
- flex (7)
- hibernate (5)
- odb (8)
- netbeans (1)
- web (31)
- book (14)
- erlang (2)
- communication (2)
- virtualization (5)
- jUnit (0)
- jsf (1)
- perl (1)
- java jax-rs (5)
- Jenkins (2)
- Jenkins Plugin (3)
- android (2)
- git (1)
- big data (0)
- 试读 (1)
最新评论
-
yzzy4793:
讲的很清楚,明白
同步synchronized方法和代码块 -
aa51513:
中文乱码式硬伤
Jersey2.x对REST请求处理流程的分析 -
feiwomoshu1991:
...
同步synchronized方法和代码块 -
marshan:
启动失败的原因是加载的类版本冲突,因此你首先要保证依赖的版本和 ...
richfaces中facelet版本升级到2时的典型错误和解决办法 -
zhaohang6688:
请问我按照你的方式修改还是报错 错误信息还是这个 是为什么啊 ...
richfaces中facelet版本升级到2时的典型错误和解决办法
本文介绍了richface的一种使用情况:datatable和checkbox的结合。
rich:dataTable是很不错的web控件。但如果编写如下图效果的业务,必须结合checkbox来使用。
现附上代码,然后分析
<rich:dataTable id="carList" width="555px" rows="#{usr.pageSize}" value="#{usr.dataList}" var="car" rowClasses="dataListRow1, dataListRow2" rowKeyVar="row"> <f:facet name="header"> <rich:columnGroup> <h:column> <h:selectBooleanCheckbox id="all" onclick="selectAll(#{usr.scrollerPage},#{usr.pageSize});"/> </h:column> <h:column> <h:outputText styleClass="headerText" value="RowNum" /> </h:column> <h:column> <h:outputText styleClass="headerText" value="Name" /> </h:column> <h:column> <h:outputText styleClass="headerText" value="Decription" /> </h:column> <h:column> <h:outputText styleClass="headerText" value="Base Price" /> </h:column> <h:column> <h:outputText styleClass="headerText" value="操作" /> </h:column> </rich:columnGroup> </f:facet> <h:column> <h:selectBooleanCheckbox id="cbox" value="#{car.checked}"/> </h:column> <h:column> <h:outputText value="#{row}" /> </h:column> <h:column> <h:outputText value="#{car.name}" /> </h:column> <h:column> <h:outputText value="#{car.description}" /> </h:column> <h:column> <h:outputText value="#{car.baseprice}" /> </h:column> <h:column> <h:commandLink action="#{usr.delete}" value="删除" > <f:param name="id" value="#{car.id}"/> </h:commandLink> </h:column> </rich:dataTable> <rich:datascroller for="carList" id="dc1" style="width:480px" page="#{usr.scrollerPage}" onclick="antiSelect();" reRender="formlist"/>
这里的关键问题是全选。经过google和自己的摸索,总结如下:
onclick="selectAll(当前分页序号,每页多少条记录);"
注意:
如果使用xhtml,js代码请写入独立文件并在页面中引入:
<a4j:loadScript src="${pageContext.request.contextPath}/scripts/directory.js" />
否则,直接写在xhtml页面,会报错:
The content of elements must consist of well-formed character data or markup
原因我不确知,可能是xhtml解析问题。
js代码如下
function selectAll(page,size) { var checkAll=document.getElementById('formlist:carList:all').checked; for(var i=0;i<=10; i++){ var seq = (page-1)* size + i; var checkBox = document.getElementById('formlist:carList:'+seq+':cbox');//formlist:carList:0:cbox //alert("checkAll="+checkAll); //alert("page="+page+" size="+size+" i="+i+" seq="+seq); if(checkAll) checkBox.checked=true; else checkBox.checked=false; } } function antiSelect(){ document.getElementById('formlist:carList:all').checked=false; }
此前,我google的代码如下,在该死的ie下不能执行。为此,我扣了半天行号问题。
function selectAll() { var rows = document.getElementById('formlist:carList').rows; var currentState = rows[0].cells[0].childNodes[0].checked; var i; for (i in rows) { i++; if (currentState) { rows[i].cells[0].childNodes[0].checked=true; } else if (!currentState) { rows[i].cells[0].childNodes[0].checked=false; } } }
经测试,改代码全浏览器支持!
评论
1 楼
wwj5256
2010-08-24
学习了 刚好要用到
引用
如果使用xhtml,js代码请写入独立文件并在页面中引入:
这个问题
<script>
<!--
//js code
-->
</script>
这样IDE就应该不会去解析js了
发表评论
-
Apache benchmarking
2013-11-17 16:15 1146NAME ab - Apache HTTP ser ... -
dojo 动态创建下拉菜单和输入框
2013-02-04 18:35 5941<!DOCTYPE HTML PUBLIC " ... -
动态加载css和java script
2013-01-24 18:53 2637var portalLoader = { dojo : ... -
[web architect] nginx1.2.6+ tomcat7+memcached1.2.6
2012-12-25 17:40 1273Load Balancer (Nginx) ... -
[web architect] tomcat+nginx单机
2012-12-24 18:39 937location / { ... -
Tomcat管理配置
2011-04-10 00:49 1138<?xml version='1.0' encod ... -
当前浏览器对html5的支持[狠图]
2011-01-15 03:08 4480html5是web的未来,这部巨作尚未完成,现在闪现的还只是一 ... -
richfaces中facelet版本升级到2时的典型错误和解决办法
2010-08-31 10:23 58952010-8-31 9:48:35 com.sun.faces ... -
探讨JSF·RichFaces分页的一种策略
2010-03-22 17:06 2768richfaces提供的rich:dataTable和rich ... -
richface 皮肤
2010-01-07 13:36 1471一、绪 richface默认提供 ... -
RichFaces第一例
2009-12-29 14:30 1625学习JSF和RichFaces一周了,总结以一个小例子为介,分 ... -
大小写问题
2008-10-14 16:11 1213背景: 系统包括单点登录模块,存在多个数据库,有mysql和o ... -
九张图
2004-12-02 13:52 1164这些天一直在做查询页面。昨天碰到了这个:美工提供的在页面上显示 ... -
翻页的处理
2004-12-28 10:11 10471 翻页时排序:为了实 ... -
上传file前,判断上传文件的扩展名
2004-12-28 10:20 1595首先我不太确定Js能否扑捉到file的value,于是作了一个 ... -
上传文件前判空
2004-12-28 10:24 1227上传文件时如果下拉列表框或file框为空,会报错。下面就解决这 ... -
根据radio值动态显示file
2005-03-01 17:51 1214<html><head><met ... -
jsp/servlet 乱码解决小方法
2005-03-13 15:13 1255import java.io.UnsupportedEncod ... -
关于unconditional
2005-03-18 23:18 891在active状态调用destroyApp(boolean u ... -
实现转贴功能的store procedure
2005-04-05 11:59 1163数据库结构board表--论坛板块表theme表--论坛主题表 ...
相关推荐
*适用于查询,一次加载,减少访问服务器频率 *使用json获取datatable数据 *将datatable转换为table *将table分页 *checkbox全选
【Android】ListView相关——与CheckBox的完美结合Demo 相关文章:http://blog.csdn.net/etzmico/article/details/6958105
关键避免事件冲突,和复用错误. listview中添加CheckBox的完美实现
一个WinForm的TreeView,某node的CheckBox初始状态为false,当双击这个node的checkbox时,会出现很奇怪的情况: 第一次双击checkbox,checkbox显示的状态会切换两次状态,unchecked-> checked-> unchecked,而...
GridView与CheckBox结合
自己写的代码示例,保证可用,入股有什么问题
完美解决了ListView和CheckBox的焦点冲突及CheckBox的复用问题,讲解了CheckBox的全选、反选、删除功能及在下拉刷新和下拉加载中如何保存CheckBox的先前的选中状态
GridView和CheckBox结合
【解决方法】 所以最好是修改jquery.datatable控件,给生成的每个datatable下的checkbox赋 予不同的id,因为datatable的id是不一样的,所以可以把 datatable的id作为 checkbox的前缀组成一个唯一的id 。 具体这个...
所以最好是修改jquery.datatable控件,给生成的每个datatable下的checkbox赋 予不同的id,因为datatable的id是不一样的,所以可以把 datatable的id作为 checkbox的前缀组成一个唯一的id 。 具体这个checkbox的调用...
checkBox分别处理选中与不选中checkBox分别处理选中与不选中
JS控制checkboxJS控制checkbox
当checkbox没有被勾选的时候按钮不能被点击和操作颜色为默认,checkbox被勾选,button颜色发生变化且可以被点击
1、ListView item中加入checkbox后onListItemClick 事件无法触发。 原因:checkbox的优先级高于ListItem于是屏蔽了ListItem的单击事件。 解决方案:设置checkbox的android:focusable="false" 2、选择其中的...
jquery checkbox 选中 取消 checkbox多选
个人感觉比较好看的checkbox和radio的样式
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
Android CheckBox与监听Demo源码.rar
C#完美可编辑多列含CheckBox的ListView
带checkbox的树 checkbox tree tree tree checkbox