table样式的下拉框(angularjs)

前言

虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架。

一:实现的样式

 

二:实现包括的功能点

1:下拉框内容是表格,类似于一个弹窗

  • 表格内容最多六行,超出的显示滚动条,表头固定,可滚动。
  • 支持键盘上下键,进行当前项的选择
  • 支持键盘的enter选择键,并支持回调函数,进行页面的数据绑定
  • 支持加载后台数据
  • 支持绑定指令的input框对数据的搜索功能
  • 支持input框填写的内容的校验,如果内容是手写的,则清空,必须是从选择框内选择的(点击选择或者enter选择)等功能
  • 支持后台无数据时,显示无加载内容。
  • 在请求后台时,在当前下拉框添加加载等待动画。

2:下拉内容是常见的select框形式

  • 内容与表格基本一致
  • 存在即有使用的地方,可根据自己的需要决定是否使用。

功能点总结:其实与原生的select下拉框形式一样,只不过是进行了一次封装,添加了与后台交互的逻辑。没办法,所有的实现都是因为需求的存在,说激进点,如果不是产品想出这个需求,我也不会去做。添加一句:万恶的产品。

三:实现的逻辑

封装一个angularjs的指令,通过传参将指令需要用到的数据从父层传到子层。指令控制如何展示与一些交互。父子只有数据的传输,没有操作上的控制。

首先,我们知道angularjs指令可以获取到父元素的方法,双向绑定的数据,常量字符串等。

  1. 对当前input框进行指令绑定,进行父子级的通信,传参大概包括:数据请求函数,渲染的类型(table select data city等,只要有数据,再进行页面UI修改即可),下拉弹窗的大小值指定,没有数据时下拉框显示的新建按钮名称与绑定的事件,当前input上绑定的model(用来做清空input)

  2. 当所需要的传参数据全部都有时,需要对下拉弹窗里的内容进行事件绑定,包括:input的focus调用后台接口,blur进行input的清空(填写的数据不符合要求时),上下键对当前渲染的项进行选择,enter键触发数据绑定。
  3. 根据数据进行渲染弹窗类型,使用ng-if进行弹窗内容的UI显示。比如ng-if==table ng-if==select 进行弹窗渲染。

四:实现的代码思想分析:

  1. angularjs的指令进行父子通信时,需要注意的就是scope的取值,传函数表达式时,scope = ‘&’ ,传model时 scope = ‘=’ ,传固定值时 scope='@' 
  2. 一些函数写在父级ctr里,比如请求后台的函数。因为不同的页面需要,可能数据返回成功后有不同的操作,所以这个不好封装在指令里,需要保持指令的活性,如果你不想将请求后台的数据放在父controller里,也可以将请求地址传给指令,这样就可以在指令(子层)进行请求。
  3. table渲染时,也是封装了一个指令,这样之后在需要用到这个table指令时,可以较好较快的抽出使用

五:重点分析下拉框的table实现

  本文只去进行table的实现,这样用户可以自己进行扩展。

  1. 指令html
  2. 父级ctroller
  3. 指令js

 

六:后续扩展与补充

  1. 如果在进行后台数据交互时,只针对当前input框内的model进行操作,可以将后台接口传到指令里,在指令里进行数据的交互,这样就完全脱离父级,成为一个独立的指令,相当于一个angularjs的插件。

 

转载于:https://www.cnblogs.com/mamimi/p/9820014.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值