基於JSON+JQuery實現的多條件篩選功能(類似京東和淘寶功能)
阿新 • • 發佈：2019-01-08
/**
* 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);
* 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);