angular写一个列表的选择全选交互组件的示例


Posted in Javascript onJanuary 22, 2018

开发业务后台经常要用到表格里的选择,全选这种交互。而且不同系统不同场景的UI还不一样。比如:表格里就是简简单单的checkbox;图片列表这种,UI设计师会搞点花样,用户选择一下,会在图片上盖一层半透明的勾选提示等等。我们的系统是用angular 1.X版本开发。所以,我采用angular的装饰性指令编写几个指令,把它们配合在一起使用,来封装这样的场景。这与之前我们遇到的组件的开发思路又不太一样。我们先来分析一下需求及扩展点。

需求分析

  1. 实现单选;
  2. 实现全选;
  3. 可以设置允许多选还是单选。如果多选,有最大选择数限制;
  4. 实现跨页选择。这里的跨页选择指的是切换到下一页后,还能记住上一页的选择。以前我们遇到的选择往往都是只记住当前页,一旦刷新就清空了。这是一个不同的地方;
  5. 要求自己定义UI及交互触发;

设计思路

  1. 这里其实是相同的地方就是选择的交互逻辑,所以重点考虑如何封装这个逻辑。这里的交互逻辑主要是: 2. 点击全选; 3. 点击列表item的选择切换。如果是单选,要清空之前的选择;如果是多选,要检查是否超过最大选择限制;
  2. 再来看一下应用场景相同的地方。我们将设定上下文肯定有一个list数组,一个已选数组。 因此,我们得到如下的指令。

moSelect指令

封装全选逻辑的指令。适应场景:

  1. 有一个list集合;
  2. 每一个item是一个对象;
  3. 跨页选择;

使用方式

<table mo-select="list" select-all-name="isSelectedAll" item-name="item" item-select-name="select" selected-list-name="selectedList" init-selected-list="initSelectedList" allow-multiple-select="false" select-count-limit="2" item-equal-func="itemEqual">
            <thead>
              <tr>
                <th><input type="checkbox" ng-checked="isSelectedAll" mo-select-all></th>
                <th>商户名称</th>
                <th>电话</th>
                <th>地点</th>
                <th>更新时间</th>
                <th>播放</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="item in list" mo-select-single >
                <td>
                   <input type="checkbox" ng-checked="item.select" mo-select-single1 > 
                </td>
                <td>{{item.name}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.addr}}</td>
                <td>{{item.updateTime|msDateFormat:'YYYY-MM-DD'}}</td>
                <td>
                  <div audio-playable="item.url" play-trigger=".audio-play" pause-trigger=".audio-pause">
                    <button class="btn btn-primary audio-play" ng-show="!audioInfo.playing" >播放</button>
                    <button class="btn btn-primary audio-pause" ng-show="audioInfo.playing" >暂停</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

说明:

1、主要通过三个指令实现全选相关的代码封装;

2、mo-select 是容器指令,定义了全选,以及单选 item 的方法,定义在列表容器dom上;

  1. mo-select的 值是scope的 list 对象,与 ng-repeat 里的 items 一致;
  2. item-name :告诉指令,每一项的对象名,指令会通过该名称在每一项的scope里查找。与ng-repeat里的 item 一致;
  3. select-all-name :全选的状态变量。默认: isSelectedAll
  4. item-select-name : 记录的每一项对象是否选中的变量名,将会存储在 item 对象上,为了避免与现有业务字段重合,可以配置,也可以不配置,默认: select ;
  5. selected-list-name :已选对象列表的变量名。默认: selectedList ;
  6. init-selected-list :初始化选择对象列表。该变量只用于初始化,类似 vue 组件里的 prop 属性;
  7. allow-multiple-select :是否允许多选;
  8. select-count-limit :如果允许多选,最多可以选择多少个。如果不传,则无限;
  9. item-equal-func :对象判等函数,用于封装业务对象自己的判等原则。比如:有些场景是根据id,有些是根据其他业务逻辑。如果不传,默认根据对象的id属性;

3、mo-select-all 全选指令。定义在全选 dom 上,一版是一个 input checkbox 。其值表示在当前scope保存的是否全选的变量名;
4、mo-select-single 单选指令。 定义在每一项 dom 上。可以有两个地方:

  1. 定义在自己的 input chebox 上
  2. 定义在 input 的容器上。类似 tr ,实现点击整行选中。也可以定义在某个单个元素上。

如果要获取已选项,直接在当前scope获取 selected-list-name 指定的变量名即可。

使用步骤:

  1. 在容器定义 mo-select ,根据实际需求,配置相关参数。必须: mo-select , item-name ;
  2. 在需要全选的按钮 dom 上添加 mo-select-all 指令,不需要配置任何参数;
  3. 在 ng-repeat 的单项模板里,在需要添加单选交互的 dom 上添加 mo-select-single 指令,不需要配置任何参数;
  4. 完成配置。

注意事项

  1. mo-select 的值一定要和ng-repeat的 items 一致;
  2. item-name 的值一定要和ng-repeat的 item 一致;

总结

这样的指令在我们的业务开发中使用还是很灵活的。可能看起来配置项有点麻烦,其实大多数都是可以采用默认值的。我们看看它的不同表现形式:

angular写一个列表的选择全选交互组件的示例

angular写一个列表的选择全选交互组件的示例

代码不多,200来行,代码是从项目里摘出来的,不是很复杂,就没做demo,这里分享出来,代码链接。 有兴趣要改进的同学可以拿去随便改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
vue-router 组件复用问题详解
Jan 22 #Javascript
详解webpack多页面配置记录
Jan 22 #Javascript
详解html-webpack-plugin用法全解
Jan 22 #Javascript
js构造函数创建对象是否加new问题
Jan 22 #Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 #Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 #Javascript
Angular17之Angular自定义指令详解
Jan 21 #Javascript
You might like
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php生成短网址示例
2014/05/05 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
深入理解Python中的super()方法
2017/11/20 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python 格式化输出百分号的方法
2019/01/20 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
紧急通知
2015/04/17 职场文书
高中同学会致辞
2015/08/01 职场文书
Python基本数据类型之字符串str
2021/07/21 Python