zoukankan      html  css  js  c++  java
  • 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的插件。
  • 相关阅读:
    让 awesome , emacs , fcitx 一起工作(为awesome添加环境变量,和开机运行脚本)
    告别windows
    使用 Emacs PO mode 编辑 django PO 文件
    [转] Awesome autostart. [为awesome 设置环境变量]
    让 awesome 支持双屏
    解决长email在表格td中不自动换行的问题 & CSS强制不换行
    使用pdb (ipdb) 调试 python 程序
    ClickOnce 部署概述
    SQL Server 2005 CE基础概要
    运算符优先级 (TransactSQL)
  • 原文地址:https://www.cnblogs.com/mamimi/p/9820014.html
Copyright © 2011-2022 走看看