带checkbox的listView 实现多选,全选,反选



转载自csdn作者:mavenly  

链接:http://blog.csdn.net/onlyonecoder/article/details/8687811
Demo地址(0分资源)http://download.csdn.net/detail/onlyonecoder/5154352

由于listview的一些特性,刚开始写这种需求的功能的时候都会碰到一些问题,重点就是存储每个checkbox的状态值,在这里分享出了完美解决方法:




布局文件:

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="horizontal" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/tv"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_gravity="center_vertical" />  
  12.   
  13.     <LinearLayout  
  14.         android:id="@+id/line"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="50dp"  
  17.         android:layout_below="@+id/tv"  
  18.         android:orientation="horizontal" >  
  19.   
  20.         <Button  
  21.             android:id="@+id/bt_selectall"  
  22.             android:layout_width="80dp"  
  23.             android:layout_height="fill_parent"  
  24.             android:text="全选" />  
  25.   
  26.              <Button  
  27.             android:id="@+id/bt_cancleselectall"  
  28.             android:layout_width="80dp"  
  29.             android:layout_height="fill_parent"  
  30.             android:text="反选" />  
  31.                
  32.           
  33.         <Button  
  34.             android:id="@+id/bt_deselectall"  
  35.             android:layout_width="80dp"  
  36.             android:layout_height="fill_parent"  
  37.             android:text="取消选择" />  
  38.   
  39.     </LinearLayout>  
  40.   
  41.     <ListView  
  42.         android:id="@+id/lv"  
  43.         android:layout_width="fill_parent"  
  44.         android:layout_height="fill_parent"  
  45.         android:layout_below="@+id/line" />  
  46.   
  47. </RelativeLayout>  


listView 的item布局文件:


[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="horizontal" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/item_tv"  
  9.         android:layout_width="0dp"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_gravity="center_vertical"  
  12.         android:layout_weight="1" />  
  13.   
  14.     <CheckBox  
  15.         android:id="@+id/item_cb"  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:clickable="false"  
  19.         android:focusable="false"  
  20.         android:focusableInTouchMode="false"  
  21.         android:gravity="center_vertical" />  
  22.   
  23. </LinearLayout>  


Activity:


[java]  view plain copy
  1. public class Ex_checkboxActivity extends Activity {  
  2.     private ListView lv;  
  3.     private MyAdapter mAdapter;  
  4.     private ArrayList<String> list;  
  5.     private Button bt_selectall;  
  6.     private Button bt_cancel;  
  7.     private Button bt_deselectall;  
  8.     private int checkNum; // 记录选中的条目数量  
  9.     private TextView tv_show;// 用于显示选中的条目数量  
  10.   
  11.     /** Called when the activity is first created. */  
  12.   
  13.     @Override  
  14.     public void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         setContentView(R.layout.main);  
  17.         /* 实例化各个控件 */  
  18.         lv = (ListView) findViewById(R.id.lv);  
  19.         bt_selectall = (Button) findViewById(R.id.bt_selectall);  
  20.         bt_cancel = (Button) findViewById(R.id.bt_cancelselectall);  
  21.         bt_deselectall = (Button) findViewById(R.id.bt_deselectall);  
  22.         tv_show = (TextView) findViewById(R.id.tv);  
  23.         list = new ArrayList<String>();  
  24.         // 为Adapter准备数据  
  25.         initDate();  
  26.         // 实例化自定义的MyAdapter  
  27.         mAdapter = new MyAdapter(list, this);  
  28.         // 绑定Adapter  
  29.         lv.setAdapter(mAdapter);  
  30.   
  31.         // 全选按钮的回调接口  
  32.         bt_selectall.setOnClickListener(new OnClickListener() {  
  33.             @Override  
  34.             public void onClick(View v) {  
  35.                 // 遍历list的长度,将MyAdapter中的map值全部设为true  
  36.                 for (int i = 0; i < list.size(); i++) {  
  37.                     MyAdapter.getIsSelected().put(i, true);  
  38.                 }  
  39.                 // 数量设为list的长度  
  40.                 checkNum = list.size();  
  41.                 // 刷新listview和TextView的显示  
  42.                 dataChanged();  
  43.             }  
  44.         });  
  45.   
  46.         // 反选按钮的回调接口  
  47.         bt_cancel.setOnClickListener(new OnClickListener() {  
  48.             @Override  
  49.             public void onClick(View v) {  
  50.                 // 遍历list的长度,将已选的设为未选,未选的设为已选  
  51.                 for (int i = 0; i < list.size(); i++) {  
  52.                     if (MyAdapter.getIsSelected().get(i)) {  
  53.                         MyAdapter.getIsSelected().put(i, false);  
  54.                         checkNum--;  
  55.                     } else {  
  56.                         MyAdapter.getIsSelected().put(i, true);  
  57.                         checkNum++;  
  58.                     }  
  59.                 }  
  60.                 // 刷新listview和TextView的显示  
  61.                 dataChanged();  
  62.             }  
  63.         });  
  64.   
  65.         // 取消按钮的回调接口  
  66.         bt_deselectall.setOnClickListener(new OnClickListener() {  
  67.             @Override  
  68.             public void onClick(View v) {  
  69.                 // 遍历list的长度,将已选的按钮设为未选  
  70.                 for (int i = 0; i < list.size(); i++) {  
  71.                     if (MyAdapter.getIsSelected().get(i)) {  
  72.                         MyAdapter.getIsSelected().put(i, false);  
  73.                         checkNum--;// 数量减1  
  74.                     }  
  75.                 }  
  76.                 // 刷新listview和TextView的显示  
  77.                 dataChanged();  
  78.             }  
  79.         });  
  80.   
  81.         // 绑定listView的监听器  
  82.         lv.setOnItemClickListener(new OnItemClickListener() {  
  83.             @Override  
  84.             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,  
  85.                     long arg3) {  
  86.                 // 取得ViewHolder对象,这样就省去了通过层层的findViewById去实例化我们需要的cb实例的步骤  
  87.                 ViewHolder holder = (ViewHolder) arg1.getTag();  
  88.                 // 改变CheckBox的状态  
  89.                 holder.cb.toggle();  
  90.                 // 将CheckBox的选中状况记录下来  
  91.                 MyAdapter.getIsSelected().put(arg2, holder.cb.isChecked());  
  92.                 // 调整选定条目  
  93.                 if (holder.cb.isChecked() == true) {  
  94.                     checkNum++;  
  95.                 } else {  
  96.                     checkNum--;  
  97.                 }  
  98.                 // 用TextView显示  
  99.                 tv_show.setText("已选中" + checkNum + "项");  
  100.             }  
  101.         });  
  102.     }  
  103.   
  104.     // 初始化数据  
  105.     private void initDate() {  
  106.         for (int i = 0; i < 15; i++) {  
  107.             list.add("data" + " " + i);  
  108.         }  
  109.         ;  
  110.     }  
  111.     // 刷新listview和TextView的显示  
  112.     private void dataChanged() {  
  113.         // 通知listView刷新  
  114.         mAdapter.notifyDataSetChanged();  
  115.         // TextView显示最新的选中数目  
  116.         tv_show.setText("已选中" + checkNum + "项");  
  117.     };  
  118. }  


列表适配器:


[java]  view plain copy
  1. package com.notice.listcheck;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5.   
  6. import android.content.Context;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.BaseAdapter;  
  11. import android.widget.CheckBox;  
  12. import android.widget.TextView;  
  13.   
  14. public class MyAdapter extends BaseAdapter {  
  15.     // 填充数据的list  
  16.     private ArrayList<String> list;  
  17.     // 用来控制CheckBox的选中状况  
  18.     private static HashMap<Integer, Boolean> isSelected;  
  19.     // 上下文  
  20.     private Context context;  
  21.     // 用来导入布局  
  22.     private LayoutInflater inflater = null;  
  23.   
  24.     // 构造器  
  25.     public MyAdapter(ArrayList<String> list, Context context) {  
  26.         this.context = context;  
  27.         this.list = list;  
  28.         inflater = LayoutInflater.from(context);  
  29.         isSelected = new HashMap<Integer, Boolean>();  
  30.         // 初始化数据  
  31.         initDate();  
  32.     }  
  33.   
  34.     // 初始化isSelected的数据  
  35.     private void initDate() {  
  36.         for (int i = 0; i < list.size(); i++) {  
  37.             getIsSelected().put(i, false);  
  38.         }  
  39.     }  
  40.   
  41.     @Override  
  42.     public int getCount() {  
  43.         return list.size();  
  44.     }  
  45.   
  46.     @Override  
  47.     public Object getItem(int position) {  
  48.         return list.get(position);  
  49.     }  
  50.   
  51.     @Override  
  52.     public long getItemId(int position) {  
  53.         return position;  
  54.     }  
  55.   
  56.     @Override  
  57.     public View getView(int position, View convertView, ViewGroup parent) {  
  58.         ViewHolder holder = null;  
  59.         if (convertView == null) {  
  60.             // 获得ViewHolder对象  
  61.             holder = new ViewHolder();  
  62.             // 导入布局并赋值给convertview  
  63.             convertView = inflater.inflate(R.layout.listviewitem, null);  
  64.             holder.tv = (TextView) convertView.findViewById(R.id.item_tv);  
  65.             holder.cb = (CheckBox) convertView.findViewById(R.id.item_cb);  
  66.             // 为view设置标签  
  67.             convertView.setTag(holder);  
  68.         } else {  
  69.             // 取出holder  
  70.             holder = (ViewHolder) convertView.getTag();  
  71.         }  
  72.         // 设置list中TextView的显示  
  73.         holder.tv.setText(list.get(position));  
  74.         // 根据isSelected来设置checkbox的选中状况  
  75.         holder.cb.setChecked(getIsSelected().get(position));  
  76.         return convertView;  
  77.     }  
  78.   
  79.     public static HashMap<Integer, Boolean> getIsSelected() {  
  80.         return isSelected;  
  81.     }  
  82.   
  83.     public static void setIsSelected(HashMap<Integer, Boolean> isSelected) {  
  84.         MyAdapter.isSelected = isSelected;  
  85.     }  
  86.   
  87.     public static class ViewHolder {  
  88.         TextView tv;  
  89.         CheckBox cb;  
  90.     }  
  91. }  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现全选反选功能,需要在el-tree中使用el-checkbox组件,并通过一些JavaScript代码来监听选中状态的变化。 以下是一个实现全选反选功能的示例代码: ```html <el-tree :data="treeData" node-key="id" show-checkbox @check-change="handleCheckChange"> <template slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-checkbox v-model="data.checked" :indeterminate="data.indeterminate" @change="handleCheckChange"></el-checkbox> </template> </el-tree> ``` 在上述代码中,el-tree组件设置了show-checkbox属性,表示显示复选框;使用了el-checkbox组件来实现复选框的功能。 同时,在el-checkbox组件中,绑定了v-model来实现数据的双向绑定,以及@change事件来监听复选框状态的变化。 在JavaScript中,需要实现一个handleCheckChange方法来处理复选框状态的变化,具体实现如下: ```js methods: { handleCheckChange(nodeData) { if (nodeData.checked) { // 选中节点 this.checkNode(nodeData, true); } else { // 取消选中节点 this.checkNode(nodeData, false); } }, checkNode(nodeData, checked) { nodeData.checked = checked; if (nodeData.children && nodeData.children.length > 0) { // 处理子节点 nodeData.children.forEach(childNode => { this.checkNode(childNode, checked); }); } const parentNode = this.getParentNode(nodeData); if (parentNode) { // 更新父节点状态 this.updateParentNode(parentNode); } }, getParentNode(nodeData) { let parentNode = null; let currentNode = nodeData; while (currentNode && !parentNode) { currentNode = currentNode.parent; if (currentNode && currentNode.level === 0) { parentNode = currentNode.data; } } return parentNode; }, updateParentNode(nodeData) { let checkedCount = 0; let indeterminateCount = 0; nodeData.children.forEach(childNode => { if (childNode.checked) { checkedCount++; } else if (childNode.indeterminate) { indeterminateCount++; } }); if (checkedCount === nodeData.children.length) { // 所有子节点都选中了 nodeData.checked = true; nodeData.indeterminate = false; } else if (checkedCount === 0) { // 所有子节点都没有选中 nodeData.checked = false; nodeData.indeterminate = false; } else { // 部分子节点选中 nodeData.checked = false; nodeData.indeterminate = true; } const parentNode = this.getParentNode(nodeData); if (parentNode) { // 更新父节点状态 this.updateParentNode(parentNode); } } } ``` 在上述代码中,handleCheckChange方法用来处理复选框状态变化的逻辑,checkNode方法用来递归处理子节点的状态,updateParentNode方法用来更新父节点的状态。由于el-tree中的数据是静态的,所以需要自己维护节点的父子关系。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值