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. JSP之JSTL_functions

    <?xml version="1.0" encoding="UTF-8" ?> <taglib xmlns="http://java ...

  2. 20170510 mysql导入导出csv

    一开始没加FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"' LINES TERMINATED BY '\n' 导致导出的csv没有进行分 ...

  3. python_如何去除字符串中不想要的字符?

    问题: 过滤用户输入中前后多余的空白字符 '    ++++abc123---    ' 过滤某windows下编辑文本中的'\r': 'hello world \r\n' 去掉文本中unicode组 ...

  4. PHP如何读取json数据

    1的 <?php $json = '{"a":1,"b":2,"c":3,"d":4,"e": ...

  5. 主备(keepalived+nginx)

    实验环境 系统: centos 6.9 mini 机器名   ip                                   虚拟ip kn1     192.168.126.10 kn2  ...

  6. _beginthread和CreatThread的区别

    转自:http://www.jb51.net/article/41459.htm 我们知道在Windows下创建一个线程的方法有两种,一种就是调用Windows API CreateThread()来 ...

  7. 计算机中RAM和ROM

    1.RAM(RamdomAccessMemory): 易挥发性随机存取存储器,高速存取,读写时间相等,且与地址无关,如计算机内存等. 2.ROM(Read Only Memory): 只读存储器.断电 ...

  8. ASP.NET Core 2.0 : 一. 概述

    为什么要使用 ASP.NET Core? .NET Core 刚发布的时候根据介绍就有点心里痒痒, 大概看了一下没敢付诸于行动,  现在2.0发布了一段时间了, 之前对其"不稳定" ...

  9. 关于spring通知中propagation的7种配置《转载》

    <转载>:http://nannan408.iteye.com/blog/1754882

  10. bootstrap select2 使用简单介绍

    1. 基本属性配置: $("#select2-id").select2({ templateResult : formatState, // 列表带图片 templateSelec ...