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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 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调用Java对象的方法
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python分类测试代码实例汇总
2020/07/23 Python
基于Python实现粒子滤波效果
2020/12/01 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
深圳茁壮笔试题
2015/05/28 面试题
医学生实习自荐信
2013/10/01 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
法定代表人证明书
2014/11/28 职场文书
社会实践活动总结格式
2015/05/11 职场文书
活动经费申请报告
2015/05/15 职场文书
民事上诉状范文
2015/05/22 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python