Flex:用checkBox实现DataGrid所有行的选择(全选)

<?xml version="1.0" encoding="utf-8"?>

<!-- http://yecon.blog.hexun.com/30014829_d.html -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var userAC:ArrayCollection = new ArrayCollection();
   [Bindable]
   private var headerThumb:ClassFactory;
   public var isAllSelected:Boolean = false;
   
   private function onInit():void{
    var obj1:User = new User();
    obj1.name = "Tom";
    obj1.age = 22;
    obj1.isChecked = false;
    userAC.addItem(obj1);
    
    var obj2:User = new User();
    obj2.name = "Jane";
    obj2.age = 18;
    obj2.isChecked = true;
    userAC.addItem(obj2);
    
    var obj3:User = new User();
    obj3.name = "Doug";
    obj3.age = 35;
    obj3.isChecked = false;
    userAC.addItem(obj3);
    
    var obj4:User = new User();
    obj4.name = "Bob";
    obj4.age = 24;
    obj4.isChecked = false;
    userAC.addItem(obj4);
    
    headerThumb = new ClassFactory(HeaderThumb);
    headerThumb.properties = {externalObject:this,externalProperty:"isAllSelected"};
    
    addEventListener(UserEvent.HEADER_CHANGED,headerChangedHandler);
    addEventListener(UserEvent.ITEM_CHANGED,itemChangedHandler);
   }
   
   private function headerChangedHandler(event:UserEvent):void{
    for each(var item:User in userAC){
     item.isChecked = event.isSelected;
    }
    isAllSelected = event.isSelected;
   }
   
   private function itemChangedHandler(event:UserEvent):void{
    isAllSelected = event.isSelected;
   }
  ]]>
 </mx:Script>
 <mx:DataGrid dataProvider="{userAC}" width="300" y="10" horizontalCenter="0">
  <mx:columns>
   <mx:DataGridColumn headerRenderer="{headerThumb}" itemRenderer="ItemThumb" sortable="false" width="30"/>
   <mx:DataGridColumn headerText="Name" dataField="name"/>
   <mx:DataGridColumn headerText="Age" dataField="age"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

HeaderThumb.mxml:

<?xml version="1.0" encoding="utf-8"?>

<!-- http://yecon.blog.hexun.com/30014829_d.html -->
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml" width="20" height="100%" preinitialize="onInit()" implements="mx.core.IFactory">
 <mx:Script>
  <![CDATA[
   import mx.binding.utils.BindingUtils;
   [Bindable]
   public var isSelected:Boolean;
   public var externalObject:*;
   public var externalProperty:String;
   
   private function onInit():void{
    BindingUtils.bindProperty(this,"isSelected",externalObject,externalProperty);
   }
   
   public function newInstance():*{
    return new HeaderThumb();
   }
   
   private function chbxHaederChanged():void{
    var event:UserEvent = new UserEvent(UserEvent.HEADER_CHANGED,chbxHaeder.selected);
    dispatchEvent(event);
   }
  ]]>
 </mx:Script>
 <mx:CheckBox id="chbxHaeder" selected="{isSelected}" change="chbxHaederChanged()" horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>

本文转自:http://yecon.blog.hexun.com/30014829_d.html

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 ElementUI 的 table 中实现多行数据选择并使用 Checkbox,可以按照以下步骤进操作: 1. 首先,确保在你的项目中正确导入了 ElementUI 组件库和样式。 2. 在你的 table 中,给每一数据添加一个标识字段,用于判断是否选中。例如,给每一条数据添加一个属性 `selected` 默认值为 `false`。 3. 在 table 的列定义中,使用 Checkbox 组件作为表头的选中框。通过 `@change` 事件监听全选框的变化,并将其值传递给每一数据的 `selected` 属性。 4. 在每一数据中,使用 Checkbox 组件作为选择框。将每一的 `selected` 属性绑定到 Checkbox 的 `v-model` 上,实现选择。 5. 如果需要禁用某些选择,可以在每一数据中添加一个 `disabled` 属性,并将其绑定到 Checkbox 的 `:disabled` 属性上。 下面是一个示例代码: ```vue <template> <el-table :data="tableData"> <el-table-column type="selection" width="55"> <template slot-scope="scope"> <el-checkbox @change="handleSelectAll(scope.$event)" :indeterminate="isIndeterminate" v-model="selectAll"></el-checkbox> </template> </el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20, gender: 'Male', selected: false }, { name: 'Alice', age: 25, gender: 'Female', selected: false }, { name: 'Bob', age: 30, gender: 'Male', selected: false } ], selectAll: false }; }, computed: { isIndeterminate() { const selectedCount = this.tableData.filter(item => item.selected).length; return selectedCount > 0 && selectedCount < this.tableData.length; } }, methods: { handleSelectAll(value) { this.tableData.forEach(item => { item.selected = value; }); } } }; </script> ``` 在上面的示例中,每一数据都有一个 `selected` 属性,默认为 `false`。全选框使用了 Checkbox 组件,并通过 `@change` 事件监听其变化,将选中状态传递给每一数据的 `selected` 属性。每一选择框也使用 Checkbox 组件,并通过 `v-model` 双向绑定到每一数据的 `selected` 属性上。你还可以给某些添加 `disabled` 属性,将其绑定到 Checkbox 的 `:disabled` 上,实现禁用选择功能。 这样,你就可以使用 Checkbox 在 ElementUI 的 table 中实现多行数据选择、禁用和全选的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值