基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
首先看一下实现效果:
现在JSON用于数据的封装和管理越来越流行,一直想着通过JSON实现很多的小工具,比如多条件筛选、表格定制化、数据验证、tree树等等,最近没事就用JSON和JQuery实现了类似于京东和淘宝多条件筛选功能,下面会对代码进行解释,并有对应的demo提供给大家。
<div id="filter">
</div>
<script>
//加载事件
var data=[
{
"url":"",
"title": "品牌",
"name":"pinpai",
"multiple": true,
"data": [
{
"id":"-1",
"css":"common",
"name":"all",
"value": "全部"
},
{
"id":"1",
"css":"common",
"name":"1",
"value": "惠普"
},
{
"id":"2",
"css":"common",
"name":"2",
"value": "海尔"
},
{
"id":"3",
"css":"common",
"name":"3",
"value": "微星"
}
]
},
{
"title": "价格",
"name":"jiage",
"multiple": true,
"data": [
{
"id":"-1",
"css":"common",
"name":"1",
"value": "1-2999"
},
{
"id":"1",
"css":"common",
"name":"2",
"value": "3000-5000"
},
{
"id":"2",
"css":"common",
"name":"3",
"value": "5000-7000"
},
{
"id":"3",
"css":"common",
"name":"4",
"value": "7000-9000"
}
]
},
{
"title": "平台",
"name":"pintai",
"multiple": false,
"data": [
{
"id":"-1",
"css":"common",
"name":"1",
"value": "全部"
},
{
"id":"1",
"css":"common",
"name":"2",
"value": "Inter平台"
},
{
"id":"2",
"css":"common",
"name":"3",
"value": "AMD平台"
},
{
"id":"3",
"css":"common",
"name":"4",
"value": "VDI平台"
}
]
}
];
$('#filter').comboboxfilter({
scope: 'FilterQuery2',
data:data,
onChange:function(newValue){
$('#demo_value').val(newValue);
}
});
</script>
利用JSON封装需要搜索条件字段,调用comboboxfilter自定义方法进行条件的初始化和动态搜索、展示功能。
下面对JS方法进行解释:
/**
* Author:mengbing
*
* Date:2017-12-08
* http://www.allenyMiky.com
*
*/
(function ($) {
//初始化绑定事件
$(function () {
});
$.fn.extend({
comboboxfilter: function (ops) {
if (typeof (arguments[0]) != typeof ("string")) {
return $.fn.comboboxfilter.methods["init"](this, ops);
} else {
return $.fn.comboboxfilter.methods[arguments[0]](this, arguments);
}
}
});
//方法
$.fn.comboboxfilter.methods = {
options: function (target) {
var opts = $(target).data("comboboxfilter").options;
return opts;
},
init: function (target, ops) {
var $this = this;
var options = $.extend({}, $.fn.comboboxfilter.defaults, ops);
$(target).data("comboboxfilter", { options: options });
$(target).removeClass('hotel-filter-list filter-list-has-more hotel-filter-list-min').addClass("hotel-filter-list filter-list-has-more hotel-filter-list-min");
$.each(ops.data,function(key,value){
var listcontainer = $('<div class="con"></div>').addClass(!value.multiple ? "radio" : "checkbox");
if (options.unlimit) {//添加条件集合名称
var anyNode = $('<ul class="any filter-unlimit filter-tag selected"><li>'+ value.title + '</li></ul>');
listcontainer.append(anyNode);
}
$('.'+value.name).removeClass('hotel-filter-list filter-list-has-more hotel-filter-list-min').addClass("hotel-filter-list filter-list-has-more hotel-filter-list-min");
listcontainer.append('<ul class="list '+value.name+'"></ul>');
$(target).append(listcontainer);
$.fn.comboboxfilter.methods["load"](target,value);
});
//具有分组
if (options.scope) {
$(target).attr('scope', options.scope);//添加自定义分组属性
if ($('#' + options.scope).length>0) {
} else {
var node = $('<div id="' + options.scope + '" class="hotel-filter-list "><strong class="tit">已选</strong><div class="con selected-query"><ul class="list"><li class="filter-query-clear"><a class="J_FilterQueryClear" href="javascript:;">全部清除</a></li></ul></div></div>');
node.find('.J_FilterQueryClear').unbind('click').bind('click',function() {//全部清除事件
$('div[scope="' + options.scope + '"]').comboboxfilter('clear');
});
$('div[scope="' + options.scope + '"]:eq(0)').before(node);
}
}
},
load: function (target, opts) {
var $this = this;
var options = $.extend({}, $.fn.comboboxfilter.methods["options"](target), opts);
if (opts.url) {
$.ajax({
type: 'post',
data: options.param,
url: options.url,
success: function(data) {
if (typeof (data) == typeof ("string")) {
data = $.parseJSON(data);
}
var listTarget = $(target).find('.list').html('');
$this.setData(listTarget, options, data, target);
},
error: function(e) {
$this.onError(e);
}
});
} else {
var tag='.'+opts.name;
var listTarget = $(target).find(tag).html('');
$this.setData(listTarget, options, options.data, target);
}
},
setData: function (target, options, data, targetContain) {
var $this = this;
$.each(data, function (i, item) {
var listnode = $(' <li></li>');
var clicka = $('<a class="filter-tag" href="javascript:;" data-value="' + item['value'] + '" data-text="' + item['value'] + '">' + item['value'] + '<i></i></a>').data('data', item['value']);
clicka.unbind('click').bind('click', function (e) {
if (clicka.hasClass('selected')) {//验证是否被选择,已经选择则取消选择,反之选择
clicka.removeClass('selected');//不可去掉(为了计算Value的正确性)
} else {
if (!options.multiple) {//单选执行
var $list=$('#' + options.scope).find('li');
$.each($list,function(key,value){
var str=clicka.text();
$.each(options.data,function(n,m){
if(value.innerText==m.value){
$(value).remove();
$('.'+options.name).find('.selected').removeClass('selected');
}
});
});
}
clicka.addClass('selected');
$this.addSelected($('#' + options.scope), clicka, item, options, targetContain);//容器中添加选择项
}
$this.reSetValue(targetContain); //重新计算Value
options.onClick(item);//触发单机事件
});
listnode.append(clicka);
target.append(listnode);
});
options.onLoadSuccess(data);//触发加载完成事件
},
getValue: function(target) {
var selected = $(target).find('.list .selected');
var array = new Array();
$.each(selected, function(i,item) {
array.push($(item).attr('data-value'));
});
return array.join(",");
},
//添加已经选择项
//pointTarget:选择项容器
//target 被点击的项
//itemData 被选择数据
addSelected: function (pointTarget, target, itemData, options, targetContain) {
var $this = this;
var anode = $('<a href="javascript:;"><span data-category="'+options.name+'" name="'+itemData.name+'" class="'+itemData.css+'">' + itemData.value + '</span></a>');
//创建X ,点击则移除选择项
var inode = $('<i class="J_FilterQueryDel" data-type="ParentCatelog" data-value="' + itemData[options.idField] + '"></i>').unbind('click').bind('click', function (e) {
$(target).trigger("click.selected-tag");//触发事件
// $(e.target).closest('.selected-tag').remove();
$this.reSetValue(targetContain); //重新计算Value
});
//绑定指定命名空间的单击事件
$(target).unbind('click.selected-tag').bind('click.selected-tag', function (e) {
$(target).removeClass('selected');
$(anode).closest('.selected-tag').remove();
$(target).unbind('click.selected-tag');
});
anode.append(inode);
pointTarget.find('.list').append($('<li data-type="ParentCatelog" class="selected-tag"></li>').append(anode));
},
//重新计算Value
reSetValue: function (target) {
var value = this.getValue(target);
$(target).find('input[name="' + this.options(target).inputName + '"]').val(value);
//有值
if (value) {
$(target).find('.filter-unlimit').removeClass('selected');
}
//无值
else {
$(target).find('.filter-unlimit').addClass('selected');
}
this.options(target).onChange(value);
},
clear: function (target) {
$(target).find('.selected').trigger("click.selected-tag");//触发事件
this.reSetValue(target); //重新计算Value
}
}
$.fn.comboboxfilter.parseOptions = function (target) {
return $.extend({}, $.fn.datagrid.parseOptions(target), {
});
};
$.fn.comboboxfilter.defaults = {
url: '',
idField: 'id',
textField: 'text',
scope: 'FilterQuery',
text: '',
multiple: false,
data:[],
inputName: '',
unlimit: true,//是否显示不限,默认显示
unlimitText:'不限',
param:{},
onClick: function (itemData) { },
onChange: function (newValue) { },
onLoadSuccess: function (data) { },
onError: function (e) { }
};
})(jQuery);
extend方法首先用于自定义方法comboboxfilter。
$.fn.comboboxfilter.methods用于实现各个方法,其中init用于初始化,判断展示的搜索条件是单选还是多选,并通过options初始化对展示的信息进行加载。
setData用于将JSON数据中的各个搜索字段加载到初始化的搜索栏目中。
addSelected方法用于对搜索条件进行选择时加载到顶部的展示区域,或者是删除顶部的已选择搜索项。
reSetValue用于从新设定顶部搜索条件展示区数据。
代码demo请至:http://download.csdn.net/download/zdxiaxiaxia/10152897
转自:http://blog.csdn.net/zdxiaxiaxia/article/details/78765035
基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)相关推荐
- 基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app ...
- jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...
- 基于JavaScript实现前端数据多条件筛选功能
效果图: 实现方法:默认全部.点击每一项进行不同条件切换,根据后台数据传递参数,实现动态的商品筛选功能. 参考如下: 代码如下:源代码 下载: https://github.com/gaomengpi ...
- Elasticsearch仿京东、淘宝APP客户端的商品侧边栏筛选条件过滤和分页列表查询的实现案例
目录 需求分析 项目环境 API接口实现 需求分析 通过Elasticsearch完成商品列表查询和分类.品牌.规格参数的分组聚合统计查询 当用户输入关键字搜索后,查询出商品列表后点击右上角筛选按钮, ...
- 基于Android的小区核酸检测系统--Square广场界面(仿淘宝小红书的 陈列式布局的实现)
是目录耶!!! 本片文章是参考了 CSDN一位大佬的文章 他是Activity下实现 写的很详细有需要的家人们可以去看看 本次项目我是在Fragment界面下实现的 目录 是目录耶!!! 一.创造样式 ...
- php多条件筛选前台功能,JavaScript前端数据多条件筛选功能实现代码
有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很*烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置.本文主要为大家详 ...
- php基于thinkphp、smarty\CodeIgniter构建的开源的淘宝客cms程序下载
现在有很多开源的淘宝客软件cms,很多人不知道,所以,提供该服务,完全开源,比市面上的加密的好很多, 这些开源的淘宝客程序代码写的都非常简约,适合学习观摩,所以,收集了一些优秀的开源源码,整理成下载地 ...
- 基于Android平台淘宝网手机客户端实战开发(共四季,涉及各类技术应用)
本课程共分四季,学习本课程需要拥有Android方面一定的技术基础, http://www.ibeifeng.com/goods.php?id=176 本项目涉及技术点如下: 第一季:主要涉及的技术点 ...
- jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录 一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换 二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想 淘 ...
最新文章
- Windows下Mysql主从配置(Mysql5.5)
- 使用Eclipse+PyDev+EclipseHtmlEditor搭建Django开发环境
- 机器学习数据预处理代码汇总(最新更新20年3月1日)
- AI队列长度检测:R-CNN用于使用Keras进行自定义对象检测
- c语言游戏源码_【C语言/C++】益智游戏开发:2048(思路+源码详解)
- 鸿蒙系统30个G,鸿蒙系统升级,为何固定大小有5.9G,也有3点几G呢?
- python通过什么对象连接数据库_Python(十一)数据库连接
- 关于阿拉qq大盗屏蔽winhex之后的破解.
- 移远4G模组EC600N进行TCP/IP连接和服务器测试
- 09 WebGL通过uniform变量修改点的颜色
- centos7.3安装与配置SVN
- Android获取手机WiFi IP地址,MAC地址和网关地址程序实例
- navicat哪个版本支持mysql8_Navicat连接MySQL8.0亲测有效
- 线上环境频繁GC问题排查,Finalizer对象该背这个锅吗?
- 用于自动驾驶的激光雷达里程计方法综述
- OringPro 调整坐标轴
- Tik Tok跨境电商与传统跨境电商有什么区别?
- USB OTG原理简述
- 如何读取PLC的寄存器地址和点表?
- 2022年最受欢迎的十大狗狗品种排行榜:拉布拉多猎犬第一 | 美通社头条