px-jquery-filter-box

description

Used to group objects used jquery-filter-box filter. When the filtering objects are many, up to 2 or more lines, jquery-filter-box allows you to group these objects as many times as you want. For example, you can use Filter 1, Filter 2, Filter 3, Filter 4, Filter 5 ... objects as a single object with jquery-filter-box[Filter 1, Filter 2, Filter 3, Filter 4, Filter 5]. Sample images are available below.

description TR

jquery-filter-box filter için kullanılan nesneleri gruplamak için kullanılır. Filtreleme nesneleri çok olduğunda 2 veya daha fazla satıra çıktığında jquery-filter-box bu nesneleri istediğiniz kadar gruplamanızı sağlar. Örneğin Filter 1, Filter 2, Filter 3, Filter 4, Filter 5 ... nesnelerini jquery-filter-box[Filter 1, Filter 2, Filter 3, Filter 4, Filter 5] ile tek nesne olarak kullanabilirsiniz. Örnek resimler aşağıda mevcut.

install

npm i jquery

npm i select2

npm i px-jquery-filter-box

html

<div class="my-filter-blok d-none">
<label for="filter-sube" data-member-name="sube">Şube</label>
<select id="filter-sube" name="sube">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label for="filter-departman" data-member-name="departman">Departman</label>
<select id="filter-departman" name="departman">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label data-member-name="durum">Durum</label>
<select name="durum" multiple>
<option value="1">Durum 1</option>
<option value="2">Durum 2</option>
</select>
</div>

css

@import "~px-jquery-filter-box/px-filter-box.css";

javascript - jquery

require('px-jquery-filter-box');

init

$(".my-filter-blok").pxfilterbox({
show_selected_values: false,
button: true,
type: 'filter', //'filter' or 'sort'
icon: "firsticon", button_caption: "Filtreyi Uygula",
clean_text_visible: true, clean_text: "Seçimleri Temizle",
select_add_default_option: true, select_default_text: "Seçiniz",
selected_info_text: "Filtre Seçildi",
callback: function(e){}
});

calback result

result : {sube: "1", departman: null, durum: "1,2"}

view:

1.

2.