git地址:https://github.com/jiqianqin/filters

不断优化中,欢迎加入讨论~

filter-tags

效果图:

参数 说明 格式 备注
data
展示的数据

[{ "key": "areaRange","desc": "面积(㎡)",

"nodeList": [

{"key": 1,"desc": "50m²以下"},

{"key": 2,"desc": "50-70m²" }]

},{

"key": "toward","desc": "朝向",
"nodeList": [

{"key": 1,"desc": "东" },
{"key": 2,"desc": "南"}]
}]

 
sureBtn
确定按钮
sureBtn:"确定"
 
resetBtn
清空按钮
resetBtn:"清空选项"
 
selected
初始化选择项
selected:{
areaRange:[1,3,5,7],toward[1,2]}
 
clickHandle
点击具体的标签
clickHandle:function(data){}
data为此次点击的数据。格式为

{ key:"1" , type:"areaRange" }

comfirm
 点击确认后触发函数

comfirm:function(data){}
data为所有的选中的数据 {"areaRange":["1","3","5","7"],"toward":["3","4"]}
multiselectEnable
是否支持多选
multiselectEnable:false
false:不支持多选 true:支持多选

filterSigle

效果图

参数 说明 格式 备注
data
 展示数据

data:[
{"key": null,"desc": "全部"},
{"key": 1,"desc": "100万以下"},
{"key": 2,"desc": "100-150万"}]
 
settingEnable
是否支持自定义
   
settingType
自定义的样式
settingType:"interval"
 
settingTip
区间
settingTip:"区间"
 
placeholderLow
最低区间提示
placeholderLow:"最低区间"
 
placeholderHigh
最高区间提示
placeholderHigh:"最高区间"
 
sureBtn
确定按钮显示
sureBtn:"确定"
 
selected
  初始化选择的数据

若是单选,则传递字符串(对应要选中的值)

selected:"2"

若是自定义的值,则传递数组
selected:[100,200]
 
clickHandle
点击事件
 
clickHandle:function(data){}
 data为字符串,key的值
comfirm
点击确认
comfirm:function(data){}

data:{

intervalLow:"上区间的值",
intervalHigh:"下区间的值"

}

       

filterMultiple

效果图

参数 说明 格式 备注
data
展示数据 data:

[{"key": 1,"desc": "一室"},
{"key": 2,"desc": "二室",
{"key": 3,"desc": "三室"}]
 
sureBtn
确定按钮展示文字
sureBtn:"确定"
 
selected
 初始化选择的值

selected:[1,2]
 key值为1和2的会默认选中 
comfirm
点击确认按钮后执行函数
comfirm:function(data){}
data:{

selectList:

[1,2],

selectFlag:0};

// selected:已经选择的数据

//selectFlag 0:全不选 1:全选 2:部分选择

selectAllEnable
是否支持全选
selectAllEnable:true
true:支持 false:不支持
selectAllTip
全选显示字样
selectAllTip:"全部"
 
selectAllHandle
点击全选后触发函数
selectAllHandle:function(){}
 
clickHandle
点击每一项触发函数
clickHandle:function(key){}
key:1(此次点击的数)


filterGrade
效果图

clickHandle

参数 说明 格式 备注
data
展示的数据
[{
key": null,
 "desc": "全部",
 "nodeList": [{"key": null,"desc": "全部"}]
},{ "key": "310101","desc": "黄浦",
 "nodeList": [
{"key": null, "desc": "全部"},
{"key": "HP01","desc": "董家渡"},
{"key": "HP02","desc": "打浦桥"}
{"key": "HP04","desc": "黄浦滨江"}]
},
{
"key": "310104",
 "desc": "徐汇",
 "nodeList": [
{ "key": null,"desc": "全部"},
{ "key": "XH01","desc": "漕河泾"},
{ "key": "XH02","desc": "长桥"},
{ "key": "XH03","desc": "华东理工"},
{ "key": "XH04","desc": "华泾"}
]},
 
level
显示层级数目
level:

最多为3

clickHandle
点击事件
clickHandle:function(){}
 
percent
展示的百分比,整行为99
percent:[,,]
 
 

filter-api文档的更多相关文章

  1. 如何使 WebAPI 自动生成漂亮又实用在线API文档

    1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...

  2. vs2010代码注释自动生成api文档

    最近做了一些接口,提供其他人调用,要写个api文档,可是我想代码注释已经写了说明,能不能直接把代码注释生成api?于是找到以下方法 环境:vs2010 先下载安装Sandcastle 和Sandcas ...

  3. grunt api 文档

    Grunt docs Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 grunt-cli npm install grunt-cli -g 注 ...

  4. 自动生成api文档

    vs2010代码注释自动生成api文档 最近做了一些接口,提供其他人调用,要写个api文档,可是我想代码注释已经写了说明,能不能直接把代码注释生成api?于是找到以下方法 环境:vs2010 先下载安 ...

  5. WebApi生成在线API文档--Swagger

    1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...

  6. SpringBoot入门教程(二十)Swagger2-自动生成RESTful规范API文档

    Swagger2 方式,一定会让你有不一样的开发体验:功能丰富 :支持多种注解,自动生成接口文档界面,支持在界面测试API接口功能:及时更新 :开发过程中花一点写注释的时间,就可以及时的更新API文档 ...

  7. SpringBoot系列: 使用 Swagger 生成 API 文档

    SpringBoot非常适合开发 Restful API程序, 我们都知道为API文档非常重要, 但要维护好难度也很大, 原因有: 1. API文档如何能被方便地找到? 以文件的形式编写API文档都有 ...

  8. android api文档:intent阅读笔记

    intent是几大组件之间进行通信的组件.可以包含以下几个部分: component:指明了处理该intent的对象. Action类似于一个函数名,规定了其他部分的对应用法: The action ...

  9. geoserver整合swagger2支持自动生成API文档

    网上各种博客都有关于swagger2集成到springmvc.springboot框架的说明,但作者在整合到geoserver中确碰到了问题,调试一番最后才解决,遂总结一下. swagger2集成只需 ...

  10. gateway聚合swagger3统一管理api文档

    springboot微服务整合swagger3方法很简单,下文会演示.但是在分布式项目中如果每个微服务都需要单独的分开访问获取接口文档就不方便了,本文将详细讲解springcloud gateway网 ...

随机推荐

  1. HX711初步处理记录

    参考文档为极客工坊大神记录 http://www.geek-workshop.com/forum.php?mod=viewthread&tid=2315&highlight=hx711 ...

  2. Azure Powershell使用已有特殊化非托管磁盘创建ARM虚拟机

    生成已有特殊化非托管磁盘的方法主要有如下两种: 1.使用StorageExplorer存储管理工具,复制特殊化磁盘到一个新的容器下 2.New Portal中删除虚拟机,默认vhd文件会保留在存储账号 ...

  3. scrapy_Response and Request

    scrapy中重要的两个类是什么? Requests.Response 什么是Requests? 网页下载 有哪些参数? url callback headers     # 头部信息 cookie ...

  4. Spark 读写hive 表

    spark 读写hive表主要是通过sparkssSession 读表的时候,很简单,直接像写sql一样sparkSession.sql("select * from xx") 就 ...

  5. ansible-playbook相关

    获取目标主机的信息 ansible all -m setup -a "filter=ansible_os_family" 不执行仅测试 ```sh 安装一个zabbix-agent ...

  6. Tomcat(五):nginx/httpd + tomcat及负载均衡tomcat

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  7. python并发编程之多进程(实现)

    一.multipricessing模块的介绍 python中的多线程无法利用多核优势,如果想要充分的使用多核CPU资源,在python中大部分情况下需要用多线程,python提供了multiproce ...

  8. sed运用

    流编辑器sed sed简介 sed是stream editor的缩写,一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern ...

  9. IIS6/7 配置操作

    关于httpHandlers.handlers和httpModules.modules的那些配置中的各种问题   在web.config中配置httpHandlers.handlers和httpMod ...

  10. editplus 常用正则

    EditPlus的查找,替换,文件中查找支持以下的正则表达式: Expression Description\t Tab character.\n New line.. Matches any cha ...