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. 主页面刷新 illegalStateException:stream

    其实是:jsonmappingexception:no serializer found for class 由于后台错误堆栈打印很快,只看到illegalStateException:stream ...

  2. git log 查看指定文件的提交记录

    使用git log除了可以看整个仓库的提交记录外,还可以指定某个文件的提交记录. 1. 查看指定文件的历史提交记录 命令: git log -- <file> 说明:只需要指定文件名称. ...

  3. linux_发邮件

    如何通过linux发邮件? 邮箱配置文件: /etc/mail.rc 1. 邮箱文件配置 vim /etc/mail.rc # 添加一下数据 set from=beimen@163.com smtp= ...

  4. string用法总结

    要想使用标准C++中的string类,必须要包含#include <string> 注意是<string>而不是<string.h>,带.h的是C语言中的头文件 s ...

  5. junit断言总结

    我们平时编写自己的测试类,如果没有断言,那么就没写测试的必要了. JUnit框架用一组assert方法封装了最常见的测试任务.这些assert方法可以极大地简化单元测试的编写. Assert类包含了一 ...

  6. asp.net core如何自定义端口/修改默认端口

    .net core运行的默认端口是5000,但是很多时候我们需要自定义端口.有两种方式 写在Program的Main方法里面 添加 .UseUrls() var host = new WebHostB ...

  7. SQL Server错误严重性级别和异常处理

    关于SQL Server的错误严重性级别的说明,强烈认真看一下下面的两个链接 脱机帮助 ms-help://MS.SQLCC.v9/MS.SQLSVR.v9.zh-CHS/sqlerrm9/html/ ...

  8. Java 解压zip压缩包

    因为最近项目需要批量上传文件,而这里的批量就是将文件压缩在了一个zip包里,然后读取文件进行解析文件里的内容. 因此需要先对上传的zip包进行解压.以下直接提供代码供参考: 1.第一个方法是用于解压z ...

  9. Spring源码解析一(框架梳理)

    整体架构 打算开始写这个系列,不为上首页,也不为博取多少关注,只有一个目的:梳理知识,扩充思路:废话不多,开始吧.第一步,大家去spring的官方github下面去下载它的源码,具体的自己谷歌,我已经 ...

  10. Django的ModelForm

    基于django.forms.ModelForm:与模型类绑定的Form 先定义一个ModelForm类,继承ModelForm类 from django.forms import ModelForm ...