Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法 - 大志的工作学习笔记 - ITeye技术网站
博客分类：
Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法
从网上搜索相关的资料绝大多数全选和反选实现方式是通过继承DataGrid和CheckBox来在子类里面实现一些方法来实现,而这些方法大多数都是对事件进行监听来实现全选反选.这种方式很好,但是个人认为很麻烦,而且如果是一个已经成型的系统要加全选反选功能的话,会变得挺复杂和麻烦.
再就是DataGrid中内嵌CheckBox的时候,如果出现滚动条,在拖动之后,之前的选择状态会变混乱,从网上找到解决方法就是把复选框的状态保存在一个数组类型的结构中.
正巧本人用到了上面两个问题的解决,如果把它们一块解决的话,会使得全选反选的方法变得很简单.
下面请看代码:
[Bindable]//此类必须是可绑定的//用于存放数据
public class DataObject
public var index:N
public var selected:Boolean =//存放复选框的状态
public var phone:S
public var name:S
上面的代码用于存放数据,值得注意的是,selected属性用来存放复选框的状态.其他的是业务数据.
&?xml version="1.0" encoding="utf-8"?&
&mx:Application xmlns:mx="/2006/mxml"
layout="absolute"
xmlns:ns1 ="mon.*" creationComplete="application1_creationCompleteHandler(event)"&
&mx:Script&
import mx.collections.ArrayC
import mx.controls.A
import mx.core.UIC
import mx.events.DragE
import mx.events.FlexE
import mx.events.ListE
[Bindable]
public var obj:ArrayC//用于存放datagrid中的所有数据,以及所有复选框的状态
[Bindable]
public var nums:String="";
protected function application1_creationCompleteHandler(event:FlexEvent):void
// TODO Auto-generated method stub
var arr:ArrayCollection = new ArrayCollection();
for(var i:Number=0;i&20;i++)
var o:DataObject = new DataObject();
o.selected=
o.name = "test"+(i+1);
o.phone = "10010-"+(i+1);
arr.addItem(o);
setData(arr);
public function setData(arr:ArrayCollection):void
if(arr.length&0)
private function call():void
Alert.show(getSelectedObjects().toString());
private function getSelectedObjects():ArrayCollection
var selectedObjects:ArrayCollection=new ArrayCollection();
if(obj.length&0)
for(var i:Number=0;i&obj.i++)
var o:DataObject = obj.getItemAt(i) as DataO
if(o.selected)
selectedObjects.addItem(o.phone);
return selectedO
protected function checkbox2_changeHandler(event:Event):void
var slc:Boolean = selectAllCheckBox.
if(obj.length&0)
for(var i:Number=0;i&obj.i++)
obj.getItemAt(i).selected=
protected function checkbox3_changeHandler(event:Event):void
if(obj.length&0)
for(var i:Number=0;i&obj.i++)
obj.getItemAt(i).selected=!obj.getItemAt(i).
&/mx:Script&
&mx:DataGrid
width="100%" height="300"
dataProvider="{obj}"&
&mx:columns&
&mx:DataGridColumn width="16"&
&mx:itemRenderer&
&mx:Component&
&mx:CheckBox selected="{data.selected}" change="checkbox1_changeHandler(event)"&
&mx:Script&
protected function checkbox1_changeHandler(event:Event):void
{//将复选框的状态保存在obj中,防止出现复选框错乱的情况
outerDocument.obj.getItemAt(outerDocument.dg.selectedIndex).selected=event.target.
&/mx:Script&
&/mx:CheckBox&
&/mx:Component&
&/mx:itemRenderer&
&/mx:DataGridColumn&
&mx:DataGridColumn headerText="名称" dataField="name"/&
&mx:DataGridColumn headerText="电话" dataField="phone"/&
&/mx:columns&
&/mx:DataGrid&
&mx:CheckBox label="全选" id="selectAllCheckBox" change="checkbox2_changeHandler(event)"/&
&mx:CheckBox label="反选" change="checkbox3_changeHandler(event)"/&
&/mx:HBox&
&mx:Button label="呼叫" click="call()"/&
&/mx:VBox&
&/mx:Application&
第二段代码是使用方式,可以直接运行的,放在自己的flash builder中一运行就明白了.
注意:obj用于存放datagrid中的所有数据,以及所有复选框的状态,作为datagrid的dataProvider传入其中.
而在复选框内设置它的选中状态属性为selected="{data.selected}",则可以使它的状态与obj中的相应数据对象的selected属性相对应.
如此便可以防止在出现滚动条拖动的时候复选框状态变乱的问题了.
而且,要实现全选反选等操作也就变成了对obj进行的操作了,而不是直接对CheckBox进行操作,会容易许多,不再详述,请查看代码.
附源代码,放到src根目录即可无错误执行.
下载次数: 50
扩展DataGrid 即可。效仿 DataGrid将选中状态存储到 map中。刚学习flex,多谢提醒
其实一直想问的是,太多的绑定会不会,给系统照成负担应该不会吧,当然了,也要看到底有多大了,呵呵,本质上就是对一个ArrayCollection的读取和写入操作而已,影不影响系统就看ArrayCollection的容量了
浏览: 33517 次
来自: 济南
主子报表的话感觉帆软报表比较好做吧，他们官网的教程也挺详细的
求指导，怎样获得你输入的时呢！！用Gethours获得都是当前 ...
dsjt 写道扩展DataGrid 即可。效仿 DataGri ...
jueyue 写道其实一直想问的是,太多的绑定会不会,给系统照 ...
其实一直想问的是,太多的绑定会不会,给系统照成负担代码片段(1)
1.&[代码][JavaScript]代码&&&&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
*{margin:0 padding:0}
body{font:12px/1.5 宋体, Arial, Helvetica, sans- color:#333;}
input{vertical-align: margin:0px 5px 3px 0 *margin:0px 2px 3px 0}
a{color:#39F; text-decoration:}
a:hover{color:#F60;}
table{border-collapse:}
th,td{border:1px solid #EFEFEF; padding:8px 4}
th{font-weight: text-align:}
function checkList(obj){
var oBox = typeof obj == "string" ? document.getElementById(obj) :
var aInput = oBox.getElementsByTagName("input");
var aCheck = [];
var i = checkedNum = 0;
for(i=0;i&aInput.i++){
if(aInput[i].getAttribute("type") == "checkbox"){
aCheck.push(aInput[i]);
/*因为aInput为oBox中的所有input，万一表单中有其他type的input的话从aInput中获取type为checkbox的元素，不知js有没有比较方便的办法获取checkbox，求指教*/
var oAll = getByClass(oBox,"all")[0];
var oReverse = getByClass(oBox,"reverse")[0];
for(i=0;i&aCheck.i++){
aCheck[i].onclick = function(){
if(this == oAll){
for(i=0;i&aCheck.i++){
aCheck[i].checked = this.
if(!this.checked){
oAll.checked =
checkAll();
oReverse.onclick = function(){
for(i=0;i&aCheck.i++){
if(aCheck[i] != oAll){
aCheck[i].checked = !aCheck[i].
checkAll();
function getByClass(oParent,tClass){
var tempObj = oParent.getElementsByTagName("*");
var targObj = [];
var filter = new RegExp("\\b" + tClass + "\\b");
for(var i=0;i&tempObj.i++){
if(filter.test(tempObj[i].className)){
targObj.push(tempObj[i]);
return targO
function checkAll(){
for(i=0;i&aCheck.i++){
if(aCheck[i].checked){
checkedNum++;
checkedNum == aCheck.length - 1 ? oAll.checked = true : oAll.checked =
checkedNum = 0;
&table cellpadding="0" cellspacing="0" border="0" width="100%" id="list"&
&th width="20%"&&input class="all" type="checkbox"/&全选（&a class="reverse" href="javascript:void(0)"&反选&/a&）&/th&
&th&item&/th&
&td&&input type="checkbox"/&&/td&
&td&item1&/td&
&td&&input type="checkbox"/&&/td&
&td&item2&/td&
&td&&input type="checkbox"/&&/td&
&td&item3&/td&
&td&&input type="checkbox"/&&/td&
&td&item4&/td&
&td&&input type="checkbox"/&&/td&
&td&item5&/td&
checkList("list");
开源中国-程序员在线工具：
js就是麻烦，jquery一句话的事：$(&.all&).click(function(){$(&td input&).attr('checked',this.checked)})
2楼：hlevel 发表于
$(&#select_all&).click(function(){
&& &&& &$(&input[type='checkbox']&).attr(&checked&,$(&#select_all&).attr(&checked&));
3楼：只会百度的程序员 发表于
jq就是麻烦，鼠标点击一下的事。鼠标放在全选复选框上，点一下就OK。
开源从代码分享开始
徐小槑的其他代码JQuery如何获取复选框被选中数量/判断选择数量_懒人程序
国外psd下载,php教程,jquery教程,jquery效果免费下载
JQuery如何获取复选框被选中数量/判断选择数量
JQuery如何获取复选框被选中数量/判断选择数量
& &li&&input type=&checkbox& name=&test& /&看电视&/li&
& &li&&input type=&checkbox& name=&test& /&看电影&/li&
& &li&&input type=&checkbox& name=&test& /&上网&/li&
& &li&&input type=&checkbox& name=&test& /&爬山&/li&
& &li&&input type=&checkbox& name=&test& /&游乐场&/li&
& &li&&input type=&checkbox& name=&test& /&逛街&/li&
& &li&&input type=&checkbox& name=&test& /&聚会&/li&
& &input type=&button& id=&count& value=&有多少CheckBox被选中了？& /&
& &script type=&text/javascript&&
& & & & $(document).ready(function(){ &&
& & & & & & $('input[type=checkbox]').click(function(){
& & & & & & & & $(this).attr('disabled','disabled');
& & & & & & & & if($(&input[name='test']:checked&).length &= 3)
& & & & & & & & {
& & & & & & & & & & $(&input[name='test']&).attr('disabled','disabled');
& & & & & & & & }
& & & & & & });
& & & & & & $(&#count&).click(function(){
& & & & & & & & $('input').live('click',function(){&
& & & & & & & & & & alert($('input:checked').length);&
& & & & & & & & });
& & & & & & })
& & & & })
& & &/script&&
效果二（选超过三个做弹窗提示）：
& &script type=&text/javascript&&
&$('input[type=checkbox]').click(function(){
if($(&input[name='test']:checked&).length &= 4)
$(this).removeAttr(&checked&);
alert(&最多选3个!&)}
&/script&&
jquery如何判断checkbox（复选框）是否被选中/全选/返选/取消全选&
在html 如果一个复选框被选中 是 checked=&checked&。
但是我们如果用jquery alert($(&#id&).attr(&checked&)) 会提示您是true而不是checked
所以很多朋友判断 &if($(&#id&).attr(&checked&)==&true&) 这个是错误的，其实应该是 if($(&#id&).attr(&checked&)==true)
例子里面包括了一下几个功能。
& &&input type=&button& id=&btn1& value=&全选&&
& & &input type=&button& id=&btn2& value=&取消全选&&
& & &input type=&button& id=&btn3& value=&选中所有奇数&&
& & &input type=&button& id=&btn4& value=&反选&&
& & &input type=&button& id=&btn5& value=&获得选中的所有值&&
&script src=&js/jquery-1.6.min.js& type=&text/javascript&&&/script&&
&script type=&text/javascript&&&
jQuery(function($){&
$(&#btn1&).click(function(){&
$(&input[name='checkbox']&).attr(&checked&,&true&);&
//取消全选&
$(&#btn2&).click(function(){&
$(&input[name='checkbox']&).removeAttr(&checked&);&
//选中所有基数&
$(&#btn3&).click(function(){&
$(&input[name='checkbox']:even&).attr(&checked&,&true&);&
//选中所有偶数&
$(&#btn6&).click(function(){&
$(&input[name='checkbox']:odd&).attr(&checked&,&true&);&
$(&#btn4&).click(function(){&
$(&input[name='checkbox']&).each(function(){&
if($(this).attr(&checked&))&
$(this).removeAttr(&checked&);&
$(this).attr(&checked&,&true&);&
//或许选择项的值&
var aa=&&;&
$(&#btn5&).click(function(){&
$(&input[name='checkbox']:checkbox:checked&).each(function(){&
aa+=$(this).val()&
document.write(aa);&
&/script&&
&form id=&form1& runat=&server&&&
&input type=&button& id=&btn1& value=&全选&&&
&input type=&button& id=&btn2& value=&取消全选&&&
&input type=&button& id=&btn3& value=&选中所有奇数&&&
&input type=&button& id=&btn6& value=&选中所有偶数&&&
&input type=&button& id=&btn4& value=&反选&&&
&input type=&button& id=&btn5& value=&获得选中的所有值&&&
&input type=&checkbox& name=&checkbox& value=&checkbox1&& checkbox1&
&input type=&checkbox& name=&checkbox& value=&checkbox2&& checkbox2&
&input type=&checkbox& name=&checkbox& value=&checkbox3&& checkbox3&
&input type=&checkbox& name=&checkbox& value=&checkbox4&& checkbox4&
&input type=&checkbox& name=&checkbox& value=&checkbox5&& checkbox5&
&input type=&checkbox& name=&checkbox& value=&checkbox6&& checkbox6&
&input type=&checkbox& name=&checkbox& value=&checkbox7&& checkbox7&
&input type=&checkbox& name=&checkbox& value=&checkbox8&& checkbox8&
jquery 循环读取checkbox值
$(&input[type=checkbox][checked]&).each(function(){ //由于复选框一般选中的是多个,所以可以循环输出&
alert($(this).val());&
支持键盘 ←　→页面导航：
→ 正文内容 WebForm checkbox
WebForm获取checkbox选中的值(几个简单的示例)
WebForm中用checkbox的地方挺多的，下面写了几个简单的例子，方便以后学习使用
PS：最近在做权限管理这个模块，发现用checkbox的地方挺多的，于是写了个简单的例子，以供以后学习和使用。
1.前端页面：
&form id="form1" method="get" runat="server"&
&input name="chk_per" type="checkbox" value="3" /&张三
&input name="chk_per" type="checkbox" value="4" /&李四
&input name="chk_per" type="checkbox" value="5" /&王五
&input name="chk_per" type="checkbox" value="6" /&赵六
&input name="chk_per" type="checkbox" value="7" /&孙琦
&input name="chk_per" type="checkbox" value="8" /&猪八
&input type="submit" id="btnOK" value="提交" /&
2.后台方法：
#region 获取从前端页面回传过来的 CheckBox 的值 void GetCheckBoxValue()
/// &summary&
/// 获取从前端页面回传过来的 CheckBox 的值
/// &para&Request.Form["chk_per"] 以逗号分割，获取所有选中的 CheckBox 的值&/para&
/// &/summary&
private void GetCheckBoxValue()
string user = Request["chk_per"];
string[] users = user.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries);
string s = string.E
foreach (var item in users)
s += item + " | ";
#endregion
protected void Page_Load(object sender, EventArgs e)
if (IsPostBack)
//测试调用
GetCheckBoxValue();
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910技术交流QQ群： 连续5天打卡或以上获取100积分。
您已连续打卡1天，获得20积分。
&>&&>&&>&>js checkbox全选 反选 取消全部设置表单checkbox复选框勾选
js checkbox全选 反选 取消全部设置表单checkbox复选框勾选
运行环境：IE6 IE7 IE8及以上 Firefox
js特效制作js checkbox复选框全选 反选 取消全部等设置多个表单里面的checkbox复选框勾选特效。内含js代码下载。
分享获取积分：
一键分享轻松获得&&&20&&&积分下载
需要：20 积分
上一篇：下面没有链接了下一篇：下面没有链接了
下载：1723次
jquery tab插件制作多功能选项卡，鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能，也可以与其他插件结合jquery.lazyload，制作选项卡切换图片延迟加载等优化浏览器功能。
下载：495次
js text输入框提示特效，鼠标点击文本框弹出城市选择的浮动层，像类似订机票网站选择城市的效果。js代码。
下载：626次
js表单验证插件支持多种内容表单验证，有js邮箱地址验证、js中文汉字验证、js手机号码验证、js数字验证等。内含js代码下载。
下载：2018次
javascript弹出层插件支持点击触发js弹出层，滑过触发js弹出层，带动画效果js弹出层，可自定义函数回调js弹出层。js代码。
下载：257次
js表格特效制作js表格变色效果，表格隔行变色，鼠标滑过显示单行变色效果，点击选中变色。内含js代码下载。
下载：270次
js select框美化插件制作多种风格的select美化列表框特效，U-Box 风格select框、Mac 风格select框、TM2008 风格select框等。内含js代码下载。
下载：1239次
jquery 图片滚动 xslider 插件制作图片自动左右滚动与上下滚动，这个图片滚动xslider插件不复制整个容器里面的内容，直接用按钮控制滚动，直到滚动图片内容到最后一个，适用在图片展示滚动和新闻列表滚动等。
下载：322次
js表单验证制作会员注册信息,用户名验证,电子邮箱验证,密码验证,手机号码验证等表单验证提交表单效果。内含js代码下载。
共有条留言
热门网页特效