精华内容
下载资源
问答
  • 我获取了一个列表的数据后,想要多选中列,将这些列的属性统一进行处理 例如下图: ![图片说明]... !...按钮触发方法hot();ishot==0 则为否 ishot==1则为是。
  • 怎样实现多选

    2013-06-20 15:30:46
    c#怎样使combox实现多选功能并输出到textbox中
  • 安卓图片多选

    2017-04-28 17:16:20
    安卓图片多选
  • 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值。其实这里遍历的只是高亮的值并不是打勾的值。遍历打勾的值要用下面的代码: for (int i = 0; i < checkedListBox1.Items....

    一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值。
    其实这里遍历的只是高亮的值并不是打勾的值。遍历打勾的值要用下面的代码:

    for (int i = 0; i < checkedListBox1.Items.Count; i++)
    {
        if (checkedListBox1.GetItemChecked(i))
        {
            MessageBox.Show(checkedListBox1.GetItemText(checkedListBox1.Items[i]));
        }
    }
    参考:
    最近用到checklistbox控件,在使用其过程中,花了较多的时间,这里我收集了其相关的代码段,希望对大家有所帮助。
    1.
    添加项
    checkedListBox1.Items.Add("蓝色"); 
    checkedListBox1.Items.Add("红色"); 
    checkedListBox1.Items.Add("黄色");
     
    2. 
    判断第i项是否选中,选中为true,否则为false
    if(checkedListBox1.GetItemChecked(i))
    {
        return true;
    } 
    else
    {
        return false; 
    }
     
    3. 
    设置第i项是否选中
    checkedListBox1.SetItemChecked(i, true);  //true改为false为没有选中。
     
    4. 
    设置全选 
    添加一个名为select_all的checkbox控件,由其控制checkedListBox是全选还是全不选。
    private void select_all_CheckedChanged(object sender, EventArgs e) 
    { 
        if(select_all.Checked) 
        {
            for (int j = 0; j < checkedListBox1.Items.Count; j++) 
                checkedListBox1.SetItemChecked(j, true); 
        }
        else 
        {
            for (int j =0; j < checkedListBox1.Items.Count; j++) 
                checkedListBox1.SetItemChecked(j, false);
        }
    }
     
    5.
    得到全部选中的值,并将选中的项的文本组合成为一个字符串.
    string strCollected = string.Empty;
    for (int i = 0; i < checkedListBox1.Items.Count; i++)
    {
        if (checkedListBox1.GetItemChecked(i))
        {
            if (strCollected == string.Empty)
            {
                strCollected = checkedListBox1.GetItemText(checkedListBox1.Items[i]);
            }
        }
        else
        {
            strCollected = strCollected + "/" + checkedListBox1.
            GetItemText(checkedListBox1.Items[i]);
        }
    }
     
     
    6. 
    设置CheckedListBox中第i项的Checked状态
    checkedListBox1.SetItemCheckState(i, CheckState.Checked);
    7. 
    private void checkBoxAll_CheckedChanged(object sender, EventArgs e) 
    { 
        if (checkBoxAll.Checked) 
        { 
            //被选择了则将CheckedListBox中的所有条目都变为Checked状态 
            for (int i = 0; i < checkedListBoxLayerControl.Items.Count;i++) 
            {     
                checkedListBoxLayerControl.SetItemCheckState(i, 
                CheckState.Checked); 
            } 
        }
        else 
        { 
            //否则变成Unchecked状态 
            for (int i = 0;i < checkedListBoxLayerControl.Items.Count; i++)
            {
                checkedListBoxLayerControl.SetItemCheckState(i, CheckState.Unchecked); 
            }              
        }
    }
    
    8. 
    checkedListBox 单选设置(代码实现)
    private void chkl_ItemAuditing_ItemCheck(object sender,ItemCheckEventArgs e)
    { 
        if (chkl_ItemAuditing.CheckedItems.Count > 0) 
        { 
            for (int i = 0; i < chkl_ItemAuditing.Items.Count; i++) 
            {
                if (i != e.Index) 
                { 
                    this.chkl_ItemAuditing.SetItemCheckState(i, 
                    System.Windows.Forms.CheckState.Unchecked); 
                } 
            }
        } 
    }
    
    9. 
    checkedListBox1显示一个数据库中关键字对应的所有记录
    for (int i = 0; i < table.Rows.Count; i++) 
    { 
        string name = table.Rows["myname"].ToString(); 
        string paw = table.Rows["mypaw"].ToString(); 
        checkedListBox1.Items.Add(name + paw); 
    }
     
    10. 
    for(i=0;i<CheckedListBox.Items.Count;i++)   
    {   
       if(CheckedListBox.GetItemText(CheckedListBox.Items)=="你得到的值")   
        {   
            CheckedListBox.SetItemChecked(i,true);   
        }   
    }
     
    11. 
    清除checkedListBox1中所有的选项
    for (int i = 0; i < checkedListBox1.Items.Count; i++)
    {
        checkedListBox1.Items.Clear();
    }
     
    12. 
    //设置索引为index的项为选中状态
    for (int i = 0; i < checkedListBox1.Items.Count; i++) 
    {
        checkedListBox1.SetItemChecked(i, true);
    } 
     
    13.   
    for (int i = 0; i < checkedListBox1.Items.Count; i++) 
    {
        if (checkedListBox1.GetSelected(i)) 
        {
            MessageBox.Show(checkedListBox1.CheckedItems.ToString());
        }
    }
    
    14.
    //选中checkedListBox1所有的选项
    for(int i = 0; i < checkedListBox1.Items.Count; i++)         
    {
        checkedListBox1.SetItemCheckState(i, CheckState.Checked);
    }
    15.             
    for (int i = 0; i < checkedListBox1.Items.Count; i++) 
    {  
        //如果checkedListBox1的第i项被选中,
        //则显示checkedListBox1对应的值
        if (checkedListBox1.GetItemChecked(i)) 
        { 
             MessageBox.Show(checkedListBox1.Items.ToString()); 
        }
    }
     
    16. 
    //反向选择checkedListBox1的选项
    for (int i = 0; i < checkedListBox1.Items.Count; i++) 
    { 
       if (checkedListBox1.GetItemChecked(i)) 
       { 
           checkedListBox1.SetItemChecked(i, false); 
       } 
       else 
       { 
           checkedListBox1.SetItemChecked(i, true); 
       } 
    }
    17. 
    //checkedListBox1中选定的项->checkedListBox2
    for (int i = 0; i < checkedListBox1.CheckedItems.Count; i++) 
    { 
        checkedListBox2.Items.Add(this.checkedListBox1.CheckedItems);
        //remove是除去一个具体的值,不是index,注意了
        this.checkedListBox1.Items.Remove(
        this.checkedListBox1.CheckedItems);       
    }
    18.
    //绑定数据
    checkedListBox1.DataSource = dt;
    checkedListBox1.DisplayMember = "item";
    checkedListBox1.ValueMember = "code";
    这个属性在checklistbox里是没有的,但是可以直接使用
    19.
    for (int i = 0; i < checkedListBox1.Items.Count; i++)
    {
        if (checkedListBox1.GetItemChecked(i))
        {
            checkedListBox1.SelectedIndex = i;
            //利用SelectedValue取得Value值时,只能取得当前焦点项的值。所以要对整个CheckedListBox中的所有勾选项,让其都做一次焦点项才能取得所有勾选的项的值。
            str+= checkedListBox1.SelectedValue;
        }
    }
    20.
    CheckedlistBox控件比较有用到两个属性分别为CheckOnClick为True:表示单击就选中当前行,为False :要点两下才可以选中。(默认值为False)。还有一个属性为ThreeDCheckBoxes为True:表示三维的选中标记,为False:表示表面的显示标记。(默认值为False)。

    http://www.cnblogs.com/hongfei/archive/2012/12/21/2828408.html

    转载于:https://www.cnblogs.com/belx/p/9211628.html

    展开全文
  • 实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可。 多选效果 单选效果 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书...

    场景

    实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可。

    多选效果

     

    单选效果

     

    注:

    博客:
    https://blog.csdn.net/badao_liumang_qizhi
    关注公众号
    霸道的程序猿
    获取编程相关电子书、教程推送与免费下载。

    实现

    实现多选

    在el-table中添加一个el-table-column 设置类型为selection即可

            <el-table v-loading="loading" :data="dkszList" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center"/>
              <el-table-column label="工号" align="center" prop="gh"/>
            </el-table>

    并且通过

    @selection-change="handleSelectionChange"

    设置其所选项改变事件,在事件对应的方法handleSelectionChange中

          // 多选框选中数据
          handleSelectionChange(selection) {
            //获取所有选中项的gh(工号)属性的值
            this.ghs = selection.map(item => item.gh)
            //获取所有选中项数组的长度
            this.selectedNum = selection.length
          },

    其中selection是作为选中项的一个数组,可以通过map方法来获取对应gh列即工号列的所有值

    其中this.ghs 和 this.selectedNum 要提前声明

        data() {
          return {
            // 选中数组
            ghs: [],
            //选中的记录数量
            selectedNum:0,

    效果

     

    实现单选

            <el-table
              v-loading="loading"
              :data="kqryszList"
              @selection-change="handleSelectionChange"
              ref="tb"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="工号" align="center" prop="gh" />
            </el-table>

    与实现多选类似,需要添加一列类型为selection。

    除了设置其选项改变事件外,还需要设置其ref属性。

    设置ref的目的是能在方法中通过

    this.$refs.tb

    获取这个table

    在方法handleSelectionChange中

        // 单选框选中数据
        handleSelectionChange(selection) {
          this.checkedGh = selection[0].gh;
          if (selection.length > 1) {
            this.$refs.tb.clearSelection();
            this.$refs.tb.toggleRowSelection(selection.pop());
          }
    
        },

    此方法的实现逻辑就是,通过设置的ref属性和 this.$refs.tb来获取这个table,

    然后判断选择项的数组selection的长度大于1的话就清除数组并设置选择最后一次选中的项。

    并且通过

     this.checkedGh = selection[0].gh;

    获取选项行的gh属性的值。

    其中checkedGh需要提前在

      data() {
        return {
          //选中的工号
          checkedGh: [],

    声明。

    效果

     

    展开全文
  • 近日群里的小伙伴问我三级目录、Android三级目录、ListView单选/`GridView`单选、ListView多选/GridView多选怎么做,我跟他讲了下原理和思路他还是有点迷糊,后来我就动手给他写了一个Demo,这里也把这个Demo分享给...

    NoHttp开源地址:https://github.com/yanzhenjie/NoHttp

    NoHttp详细使用文档已发布,你想知道的全都有,请点我移步!

    版权声明:转载请注明本文转自严振杰的博客: http://blog.yanzhenjie.com

    本例Demo源码下载地址

    需求是怎样的?

      近日群里的小伙伴问我三级目录、Android三级目录、ListView单选/GridView单选、ListView多选/GridView多选怎么做,我跟他讲了下原理和思路他还是有点迷糊,后来我就动手给他写了一个Demo,这里也把这个Demo分享给大家。当然文中用的都是ListView,但是我相信当你看完了本博客,什么GridViewListView什么单选多选都不在话下啊哈哈。
      需求是,左侧一个列表,展示一级和二级目录,点击一级的Item,展开这个Item对应的二级目录,点击二级目录中的Item,选中当前点击二级目录的Item,反选其它二级的Item(这就是单选);点击二级目录Item的同时要展开当前点击的二级目录Item对应的三级目录,点击三级目录的Item可以选中,而不反选其它(这就是多选)。当然只能多选当前二级目录下的三级Item。下面一个图直观的解释一下:
    Demo演示图

    分析

      首先看UI怎么设计,左侧我们首先想到的就是用ExpandableListView实现,这个View有自动展开二级的功能,而且是一个List表。右侧第三级目录是一个ListView,点击二级目录的Item时用Adapter回调到Activity,由Activity去刷新第三级目录。第三级目录就是一个ListView啦,这个很简单啦。
      接着是Item的选中变色,变色有两种,一种是文字变色,一种是背景变色,我们这里两个都做,那么怎么在选中和点击的时候设置字体颜色和View背景色呢,很多想到了用Java代码动态的设置,我不得不说这样做真是很愚蠢,而且不一定能实现控制。所以我们想到了drawableselector,没错就是这个货,当我们设置view.setSelected(true)时它会自动显示selector中的’selected=true’的颜色,不论是背景还是字体颜色。
      其次左侧二级目录的单选功能怎么做?二级目录的数据肯定是一个List<JavaBean>,我们想到用JavaJavaBean来记录每个Item的选中状态,当点击其中一个Item时先把所有的Item的JavaBean的选中状态setCheck(false),然后设置选中当前Item的Bean的选中状态setCheck(true),再刷新Adapter,这样就做到了单选。我们来看看代码:

    // 使所有二级目录不选中
    for (OneBean oneBean : oneBeans) {// 遍历平级的所有一级目录
        List<TwoBean> twoBeans = oneBean.getOperation();
        for (TwoBean twoBean : twoBeans)//遍历这个一级目录下的所有二级目录Item
            twoBean.setChecked(false);
    }
    // 选中当前点击的二级目录
    getChild(position, childPosition).setChecked(true);
    notifyDataSetChanged();
    // 通知外部刷新第三级
    if (itemClickListener != null)
        itemClickListener.onClick(position, childPosition);

      最后右侧的三级目录的多选怎么做,看了二级目录的单选后多选不是更简单了,点击Item的时候这个Item是选中就设置为不选中,是不选中就设置为选中。我们来看看主要代码:

    // 点击Item的时候选中或者反选当前Item,这里没有让其它item反选,说明就是多选
    getItem(position).toggle();
    notifyDataSetChanged();

    实现

      下面我带大家一步步来实现这个分析。

    界面布局

      界面就是两个View,左边一个ExpandableListView,右边一个ListView

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
    
        <ExpandableListView
            android:id="@+id/elv_main"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scrollbars="none" />
    
        <ListView
            android:id="@+id/lv_main"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scrollbars="none" />
    </LinearLayout>

    一级目录的JavaBean

      根据BaseExpandableListAdapter一级目录的JavaBean展开时立刻要拿到二级目录的数据,系统(暂且叫系统)会调用Adatper中下面两个方法:

    @Override
    public OneBean getGroup(int groupPosition) {
        return oneBeans.get(groupPosition);
    }
    
    @Override
    public TwoBean getChild(int groupPosition, int childPosition) {
        return getGroup(groupPosition).getOperation().get(childPosition);
    }

      由上可见,一级目录的JavaBean肯定要包含二级目录,所以一级目录的JavaBean代码如下:

    public class OneBean {
    
        /**
         * 第一级Item显示的文字
         */
        private String title;
    
        /**
         * 第一级标题对应的第二级内容
         */
        private List<TwoBean> operation;
    
        public OneBean() {
        }
    
        public OneBean(List<TwoBean> operation, String title) {
            this.operation = operation;
            this.title = title;
        }
    
        public List<TwoBean> getOperation() {
            return operation;
        }
    
        public void setOperation(List<TwoBean> operation) {
            this.operation = operation;
        }
    
        public String getTitle() {
            return title;
        }
    
        public void setTitle(String title) {
            this.title = title;
        }
    }

    二级目录的JavaBean

      二级目录要带上选中功能,所以我们实现系统的Checkable接口:

    public class TwoBean implements Checkable {
    
        /**
         * 第二级Item显示的文字。
         */
        private String title;
    
        /**
         * 第二级是否被选中。
         */
        private boolean isChecked;
    
        public TwoBean() {
        }
    
        public TwoBean(boolean checked, String title) {
            isChecked = checked;
            this.title = title;
        }
    
    
        public String getTitle() {
            return title;
        }
    
        public void setTitle(String title) {
            this.title = title;
        }
    
        @Override
        public void setChecked(boolean checked) {
            isChecked = checked;
        }
    
        @Override
        public boolean isChecked() {
            return isChecked;
        }
    
        @Override
        public void toggle() {
            isChecked = !isChecked;
        }
    }

    三级目录的JavaBean

      三级目录和二级目录一样,带有选中功能,我们还是实现Checkable接口:

    public class ThreeBean implements Checkable {
    
        /**
         * 三级的Item的文字。
         */
        private String title;
    
        /**
         * 是否选中。
         */
        private boolean isChecked;
        /**
         * 在List中的位置
         */
        private int index;
    
        public ThreeBean() {
        }
    
        public ThreeBean(boolean checked, String title, int index) {
            isChecked = checked;
            this.title = title;
            this.index = index;
        }
    
        public String getTitle() {
            return title;
        }
    
        public void setTitle(String title) {
            this.title = title;
        }
    
        public int getIndex() {
            return index;
        }
    
        public void setIndex(int index) {
            this.index = index;
        }
    
        @Override
        public void setChecked(boolean checked) {
            isChecked = checked;
        }
    
        @Override
        public boolean isChecked() {
            return isChecked;
        }
    
        @Override
        public void toggle() {
            isChecked = !isChecked;
        }
    
        @Override
        public String toString() {
            return Integer.toString(index);
        }
    }
    

    一二级目录的适配器

      因为一二级目录在左侧同在一个ExpandableListView中,所以适配器肯定是一个,但是他们的Item的布局因为二级带选中功能而不一样。

    一二级目录Item的布局

      一级和二级都是显示一个标题,单纯的就是一个TextView,加上点击效果,选中效果最多是TextView加上一个TextColor=selectorbackground=selector的问题,所以:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/bg_two_normal"
        android:orientation="vertical">
    
        <TextView
            android:id="@+id/tv_title_one"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@drawable/selector_tv_two_bg"
            android:gravity="center_vertical"
            android:paddingEnd="@dimen/tv_left_20"
            android:paddingLeft="@dimen/tv_left_20"
            android:paddingRight="@dimen/zero"
            android:paddingStart="@dimen/zero"
            android:textColor="@color/selector_tv_color" />
    
    </LinearLayout>

    一二级目录适配器怎么玩

      主要就是设置数据的地方要注意一下,我们把每个ViewHolder看作一个Item,可以把所有的逻辑放在ViewHolder中,在getView时根据position设置数据,所以ViewHolder需要提供一个setPosition的方法来接受getViewposition.
      第一级目录的getViewViewHolder

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        OneViewHolder oneViewHolder;
        if (convertView == null) {
            convertView = mLayoutInflater.inflate(R.layout.item_list_one_title, parent, false);
            oneViewHolder = new OneViewHolder(convertView);
            convertView.setTag(oneViewHolder);
        } else
            oneViewHolder = (OneViewHolder) convertView.getTag();
        oneViewHolder.setPosition(groupPosition);
        return convertView;
    }
    /**
     * 一级的holder。
     */
    class OneViewHolder {
        private TextView mTvTitle;
    
        private OneViewHolder(View view) {
            mTvTitle = (TextView) view.findViewById(R.id.tv_title_one);
        }
    
        public void setPosition(int position) {
            OneBean oneBean = getGroup(position);
            mTvTitle.setText(oneBean.getTitle());
        }
    }

      二级目录的getViewViewHolder,二级目录这里才是重点,怎么做单选,怎么回调都依靠它:

     @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        TwoViewHolder twoViewHolder;
        if (convertView == null) {
            convertView = mLayoutInflater.inflate(R.layout.item_list_two_title, parent, false);
            twoViewHolder = new TwoViewHolder(convertView);
            convertView.setTag(twoViewHolder);
        } else
            twoViewHolder = (TwoViewHolder) convertView.getTag();
        twoViewHolder.setPosition(groupPosition, childPosition);
        return convertView;
    }
    
    /**
     * 二级的holder。
     */
    class TwoViewHolder implements View.OnClickListener {
        private TextView mTvTitle;
    
        private int position;
    
        private int childPosition;
    
        private TwoViewHolder(View view) {
            view.setOnClickListener(this);
            mTvTitle = (TextView) view.findViewById(R.id.tv_title_two);
        }
    
        public void setPosition(int position, int childPosition) {
            this.position = position;
            this.childPosition = childPosition;
            TwoBean twoBean = getChild(position, childPosition);
            mTvTitle.setText(twoBean.getTitle());
            mTvTitle.setSelected(twoBean.isChecked());
        }
    
        @Override
        public void onClick(View v) {
            // 使所有二级目录不选中
            for (OneBean oneBean : oneBeans) {// 遍历平级的所有一级目录
                List<TwoBean> twoBeans = oneBean.getOperation();
                for (TwoBean twoBean : twoBeans)//遍历这个一级目录下的所有二级目录Item
                    twoBean.setChecked(false);
            }
            // 选中当前点击的二级目录
            getChild(position, childPosition).setChecked(true);
            notifyDataSetChanged();
            // 通知外部刷新第三级
            if (itemClickListener != null)
                itemClickListener.onClick(position, childPosition);
        }
    }

      看到这里大家可以回过头看看文章最前面的分析了,怎么设置二级目录的单选。最核心的选中效果的是setPosition中的代码mTvTitle.setSelected(twoBean.isChecked());

    适配器的完整代码

    public class OneTwoAdapter extends BaseExpandableListAdapter {
    
        private Context mContext;
        /**
         * 二级Item点击监听
         */
        private OnTwoItemClickListener itemClickListener;
        /**
         * 一二级目录的数据
         */
        private List<OneBean> oneBeans = new ArrayList<>();
    
        private LayoutInflater mLayoutInflater;
    
        public OneTwoAdapter(Context context, OnTwoItemClickListener itemClickListener) {
            this.mContext = context;
            mLayoutInflater = LayoutInflater.from(mContext);
            this.itemClickListener = itemClickListener;
        }
    
        public void notifyDataSetChanged(List<OneBean> oneBeans) {
            this.oneBeans.clear();
            if (oneBeans != null)
                this.oneBeans.addAll(oneBeans);
            super.notifyDataSetChanged();
        }
    
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            OneViewHolder oneViewHolder;
            if (convertView == null) {
                convertView = mLayoutInflater.inflate(R.layout.item_list_one_title, parent, false);
                oneViewHolder = new OneViewHolder(convertView);
                convertView.setTag(oneViewHolder);
            } else
                oneViewHolder = (OneViewHolder) convertView.getTag();
            oneViewHolder.setPosition(groupPosition);
            return convertView;
        }
    
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
            TwoViewHolder twoViewHolder;
            if (convertView == null) {
                convertView = mLayoutInflater.inflate(R.layout.item_list_two_title, parent, false);
                twoViewHolder = new TwoViewHolder(convertView);
                convertView.setTag(twoViewHolder);
            } else
                twoViewHolder = (TwoViewHolder) convertView.getTag();
            twoViewHolder.setPosition(groupPosition, childPosition);
            return convertView;
        }
    
        /**
         * 一级的holder。
         */
        class OneViewHolder {
            private TextView mTvTitle;
    
            private OneViewHolder(View view) {
                mTvTitle = (TextView) view.findViewById(R.id.tv_title_one);
            }
    
            public void setPosition(int position) {
                OneBean oneBean = getGroup(position);
                mTvTitle.setText(oneBean.getTitle());
            }
        }
    
        /**
         * 二级的holder。
         */
        class TwoViewHolder implements View.OnClickListener {
            private TextView mTvTitle;
    
            private int position;
    
            private int childPosition;
    
            private TwoViewHolder(View view) {
                view.setOnClickListener(this);
                mTvTitle = (TextView) view.findViewById(R.id.tv_title_two);
            }
    
            public void setPosition(int position, int childPosition) {
                this.position = position;
                this.childPosition = childPosition;
                TwoBean twoBean = getChild(position, childPosition);
                mTvTitle.setText(twoBean.getTitle());
                mTvTitle.setSelected(twoBean.isChecked());
            }
    
            @Override
            public void onClick(View v) {
                // 使所有二级目录不选中
                for (OneBean oneBean : oneBeans) {// 遍历平级的所有一级目录
                    List<TwoBean> twoBeans = oneBean.getOperation();
                    for (TwoBean twoBean : twoBeans)//遍历这个一级目录下的所有二级目录Item
                        twoBean.setChecked(false);
                }
                // 选中当前点击的二级目录
                getChild(position, childPosition).setChecked(true);
                notifyDataSetChanged();
                // 通知外部刷新第三级
                if (itemClickListener != null)
                    // 第一个参数是一级的index,第二个参数是二级的index
                    itemClickListener.onClick(position, childPosition);
            }
        }
    
        public interface OnTwoItemClickListener {
            void onClick(int groupId, int childId);
        }
    
        @Override
        public int getGroupCount() {
            return oneBeans.size();
        }
    
        @Override
        public int getChildrenCount(int groupPosition) {
            return oneBeans.get(groupPosition).getOperation().size();
        }
    
        @Override
        public OneBean getGroup(int groupPosition) {
            return oneBeans.get(groupPosition);
        }
    
        @Override
        public TwoBean getChild(int groupPosition, int childPosition) {
            return getGroup(groupPosition).getOperation().get(childPosition);
        }
    
        @Override
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }
    
        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }
    
        @Override
        public boolean hasStableIds() {
            return true;
        }
    
        @Override
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return true;
        }
    }

      到这里一二级目录的就做完了。我们在Activity中给这个适配器设置一个二级目录点击监听,当二级Item被点击时就会触发这里的代码:

    // 通知外部刷新第三级
    if (itemClickListener != null)
        // 第一个参数是一级的index,第二个参数是二级的index
        itemClickListener.onClick(position, childPosition);

      这样我们在外部就能收到二级目录被点击的回调了,而且通知了是哪个一级目录,哪个二级目录,当点击二级目录的时候我们去刷新二级Item对应的三级目录数据。

    第三级的适配器怎么玩

      那么根据我们的分析三级比二级还简单,不过使用的是ListView而已,所以我们直接上代码:

    public class ThreeAdapter extends BaseAdapter {
    
        private Context mContext;
    
        private List<ThreeBean> mThreeBeans = new ArrayList<>();
        /**
         * 一级id
         */
        private int groupId = -1;
        /**
         * 二级id
         */
        private int chilcId = -1;
    
        public ThreeAdapter(Context context) {
            this.mContext = context;
        }
    
        public void notifyDataSetChanged(List<ThreeBean> threeBeans, int groupId, int chilcId) {
            this.groupId = groupId;
            this.chilcId = chilcId;
            mThreeBeans.clear();
            if (threeBeans != null) {
                mThreeBeans.addAll(threeBeans);
            }
            super.notifyDataSetChanged();
        }
    
        /**
         * 返回第一级选中的Item的Position,当没有选中时返回-1。
         *
         * @return Position。
         */
        public int getOneItemSelect() {
            return groupId;
        }
    
        /**
         * 返回第二级选中的Item的Position,当没有选中时返回-1。
         *
         * @return Position。
         */
        public int getTwoItemSelect() {
            return chilcId;
        }
    
        /**
         * 返回第三级选中的Item集合。
         *
         * @return {@code List<Three>}。
         */
        public List<ThreeBean> getThreeSelect() {
            List<ThreeBean> threeBeans = new ArrayList<>();
            for (ThreeBean threeBean : mThreeBeans) {
                if (threeBean.isChecked())
                    threeBeans.add(threeBean);
            }
            return threeBeans;
        }
    
        @Override
        public int getCount() {
            return mThreeBeans.size();
        }
    
        @Override
        public ThreeBean getItem(int position) {
            return mThreeBeans.get(position);
        }
    
        @Override
        public long getItemId(int position) {
            return position;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ThreeViewHolder threeViewHolder;
            if (convertView == null) {
                convertView = LayoutInflater.from(mContext).inflate(R.layout.item_list_three_title, parent, false);
                threeViewHolder = new ThreeViewHolder(convertView);
                convertView.setTag(threeViewHolder);
            } else
                threeViewHolder = (ThreeViewHolder) convertView.getTag();
            threeViewHolder.setPosition(position);
            return convertView;
        }
    
        /**
         * 一级的holder。
         */
        class ThreeViewHolder implements View.OnClickListener {
            private TextView mTvTitle;
    
            private int position;
    
            private ThreeViewHolder(View view) {
                view.setOnClickListener(this);
                mTvTitle = (TextView) view.findViewById(R.id.tv_title_three);
            }
    
            /**
             * 设置Item的数据。
             *
             * @param position 第几个Item。
             */
            public void setPosition(int position) {
                this.position = position;
                ThreeBean threeBean = getItem(position);
                mTvTitle.setText(threeBean.getTitle());
                mTvTitle.setSelected(threeBean.isChecked());
            }
    
            @Override
            public void onClick(View v) {
                // 点击Item的时候选中或者反选当前Item,这里没有让其它item反选,说明就是多选
                getItem(position).toggle();
                notifyDataSetChanged();
            }
        }
    }

      最核心的选中效果的是setPosition中的代码mTvTitle.setSelected(twoBean.isChecked());。点击时切换相反状态的代码是getItem(position).toggle();,这里大家可以看一下JavaBean中的实现,结合设置选中和selector就实现了选中状态的切换。
      我在三级的Adapter中加了获取一二级选中index的方法,和获取三级选中的JavaBean的方法,这样我们在点击确定的时候就可以获取到选中的一二三级分别是哪个了。

    Activity中的代码

      说那么多还是要看Activity中怎么玩这几个Adapter,我们来看看Activity的代码:

    public class MainActivity extends Activity {
    
        /**
         * 第三级适配器
         */
        private ThreeAdapter threeListAdapter;
        /**
         * 第三级数据
         */
        private List<ThreeBean> threeBeans;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            // 第三级
            ListView listView = (ListView) findViewById(R.id.lv_main);
            threeListAdapter = new ThreeAdapter(this);
            listView.setAdapter(threeListAdapter);
    
    
            ExpandableListView expandableListView = (ExpandableListView) findViewById(R.id.elv_main);
            OneTwoAdapter expandCheckAdapter = new OneTwoAdapter(this, onTwoItemClickListener);
            expandableListView.setAdapter(expandCheckAdapter);
            // 第一二级
            List<OneBean> oneBeans = new ArrayList<>();
            for (int i = 0; i < 20; i++) {
                List<TwoBean> twoBeans = new ArrayList<>();
                for (int j = 0; j < 10; j++) {
                    twoBeans.add(new TwoBean(false, "第" + i + "的第" + j + "个"));
                }
                oneBeans.add(new OneBean(twoBeans, "第一级:" + i));
            }
    
            // 这里刷新就数据,假设是从服务器拿来的数据
            expandCheckAdapter.notifyDataSetChanged(oneBeans);
        }
    
        private OneTwoAdapter.OnTwoItemClickListener onTwoItemClickListener = new OneTwoAdapter.OnTwoItemClickListener() {
            @Override
            public void onClick(int groupId, int childId) {
                if (threeBeans == null)
                    threeBeans = new ArrayList<>();
                threeBeans.clear();
    
                // 这里模拟请求第三级的数据
                for (int i = 0; i < 15; i++) {
                    threeBeans.add(new ThreeBean(false, "第" + groupId + "个的第" + childId + "的数据" + i, i));
                }
                threeListAdapter.notifyDataSetChanged(threeBeans, groupId, childId);
            }
        };
    
        @Override
        public boolean onMenuItemSelected(int featureId, MenuItem item) {
            if (item.getItemId() == R.id.menu_sure) {
    
                String message = "第一级选中的是第" + threeListAdapter.getOneItemSelect() + ",第二级选中的是第" + threeListAdapter.getTwoItemSelect();
                Toast.makeText(this, message, Toast.LENGTH_LONG).show();
    
                // 拿到第三级选中的列表,这里可以这样拿,也可以直接从我们数据源中拿
                List<ThreeBean> threeSelect = threeListAdapter.getThreeSelect();
                if (threeSelect.size() > 0) {
                    String messageThree = "第三级选中了" + TextUtils.join(", ", threeSelect);
                    Toast.makeText(this, messageThree, Toast.LENGTH_LONG).show();
                }
            }
            return true;
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.activity_main, menu);
            return true;
        }
    }

      Activity中无非就是给两个ListView设置了Adapter,然后加了菜单,点击的时候打印出来选中的Item的消息。
      最后的最后打个广告,我做了一个Android开源网络框架,在文章的开头和末尾有连接,我其它博客也介绍了怎么用,缓存、Cookie、自定义请求等,上传文件、下载文件等,欢迎大家关注。


    NoHttp 源码及Demo托管在Github欢迎大家Starhttps://github.com/yanzhenjie/NoHttp

    展开全文
  • 手机端实现多选

    2020-10-09 16:51:50
    H5多选的手机端实现


    一、第一种实现

    效果图类似这种
    在这里插入图片描述

    实现步骤:

    1. 底部弹出层使用的是 Layer 手机端

    官方文档:Layer For Mobile
    引入

    <link rel="stylesheet" href="<%=contextPath%>/app/css/layer.css">
    <script src="<%=contextPath%>/app/js/layer.js"></script>
    

    2. 入口

    样式可以修改成自己使用的,这里不做展示
    
    <div class="areaFormGroup borderTop">
       <div class="label">性质</div>
         <div class="inputWrap textareaBox">
             <textarea class="textarea" id="wj" readonly onclick="wj();" placeholder="请选择..."
             ></textarea>
         </div>
     </div>
    

    3. 方法

     function wj () {
    	   //页面层
    	   layer.open({
    	       type: 1,
    	       content: count(),//页面层内容
    	       shade: true,
    	       anim: 'up',
    	       style: 'position:fixed;overflow: scroll;height: 300px; bottom:0; left:0; width: 100%; border:none;padding:0px 0;'
    	   });
     };
    

    4. 数据方法

    //获取数据方法
    function count() {
       	/**
           * 第一种 js拼接html和数据以及点击方法,适用于页面简单,看个人需求
           * 第二种 在jsp隐藏一个写好的数据页面,然后设置id,通过 $("#id").html() 获取该数据页面
           */        
              
    }         
    

    5. 解决弹出层滑动时候,底层页面也滑动问题

    在第三步修改方法如下:
    
    1 获取页面滚动条位置,然后end方法是弹出层页面关闭时的回调
    
    function wj () {
    	var scrollTop = $(document).scrollTop();//获取当前滚动条位置
           $("body").addClass("flexd");//设置绝对定位,此时不操作的话底层页面回到最初位置
           $("body").css("top",-scrollTop);//设置top属性确保屏幕显示滚动条的当前位置
      //页面层
       layer.open({
           type: 1,
           content: count(),//页面层内容
           shade: true,
           anim: 'up',
           end: function() {
                $("body").removeClass("flexd");
                $("body").css("top",0);   //top设置为0
                $(document).scrollTop(scrollTop);//设置top属性确保屏幕显示滚动条的当前位置
            },
           style: 'position:fixed;overflow: scroll;height: 300px; bottom:0; left:0; width: 100%; border:none;padding:0px 0;'
       });
    };
    
    2 增加style样式
    
    .flexd{position: fixed; width: 100%;}
    

    这里有篇文章可以参考一下: 禁止底部页面滚动方法

    6. 点击弹出层选择多选方法

    function seitem(event) {
        //event 当前点击对象  checked 选中之后样式 
        if (event.currentTarget.className.indexOf('checked') > 0) {
            $('#' + event.currentTarget.id).removeClass('checked');
            $('#i' + event.currentTarget.id).remove();
        } else {
            $('#' + event.currentTarget.id).addClass('checked');
            var i =  document.createElement("i");
            i.className = "iClass";
            i.innerHTML = "✔";
            i.id = "i"+event.currentTarget.id;
            event.currentTarget.appendChild(i);
        }
    }
    

    7. 确认和取消的方法

    //确认
        function affirm(type) {
            //业务代码
            layer.closeAll();
        }
    
        //取消
        function cancel() {
        	//关闭弹出层
            layer.closeAll();
        }
    

    8. 实现效果图

    样式比较简单,根据自己需求修改
    

    在这里插入图片描述

    二、第二种实现

    效果图如下:
    在这里插入图片描述

    1.获取数据

    	这里使用的是angularJS前端技术,所以数据遍历简单,也可以使用标签遍历或者其他方法
    
    <div class="areaFormGroup borderTop">
          <div class="label">意见类型 </div>
          <div class="switchType" bindonce ng-repeat="foo in beans.checkContents" ng-cloak >
              <div class="checkContents">
                 <span id="{{foo.indexs}}" onclick="switchType(this)" class="item itemChecked"  >
                      <i class="iconfont icon-check" ></i>
                  </span>
              </div>
              <div class="checkContents">
                  {{foo.name}}
              </div>
          </div>
    </div>
    

    2.样式

    这里的content是icon图标,也可以自己换其他

    		.switchType {
               /* height: 1.1rem;*/
                display: flex;
                justify-content: flex-start;
                padding: 0.1rem 0.24rem;
                border-bottom-style:solid;
                border-bottom-color: rgba(0, 0, 0, .1);
                border-width:1px;
                align-items:center;
            }
             .switchType .item.active .iconfont:before {
                 content: "\e635";
                 color: #d43e35;
             }
            .icon-check:before {
                content: "\e634";
                font-size: 0.36rem;
            }
            .itemChecked {
                align-items: center;
                font-size: 0.32rem;
                font-weight: 400;
            }
            .checkContents{
                margin-right: 0.5em;
                //垂直居中处理
                display:flex;
                justify-content:center;
                align-items:center;
            }
    

    3.点击选中方法

    function switchType(t) {
       if (t.className.indexOf('active') > 0) {
            $('#' + t.id  ).removeClass('active');
        } else {
            $('#' + t.id  ).addClass('active')
        }
    }
    

    总结

    有什么不妥或者可以优化地方,希望能多多指点一下

    展开全文
  • Button多选操作

    千次阅读 2017-07-19 15:19:19
    button的selected属性和运行时添加属性、关联对象这两种方法,很相似,只是一个是系统的属性,一个是我们自己通过运行时添加的属性 // button的selected属性。 - (void)buttonSelected{ ...
  • 后台怎么赋值让多选下拉框默认选中![图片说明](https://img-ask.csdn.net/upload/201801/19/1516336057_768314.jpg)
  • C# checklistbox控件用法总结(怎样得到多选的值,以及动态加载数据) 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值。 其实这里遍历的只是高亮的值并不是打勾的值。遍历打勾...
  • jquery实现可多选下拉框 代码很简单,有基础的人一看即会,
  • c# DataTable添加多选

    2020-02-02 15:30:26
    数据库表格,在加载到DataGridView显示的时候,有时候需要有多选的功能。 添加,在sql查询返回的时候,对DataTables添加。 //TODO 添加checkbox DataColumn dtcCheck = new DataColumn("选择"); dtcCheck....
  • Qt:QRadioButton多选

    2018-09-17 17:12:00
    QRadioButton多选一...
  • JFileChooser多选、选择目录

    千次阅读 2017-06-29 00:04:21
    JFileChooser多选、选择目录
  • 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值。 其实这里遍历的只是高亮的值并不是打勾的值。遍历打勾的值要用下面的代码: for (int i = 0; i &...
  • 可以多选批量删除的item的ListView,实现勾选的隐藏和显示
  • 代码如下,怎么样实现多选返回列表,显示在QLabel ![图片说明](https://img-ask.csdn.net/upload/201812/03/1543834681_373537.gif) ``` import sys from PyQt5.QtWidgets import QApplication,QWidget,...
  • hbuilder重复单词多选快捷键

    千次阅读 2019-05-21 16:44:08
    在HBuilder里多选词的快捷键是ctrl+shift+d。
  • tabview多选实现

    2015-06-09 15:16:38
    目前使用的是sqlite数据显示在tabview上,根据的是selectedrows去做设置,但由于行数太多,希望能有个多选可以一键设置。讨教下各位,不知道一般采用的是怎样的解决方式?简单实用的最好。
  • 一、基本用法:VolvoSaabOpelAudi其中,标签可以省掉,在页面中用法全部湖北电大网络学习中心成都师范学院网络学习中心武汉职业技术学院网络学习中心二、Select元素还可以多选,看如下代码://有multiple属性,则...
  • 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值。其实这里遍历的只是高亮的值并不是打勾的值。遍历打勾的值要用下面的代码: for (int i = 0; i < checkedListBox1.Items....
  • 不知道我表达的清不清楚…… 具体情况是这样的,我用python写了一个给文件或文件夹添加前缀的脚本,并将其添加到了注册表的右键菜单里。 在注册表里我写的是: "C:\Python37\pythonw.exe" "D:\pycharm\...
  • UICollectionView 多选显示问题

    千次阅读 2016-03-18 10:40:34
    这几天想做个本地相册选择器,想用UICollectionView排列出照片,点击就选择照片,支持...但是怎么加都加不对,因为它的重用机制,只要我强行去加的话,其他重用了此cell也会加上,查了半天,在cell里面有这样的一个函数
  • 这次给大家带来在HTML中select标签怎样实现单选和多选,在HTML中select标签实现单选和多选的注意事项有哪些,下面就是实战案例,一起来看一下。select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的...
  • 为el-select设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组。 默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。 <template> <el-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,977
精华内容 3,590
关键字:

怎样多选