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. 通过EXPLAIN分析低效SQL的执行计划

    explain select * from film where rating>9\G; select_type 表示select的类型 SIMPLE 代表简单表,不用表连接或子查询 PRIMR ...

  2. 查看 Apache并发请求数及其TCP连接状态【转】

    查看 Apache并发请求数及其TCP连接状态 (2011-06-27 15:08:36) 服务器上的一些统计数据: 1)统计80端口连接数netstat -nat|grep -i "80& ...

  3. css img换行之后有空隙

    这样的2个图片换行之后有空隙<img src="img/qiche.jpg" /> <br /> <img src="img/qiche.j ...

  4. 【转】<string> <string.h> <cstring>的区别

    #include < string.h > void main() { string aaa = " abcsd d " ; printf( " lookin ...

  5. JavaSE基础篇—MySQL基础知识点

    MySQL MySQL是一种关系数据库管理系统,是一种开源软件.可搭配PHP和Apache可以有更好的性能,也可以工作在众多的平台上.Orcale是一个数据库创建多个用户,MySQL是一个用户创建多个 ...

  6. 跨域资源共享 CORS 详解(转)

    add by zhj: 公司在一个web产品上,做前后端分离,前后端提供独立的服务,使用不同的域名,通过http进行交互,在 前端,会涉及到跨域访问的问题,前端使用了CORS,后端同时需要做相应修改, ...

  7. 09_Python深拷贝、浅拷贝

    一.循环列表,删除其中的元素 l1 = [1,2,3,4,5,6,7]  循环删除奇数位元素 1.正序循环删除,会出现越界情况,所以采用倒叙的方式删除 l1 = [1,2,3,4,5,6,7] for ...

  8. Apache 配置SSI速记

    1. 启用模块 httpd.conf LoadModule filter_module modules/mod_filter.so 2. <Directory 的Options配置中增加Incl ...

  9. 使用zii.widgets.CDetailView显示内容

    Yii里的CDetailView可以用来显示详细内容,有时会遇到显示的html内容是被转义过的,也就是原本是要显示html样式的,结果显示出来的内容却是把html当作普通文本了. 先看一个CDetai ...

  10. Python之Django rest_Framework(3)

    补充:  为什么要前后端分离:       a.因为前端它有自己框架,这样它的效率就非常高       b.不做前后端分离,公司如果既有客户端,又有app这种情况下你就的写两遍 django rest ...