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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
详解JavaScript栈内存与堆内存
Apr 04 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
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
专升本自我鉴定
2013/10/10 职场文书
工作疏忽检讨书
2014/01/25 职场文书
十八届三中全会感言
2014/03/10 职场文书
博士生导师推荐信
2014/07/08 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
大学生支教感言
2015/08/01 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA