精华内容
下载资源
问答
  • vue + elementUI 表格多选框选中 回显

    万次阅读 2019-07-24 19:22:51
    那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效: <el-table ref="multipleTable" :data="carData" :empty-t...

    项目开发使用的elemnetUI的table组件,牵扯到一个多选框的回显机制,这里记录一下。(最新方法在最下面)

    那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效:

    <el-table ref="multipleTable" 
              :data="carData" 
              :empty-text="emptytext"
              :header-cell-style="{ 'background-color': '#5F7ABF', 'color': '#fff','border': 'none' }"
              :row-key="getRowKeys"
              style="margin-top: 10px;width:100%" stripe border 
              // 主要事件就是如下几个
              @selection-change="handleChange"
              @select-all="handleSelectAll"
              @select="handleSelect">
                  <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
                  <el-table-column
                    label="车牌号"
                    align="center"
                    prop="vehicleNo"
                    min-width="150px">
                  </el-table-column>
                  <el-table-column
                      prop="activeStatus"
                      align="center"
                      label="状态"
                      min-width="120px">
                    <template slot-scope="scope">
                      <span v-if="scope.row.activeStatus === '在线'" style="color:#13CE66">{{ scope.row.activeStatus }}</span>
                      <span v-else>{{ scope.row.activeStatus }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="platformName"
                    align="center"
                    label="运营商平台"
                    min-width="150px"
                    show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                    prop="owersName"
                    align="center"
                    label="企业/业户"
                    min-width="150px"
                    show-overflow-tooltip>
                  </el-table-column>
                </el-table>

    都是elementUI自带的事件,详细了解可以去看官网

    elementUI  table的多选框是双向切换状态,即点击勾选,再点击取消勾选,所以要实现回显功能,首先应该判断多选框当前的状态,默认的select事件会携带两个参数,selection即当前勾选的所有数据的集合(数组),row即当前行的数据,代码如下:

    handleSelect(val, row) {
            if (this.firstIN === 1) { // 设置第一次进来才回触发事件
              /* 1 => add ; 0 => remove*/
              let flag = 0
              for (const i in val) {
                if (row.id === val[i].id) {
                  flag = 1
                  break
                }
              }
              if (flag === 1) {
                // 如果判断当前为添加则将当前勾选数据push到指定数组中
                this.superviseDate.push(row)
              } else {
                // 否则从数组中删除当前行数据
                for (const i in this.superviseDate) {
                  if (this.superviseDate[i].id === row.id) { this.superviseDate.splice(i, 1) }
                }
              }
            }
          },
    // select-all事件会勾选或者取消勾选当前页面的所有数据
    handleSelectAll(val) {
            if (this.firstIN === 1) { // 意思第一次点击不会执行hangleSelectAll里面的方法
              var v = this
              // remove
              if (val.length === 0) {
                for (const i in v.carData) {
                  for (const j in v.superviseDate) {
                    if (v.superviseDate[j].id === v.carData[i].id) {
                      v.superviseDate.splice(j, 1)
                      break
                    }
                  }
                }
              }
              if (v.superviseDate.length === 0) {
                for (const i in val) {
                  v.superviseDate.push(val[i])
                }
              } else {
                for (const i in val) {
                  let flag = false
                  for (const j in v.superviseDate) {
                    if (v.superviseDate[j].id === val[i].id) {
                      flag = true
                      break
                    }
                  }
                  if (!flag) { v.superviseDate.push(val[i]) }
                }
              }
            }
          },
    // selection-change事件
    handleChange(val) {
        if (this.firstIN === 0) {
          this.superviseDate = val
        }
      }

    上述多选框的这三个事件结合方能准确提炼出当前表格勾选的数据

    回显是在表格数据请求里面完成的,即在获取表格数据时,将之前获取的表格勾选的数据进行回显,每一次把当前页请求的数据和表格勾选数据做对比,如果相等则回显

    // 每一次执行数据请求的方法时,在请求成功的方法里执行回显
    // 在外层定义一个用来保存回显数据的数组checkedrow
                res.data.rows.forEach(item => {
                    this.superviseDate.forEach(val => {
                      if (val.vehicleNo=== item.vehicleNo) {
                        checkedrow.push(item)
                      }
                    })
                  })
                  this.$nextTick(() => {
                    checkedrow.forEach(row => {
                      this.$refs.multipleTable.toggleRowSelection(row, true) // 回显
                    })
                  })

    上述就是基本的table数据回显,但是因为业务需要,这个项目回显的是从input v-model绑定的值,因为在选择车辆时,点击确定,勾选数据就是赋值给input 绑定的值,这样的写法也可以避免很多bug,比如,如果用户删除input的值(input里面有一个x的清楚按钮),这是再打开车辆选择弹框,那么table数据是不需要回显的。代码如下:

    if (this.superviseDate || this.vehicleNo) {
                if (this.vehicleNo || this.selectNo) { // 数据回显
                  const checkedrow = []
                  let cidarr = []
                  let no = ''
                  if (this.vehicleNo) {
                    this.clickCheckArr = this.vehicleNo.split(',')
                  }
                  if (this.clickCheckArr.length > 0) no = this.clickCheckArr.join()
                  if (no.indexOf(',') !== -1) {
                    cidarr = no.split(',')
                  } else {
                    cidarr.push(no)
                  }
                  res.data.rows.forEach(item => {
                    cidarr.forEach(i => {
                      if (i === item.vehicleNo) {
                        checkedrow.push(item)
                      }
                    })
                  })
                  this.$nextTick(() => {
                    checkedrow.forEach(row => {
                      this.$refs.multipleTable.toggleRowSelection(row, true)
                    })
                  })
                } else {
                  this.$refs.multipleTable.clearSelection()
                }
              }

    以上方法适用于elementUI table之前的版本了,也不知道在何时饿了么已经对表格功能做了更新,以上需求利用table自带的方法便可以轻松实现

    Table-column增加属性:reserve-selection

    table增加属性:row-key

    增加以上属性便可以轻松实现。

    展开全文
  • 解决element多选框回显问题一、问题二、解决方法 一、问题 后端返回的多选框内容为一个字符串,而下拉框的内容必须放在数组中未多个字符串才可以显示,因此要对返回的数据进行处理。 二、解决方法 代码如下(示例...

    解决element多选框回显问题


    一、问题

    后端返回的多选框内容为一个字符串,而下拉框的内容必须放在数组中未多个字符串才可以显示,因此要对返回的数据进行处理。
    在这里插入图片描述
    在这里插入图片描述

    二、解决方法

    代码如下(示例):

    for(var i of res.rows){
      let old = i.operatorTypes && i.operatorTypes != null ? i.operatorTypes.toString() : null;
      let news = old != null ? old.split(',') : null;          
      i.operatorTypes = news ;
    }
    

    在这里插入图片描述

    展开全文
  • Java 单选框和多选框教程

    千次阅读 2020-04-21 11:10:26
    一、单选框: 1.新建 new JRadioButton 单选按钮 2.单选按钮都放到add()一个 按钮组new ButtonGroup()里(ButtonGroup只有单选功能,不存在布局功能,所以要第三步,单独...图片按钮_单选框_多选框; import javax.s...

    一、单选框:

    1.新建 new JRadioButton 单选按钮
    2.单选按钮都放到add()一个 按钮组new ButtonGroup()里(ButtonGroup只有单选功能,不存在布局功能,所以要第三步,单独添加JRadioButton 到容器)
    3.单独添加 单选按钮到容器,并设置布局

    代码:

    package GUI.Swing.图片按钮_单选框_多选框;
    
    import javax.swing.*;
    import java.awt.*;
    
    public class 单选框 extends JFrame {
        public 单选框() throws HeadlessException {
            this.setTitle("单选框");
            this.setVisible(true);
            this.setBounds(100,100,400,300);
            this.setDefaultCloseOperation(EXIT_ON_CLOSE);
            Container contentPane = this.getContentPane();
            /*
            单选框方法教程:
            new 3 个 JRadioButton 单选框,然后放到一个按钮组ButtonGroup里(按钮组只实现单选效果,不布局)
            在将3个单选按钮填加到容器并且布局
             */
            JRadioButton jarvan = new JRadioButton("jarvan");
            JRadioButton 半亩方糖 = new JRadioButton("半亩方糖");
            JRadioButton 时光 = new JRadioButton("时光");
            //add the JRadioButtons to the ButtonGroup
            ButtonGroup buttonGroup = new ButtonGroup();
            buttonGroup.add(jarvan);
            buttonGroup.add(半亩方糖);
            buttonGroup.add(时光);
            //add the JRadioButtons to the contentPane ,and set the Layout
            contentPane.add(jarvan,BorderLayout.NORTH);
            contentPane.add(半亩方糖,BorderLayout.CENTER);
            contentPane.add(时光,BorderLayout.SOUTH);
    
        }
    
        public static void main(String[] args) {
            new 单选框();
        }
    }
    

    效果图
    在这里插入图片描述

    二、多选框(其实单选框不用ButtonGroup也能达到类似效果):

    和单选框类似,JRadioButton 变成 check
    package GUI.Swing.图片按钮_单选框_多选框;
    
    import javax.swing.*;
    import java.awt.*;
    
    public class 多选框 extends JFrame {
        public 多选框() throws HeadlessException {
            this.setTitle("多选框");
            this.setBounds(100, 100, 400, 400);
            this.setVisible(true);
            this.setDefaultCloseOperation(EXIT_ON_CLOSE);
            /*
            复选框教程:
            1.新建 Checkbox()
            2.将复选框添加到容器
             */
            Checkbox jarvan = new Checkbox("jarvan");
            Checkbox shiGuang = new Checkbox("shiGuang");
            Checkbox 半亩方糖 = new Checkbox("半亩方糖");
            //add checkBox to the contentPane
            Container contentPane = this.getContentPane();
            contentPane.add(jarvan, BorderLayout.NORTH);
            contentPane.add(shiGuang, BorderLayout.CENTER);
            contentPane.add(半亩方糖, BorderLayout.SOUTH);
    
        }
    
        public static void main(String[] args) {
            new 多选框();
    
        }
    }
    
    

    效果图

    在这里插入图片描述
    #### 问题:汉字无法显示的编码问题。

    展开全文
  • 多选框的下拉列表的实现

    万次阅读 2015-08-28 14:01:06
    日常开发中,可能会遇到要做带多选框的下拉,如下图 是不是你想要的呢,下面来谈谈实现,我这个用的是一个bootstrap multiselect 插件,至于下载啥的网上到处都有 北京 上海 重庆

    日常开发中,可能会遇到要做带多选框的下拉,如下图


    是不是你想要的呢,下面来谈谈实现,我这个用的是一个bootstrap multiselect 插件,至于下载啥的网上到处都有

    <select id="area" class="form-control text-input-280" multiple="multiple">
                            <option value='1'>北京</option>
                            <option value='2'>上海</option>
                            <option value='3'>重庆</option>
                            <option value='4'>广州</option>
                        </select>


    对应js(要放在document.ready方法里)

    $('#area').multiselect({
                   nonSelectedText: '   请选择  ',
                   buttonWidth:'180px',
                   includeSelectAllOption: true,
                   selectAllNumber: false,
                   selectAllText: '全国',
                   allSelectedText: '全国'
            });


    至于每个字段啥意思试验下就知道了

    由于获取不到选中的值(1,2,3之类的,不是北上广),所以在源码中添加了方法

    修改bootstrap multiselect.js,添加一个方法

    $label.attr('vals', $element.attr('vals'));

    updateSelectedValue: function() {
                var selected = [];
                $('#area option:selected').each(function() {
                    selected.push([$(this).val(), $(this).data('order')]);
                });
                selected.sort(function(a, b) {
                    return a[1] - b[1];
                });
    
                var text = '';
                for (var i = 0; i < selected.length; i++) {
                    text += selected[i][0] + ', ';
                }
    
                text =text.substring(0, text.length - 2);
    
                $('.multiselect', this.$container).attr('vals', text);
            },

    这个函数需要在很多地方执行,如果大家不知道在哪些地方执行,那么找到源码中的 this.updateButtonText();方法后面就好了,有多个这个方法,就加多少个。

    这样的话就ok啦。


    通过F12,我们看到了我们想要多的值了


    

    展开全文
  • 选框的级联选择

    千次阅读 2018-01-16 01:18:44
    在做用户授权页面时,遇到了复选框的级联选择问题。参考已经有的关于级联选择的代码,但发现都或多或少有问题或者不满足自己的需求,因此自己写了一个。没有完全用jQuery,毕竟不是专攻前端,用起来并不是很顺手。 ...
  • 最多可选择三项,用户尝试选择第四项时,多选框变为disabled禁用状态 按照用户点击的顺序实时给出已选择的多选框所对应的序号 左下方实时提醒用户当前已选择了几项 实现思路: 设置一个用来存放已经选定的多选框,即...
  • 最近vue开发,遇到一个页面样式上的问题,单选框和多选框的样式显示问题,看下图片吧: 这是官方组件的显示效果,项目效果需求如下图 找了很多资料,最后终于解决了,边看代码边解释吧: 这里的.right是我自定义的...
  • 与数据打交道,可以是数据库操作,也可以是文件读写操作,甚至是redis缓存操作,总之与数据操作有关的都放在这里,也有人叫做dal或者数据持久层都差不多意思。为什么没有daoImpl,因为我们用的是mybatis,所以可以...
  • 其实这个在网上已经有诸多实现了,我只是也来凑合凑合,没别的意思,只是不想把这个功能写个复杂,尽量按照自己的理解简单化。简单、而且功能又实用,我觉得就足够了!  对于复选框的全选与反选,其实用的最多...
  • 选框是一种可同时选中项的基础控件,他是什么模样来,来几张图说明下 总之这个是GUI中使用频率比较高的一种控件! 二. LVGL GUI复选框小部件和样式 有两种小部件: LV_CHECKBOX_PART_BG:背景 LV_...
  • 选框和单选框的理解

    千次阅读 2019-07-06 19:49:07
    html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择项,甚至全选。 当type="radio"时,控件为单选框 当type="checkbox"时,控件为复选框 了解下...
  • 致 Python 初学者

    万次阅读 多人点赞 2019-11-10 00:03:26
    来到这里的每一位同学,应该大致上学习了很 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门...
  • layui 复选框checked赋值

    千次阅读 2019-11-13 18:14:50
    <div class="layui-input-inline"> <input type="checkbox" id="feedback" lay-skin="primary" title="正确用药"> <input type="checkbox" id="feedback" lay-skin="primary" title="血糖监测"&...
  • 预览图如下: 思路: 1.用for循环,把每一个列表都加上一个状态码,包括整个大的,然后设置点击方法,设置data-的独立数据,然后用三元运算判断 ...这个主要是运用for循环的,如果有更好的方法,欢迎探讨
  • 选框Checkbox的只读设置

    千次阅读 2019-02-20 14:53:43
    最初,第一反应是使用readonly属性,但在复选框中,决定复选框值的是checked,而不是文本框等输入框的value值。所以这里使用readonly属性,会没有效果。  后面又尝试使用disabled属性,发现确实值不能变了。但是...
  • 官网上有说明如何使用复选框,但是说的不详细,今天项目上用到了,el-table标签初始化默认加载选中的问题, 网上找了好多文章,大多是说使用这段代码, this.$refs.multipleTable.toggleRowSelection(row); 但是...
  • checkbox(复选框)和radio(单选按钮)的区别与详解

    万次阅读 多人点赞 2019-03-13 20:01:42
    选中一个复选框后,再次点击它,即可取消选中 选中一个单选按钮后,再次点击它,不能取消选中 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;...
  • VBA写一个下拉复选框,以及循环判断,附代码 图1: 图2 图2中的复选下拉框框显示图1中的配置。 VBA代码 Private Sub ListBox2_DblClick(ByVal Cancel As MSForms.ReturnBoolean) Dim i&, s$ With...
  • 获取单选框和判断复选框是否选中

    千次阅读 2019-07-08 09:34:25
    一、怎么通过jquery来获取到单选选中的值呢? 例子:获取一对选择性别的单选 单选的代码: 在获取之前说明一下: 1. 一对单选的name值要一样才能实现单选跳转效果, 2. 单选的value值就是代表该的单选...
  • tkinter获取复选框(Checkbutton)的值

    千次阅读 2020-01-14 13:49:42
    定义GUI: from tkinter import * # 初始化Tk() myWindow = Tk() # 设置标题 myWindow.title('Python GUI Learning') myWindow.... 对复选框进行操作后,点击按钮输出信息: 欢迎访问我的个人博客:机器学习之路
  • 简单验证复选框,单选框必填 例子代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit">...
  • python-Tkinter复选框(四)

    千次阅读 2018-06-01 16:26:07
    python-Tkinter复选框(四)from tkinter import * ''' 复选框:Checkbutton() ''' root = Tk() list1 = ['李白','杜甫','李清照','唐伯虎','王昭君','西施'] v=[] for tem in list1: v.append(IntVar()) b = ...
  • 如上的mybatis指代的意思如下: foreach元素的属性主要有 item,index,collection,open,separator,close。 item表示集合中每一个元素进行迭代时的别名. (直接找到对应的delList集合里面的所有元素,...
  • layui数据表格复选框回显

    千次阅读 2020-01-08 17:25:35
    必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true 上面这段话描述的不清楚,他的意思是当我们想默认全选的时候就在列上添加这个属性. 其实这个属性是可以在每一行数据上面单独添加的...
  • 小甲鱼零基础入门学习python笔记

    万次阅读 多人点赞 2019-08-14 11:06:30
    004 改进我们的小游戏 •第一个改进要求:猜错的时候程序提示用户当前的输入比答案大了还是小了 与操作and •第二个改进要求:程序应该提供次机会给用户猜测,专业点来讲就是程序需要重复运行某些代码。...
  • VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态。这东西比较复杂,通过相应的值来控制的。...
  • 今天在学习android多选框的时候遇到一个优点意思的小问题;见注释部分 final String[] mItems = { "item0", "item1", "itme2", "item3", "itme4", "item5", "item6" }; ArrayList MultiChoiceID = new ArrayList...
  • JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id = document.getElementById("id"); alert($id.checked);   Notes: JQuery中,is函数里的必须要有冒号,否则不见效;
  • 下拉列表: 下拉列表是指允许网页浏览者从下拉式菜单中选择某一项,我们通常会在网页中看到各种下拉列表,这是一种最节省空间的方式。正常情况下,浏览者只能看见一个选项,单击选项按钮打开菜单后才能看到...
  • 选框点击事件JQuery

    千次阅读 2019-04-24 23:02:17
    选框点击事件JQuery 今天在做一个复选框事件,就是点击一个复选框按钮发生相应的事件的功能时,遇到了一个问题,就是点击之后没有发生预期想要发生的事件,一开始以为是没有监听到,但是检查了好多遍,也确实监听...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,067
精华内容 36,426
关键字:

多选框的意思