PHP տվյալների զտում և վավերացում: Հաճախակի սխալներ. Արժեքի միջակայքի զտիչ «FROM» և «TO»

Վերջապես ես գտա ժամանակ և ուզում եմ ձեր ուշադրությանը ներկայացնել իմ նոր սցենարը, որը թույլ է տալիս զտել տվյալները html աղյուսակներում։

Սցենարն աջակցում է ֆիլտրերի հետևյալ տեսակներին.

Տեքստային դաշտ
Բացվող ցուցակ
Ռադիո կոճակներ
Նշավանդակներ

Սցենարը փոքր է և բավականին հեշտ է միացնել, և այն նաև լավ է համակցվում աղյուսակի տեսակավորող սկրիպտի հետ, կարող եք ներբեռնել այն կապի և կազմաձևման օրինակների հետ միասին իմ պահոցում. bitbucket.org

Դեմո սեղանի զտիչ.

Խորհրդանիշներ	Տեքստ	Թվեր	Թվեր	Տեքստ
Ա Բ Գ		--- 1 2 3	- 1 2 3
Բ	Ձմերուկ	2	3	երկրպագու
Բ	հրաձիգ	1	2	Արբա
Գ	երկրպագու	3	1	հրաձիգ
Գ	հրաձիգ	2	1	Ֆանտոմաներ
Բ	հրաձիգ	1	2	Ձմերուկ
Գ	երկրպագու	3	3	հրաձիգ
Ա	Ձմերուկ	2	2	Ձմերուկ
Ա	երկրպագու	1	1	Փոխարկիչ
Գ	երկրպագու	3	3	Ձմերուկ
Բ	երկրպագու	2	3	Ֆանտիկ
Գ	հրաձիգ	1	1	Ձմերուկ
Գ	երկրպագու	3	2	Սլաք

Հայեցակարգային առումով սցենարը բաղկացած է երկու մասից՝ զտիչ օբյեկտներ filterTable.Filterև իրականում ֆունկցիայից ֆիլտրի աղյուսակ (...), որը կապում է այս զտիչ օբյեկտները html աղյուսակին:

Ֆիլտրի օբյեկտն ունի հետևյալ կոնստրուկտորը.

/** * Զտել օբյեկտը: * @paramHTMLInputElement | HTML Ընտրեք HTMLElementRef | - Հղում կամ հղումների զանգված * html-տարրերին, որոնք ծառայում են որպես զտիչներ: * @param Function Callback - հետ կանչելու գործառույթ: Կանչվում է, երբ * սկրիպտը վավերացնում է բջիջի բովանդակությունը: Ֆունկցիան կանչվում է աղյուսակի յուրաքանչյուր տողի համար, * սյունակի յուրաքանչյուր բջիջի համար, որի համար հատկացված է զտիչը: * Գործառույթին կփոխանցվի 3 պարամետր՝ հետադարձ զանգ (արժեք, զտիչներ, i), որտեղ՝ * Տողային արժեք - աղյուսակի բջիջի արժեքը, որը ստուգվում է այն պահին, երբ գործառույթը կոչվում էր * HTMLElements ֆիլտրեր - HTML տարրերի զանգված, որը նշանակված է զտիչներ ստուգված սյունակի համար: * i թիվը ֆիլտրի տարրի ինդեքսն է ֆիլտրերի զանգվածում, որը * ընթացիկ զանգի վավերացուցիչն է: Նրանք. Զտիչներ[i]-ը * հետադարձ կապի ֆունկցիայի ներսում կպարունակի այն տարրը, որի հետ օգտագործողը * շփվել է, որը գործարկել է վավերացման գործընթացը: * @param String eventName - ֆիլտրին կցված իրադարձության անվանումը, որը * կգործարկի վավերացում (onkeyup | onclick | onblur | onchange և այլն) * @constructor */ filterTable.Filter = ֆունկցիա (HTMLElementRef, callback, eventName) Առաջին փաստարկը՝ HTMLElement HTMLElementRef

Երկրորդ արգումենտ. ֆունկցիայի հետ կանչը

Գործառույթ: հետադարձ զանգ (արժեք, զտիչներ, i)Որտեղ:
լարային արժեքը- ֆունկցիայի կանչման պահին ստուգվող աղյուսակի բջիջի արժեքը
HTMLElements զտիչներ- ստուգված սյունակի համար զտիչներով նշանակված HTML տարրերի զանգված:
թիվ i- ֆիլտրի տարրի ինդեքսը ֆիլտրերի զանգվածում, որը հանդիսանում է ընթացիկ զանգի վավերացնողը: Նրանք. ֆիլտրերը[i] հետ կանչի ֆունկցիայի ներսում կպարունակեն այն տարրը, որի հետ օգտատերը փոխազդեցվել է, ինչի արդյունքում գործարկվել է վավերացման գործընթացը: Ֆունկցիան պետք է վերադարձնի true կամ false՝ կախված նրանից, թե արդյոք մուտքային արժեքի արժեքը զտված է, երբ արժեքը սահմանվում է զտիչ s[i] ըստ ձեր պատկերացման, թե ոչ:

Երրորդ արգումենտ. String eventName

Զտիչին կցված իրադարձության անվանումը, որը կգործարկի վավերացումը (onkeyup | onclick | onblur | onchange և այլն) onchange - լռելյայն արժեք

Ֆունկցիան ինքնին ֆիլտրի աղյուսակունի հետևյալ ստորագրությունը.

աղյուսակներ * @param Օբյեկտների զտիչներ - ֆիլտրի կազմաձևման օբյեկտ. ( N: FILTER[, N: FILTER] ) * * Որտեղ. * NUM-ը բնական թիվ է. Այս թիվը կարող է արժեքներ ունենալ 0-ից մինչև * աղյուսակի սյունակների թիվը՝ 1: Թվերը կարող են նշվել անսարք: * * FILTER-ը հղում է HTML տարրին, որը HTML ձևի տարր է * և ունի արժեքի հատկանիշ (ներառյալ ընտրելը), կամ * tableKit տիպի օբյեկտ:Filter */ filterTable (HTMLTBodyRef, aFilters)

Այն բավականին շփոթեցնող է թվում, բայց եկեք նայենք օրինակին: Նախ մեզ անհրաժեշտ է html՝ աղյուսակի շրջանակը։ Նկատի ունեցեք, որ զտիչները պարզապես html ձևի տարրեր են, ի դեպ, դրանք ունեն եզակի id ատրիբուտներ, որոնց միջոցով մենք կընտրենք դրանք filterTable.Filter կոնստրուկտորին անցնելու համար:

Խորհրդանիշներ	Տեքստ	Թվեր	Թվեր	Տեքստ
Ա Բ Գ			- 1 2 3
Բ	Ձմերուկ	2	3	երկրպագու
Բ	հրաձիգ	1	2	Արբա
Գ	երկրպագու	3	1	հրաձիգ
Գ	հրաձիգ	2	1	Ֆանտոմաներ
Բ	հրաձիգ	1	2	Ձմերուկ
Գ	երկրպագու	3	3	հրաձիգ
Ա	Ձմերուկ	2	2	Ձմերուկ
Ա	երկրպագու	1	1	Փոխարկիչ
Գ	երկրպագու	3	3	Ձմերուկ
Բ	երկրպագու	2	3	Ֆանտիկ
Գ	հրաձիգ	1	1	Ձմերուկ
Գ	երկրպագու	3	2	Սլաք

Հարկ է նշել, որ զտիչների այնպիսի տեսակներ, ինչպիսիք են տեքստային դաշտը կամ բացվող ցուցակը, սցենարի համար «հայրենի» են, և դրանք իրականացնելու համար նույնիսկ կարիք չկա դիմել զանգահարելու: filterTable.Filter- ուղղակի հղում փոխանցեք հենց html տարրին:

Այսպիսով, մենք ունենք շրջանակ: Ունի զտիչներ։ Մնում է կապել այդ ամենը։ Բայց եկեք սկսենք ամենապարզից միացման տարբերակ, և մենք կվերլուծենք միայն 2-րդ և 3-րդ սյունակների զտիչները, քանի որ դրանք օգտագործում են տեքստային դաշտ և արժեքների բացվող ցուցակ, որոնք ֆիլտրի սկրիպտը հասկանում է «բնական»՝ առանց ստեղծելու անհրաժեշտության։ filterTable.FilterԵս միտումնավոր մեկնաբանեցի 0, 3, 4 տարրերը և առայժմ դրանց իրականացումը նշանակեցի որպես «...», որպեսզի ժամանակից շուտ չվախեցնեմ թուլացածներին :)

Նշենք, որ ֆունկցիայի երկրորդ արգումենտը զտիչ աղյուսակ (..., (...) )ֆիլտրի կազմաձևման օբյեկտ է, որի հատկությունները սկսվում են թվային անուններով 0-ից մինչև NUM_COLUMNS_TABLE-1Յուրաքանչյուր այդպիսի հատկության արժեքը պետք է լինի զտիչ.

աղյուսակներ */ document.getElementById(«թիրախ»), /* Զտիչի կազմաձևման օբյեկտ. */ 1. document.getElementById(«տեքստ»), /* Զտել բացվող ցանկի երրորդ սյունակի համար. 3: ... , /* Զտել հինգերորդ սյունակի համար Աստիճանական բառի մուտքագրում. 4: ... */ ));

Եթե ինչ-որ մեկին անհրաժեշտ են բոլոր ֆունկցիոնալությունները, ինչպես ցույց է տրված ցուցադրման մեջ, օրինակ, զտիչներ ռադիո կոճակներով կամ զտիչներ վանդակներով, ապա կապը մի փոքր ավելի բարդ է դառնում, քանի որ, ըստ էության, դրանք զտիչներ են, որոնք բաղկացած են մի շարք html տարրերից, և վավերացման ընթացքում անհրաժեշտ է ստուգել նման ֆիլտրի ամբողջ հավաքածուի արժեքները: Սա այն վայրն է, որտեղ հետադարձ կապի գործառույթները հայտնվում են խաղի մեջ: Ցուցակում ներքևում ես փորձեցի մանրամասնորեն մեկնաբանել այս կետը:

Կրկին նշեք, որ տեքստային դաշտի և բացվող ցուցակի համար բավական է պարզապես հղում փոխանցել html տարրին: Եվ նաև ուշադրություն դարձրեք վերջին ֆիլտրի միացմանը: Կարող եք հարցնել, թե ինչու. ի վերջո, վերջին սյունակում զտիչը տեքստային դաշտ է: Այո, այդպես է, բայց եթե ուշադիր աշխատել եք ցուցադրական օրինակի հետ, ապա նկատել եք, որ առաջին զտիչը՝ թեստային դաշտն աշխատում է միայն այն բանից հետո, երբ դուք ամբողջությամբ մուտքագրեք արժեքը և սեղմեք «Enter» կոճակը կամ սեղմեք էջի որևէ այլ վայրում։ , այսինքն. զտիչը գործարկվում է լռելյայն «onchange» իրադարձության պատճառով: Բայց վերջին սյունակի զտիչ-տեքստային դաշտը աշխատում է անմիջապես, հենց որ մուտքագրեք որևէ նիշ: Այս վարքագիծն իրականացնելու համար ես ստիպված էի ստեղծել զտիչ՝ համաձայն բոլոր կանոնների filterTable.Filterև անհրաժեշտ էր նաև հետադարձ կապի ֆունկցիա սահմանել և, բացի այդ, փոխանցել «onkeyup» իրադարձության անվանումը, որով կսկսվի զտման գործընթացը։ Սրա նման. Հուսով եմ, որ ես ձեզ ամբողջովին չեմ շփոթեցրել:

FilterTable (/* Հղում տարրին աղյուսակներ */ document.getElementById(«թիրախ»), /* Զտիչի կազմաձևման օբյեկտ՝ */ ( /* Զտել առաջին վանդակի սյունակի համար՝ */ 0: new filterTable.Filter([ /* Զտիչ տարրեր */ document.getElementById( "charA"), document.getElementById("charB"), document.getElementById("charC") ], /* Վավերացման հետադարձ զանգ */ ֆունկցիա (արժեք, զտիչներ, i) ( /* Եթե վանդակը նշված չէ, դրա արժեքը չմասնակցել վավերացմանը, ուստի մենք պետք է վերադարձնենք true */ if (false === filters[i].checked) վերադարձնել true; /* Ավելին, ստուգելիս մենք պետք է միաժամանակ ստուգենք հավաքածուի բոլոր տարրերի արժեքները, պայմանով, որ վանդակը նշված է */ վերադարձնել ֆիլտրերը. ստուգվել է && filters.value === արժեքը || filters.checked && filters.value === արժեքը || filters.checked && filters.value === արժեքը; )), / * Զտել երկրորդ սյունակի տեքստային դաշտի համար. միայն ճշգրիտ համընկնումը՝ */ 1: document.getElementById («տեքստ»), /* Զտել բացվող ցուցակի երրորդ սյունակի համար՝ */ 2. document.getElementById («թվանշաններ»), /* Զտիչ ռադիոկոճակի չորրորդ սյունակի համար. այն դրված է, զտիչը չի մասնակցում վավերացմանը և մենք պետք է վերադարձնենք true */ if (true === filters.checked) return true; /* Եթե որոշ ռադիոկոճակ ստուգված է, և ստուգված բջիջի բովանդակությունը համընկնում է, ապա վերադարձրեք true */ return filters.checked && filters.value === արժեքը || filters.checked && filters.value === արժեքը || filters.checked && filters.value === արժեքը; )), /* Հինգերորդ սյունակի զտիչ Աստիճանական բառի մուտքագրում. */ 4. new filterTable.Filter(document.getElementById("regexp"), /* Validation callback */ ֆունկցիա (արժեք, ֆիլտրեր, i) ( return value.indexOf( filters[i].value) === 0; ), /* Մենք կկոչենք վավերացում ֆիլտրի onkeyup իրադարձության վրա */ «onkeyup») ));

Այսքանը, ես սպասում եմ ձեր արձագանքներին և առաջարկներին և հուսով եմ, որ իմ աշխատանքը օգտակար կլինի: Դե, վերջապես, ես տալիս եմ սցենարի ամբողջական ցանկը:

/** * Զտիչներ կապեք աղյուսակին: * @param HTMLTableSectionElement HTMLTBodyRef - տարրի հղում աղյուսակներ * @param Օբյեկտների զտիչներ - ֆիլտրի կազմաձևման օբյեկտ. ( N: FILTER[, N: FILTER] ) * * Որտեղ. * NUM-ը բնական թիվ է. Այս թիվը կարող է արժեքներ ունենալ 0-ից մինչև * աղյուսակի սյունակների թիվը՝ 1: Թվերը կարող են նշվել անսարք: * * FILTER-ը հղում է HTML տարրին, որը * HTML ձևի տարր է և ունի արժեքի հատկանիշ (ներառյալ ընտրելը), կամ * tableKit տիպի օբյեկտ:Filter */ var filterTable = ֆունկցիա (HTMLTBodyRef, aFilters) ( var տողեր = HTMLTBodyRef.getElementsByTagName(«TR»), զտիչներ = (), n, walkThrough = ֆունկցիա (տողեր) ( var tr, i, f; համար (i = 0; i< rows.length; i += 1) { tr = rows.item(i); for(f in filters) { if (filters.hasOwnProperty(f)) { if (false === filters[f].validate(tr.children[f].innerText)) { tr.style.display = "none"; break; } else { tr.style.display = ""; } } } } }; for(n in aFilters) { if (aFilters.hasOwnProperty(n)) { if (aFilters[n] instanceof filterTable.Filter) { filters[n] = aFilters[n]; } else { filters[n] = new filterTable.Filter(aFilters[n]); } filters[n]._setAction("onchange", function () {walkThrough(rows);}); } } } /** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) { /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ if (!(this instanceof arguments.callee)) { return new arguments.callee(HTMLElementRef, callback, eventName); } /* Выравниваем пришедший аргумент к массиву */ this.filters = {}.toString.call(HTMLElementRef) == "" ? HTMLElementRef: ; /** * Шаблонный метод вызывается для каждой строки таблицы, для соответствующей * ячейки. Номер ячейки задается в объекте-конфигурации фильтров ф-ции * filterTable (См. параметр 2 ф-ции tableFilter) * @param String cellValue - строковое значение ячейки * @returns {boolean} */ this.validate = function (cellValue) { for (var i = 0; i < this.filters.length; i += 1) { if (false === this.__validate(cellValue, this.filters[i], i)) { return false; } } } this.__validate = function (cellValue, filter, i) { /* Если фильтр был создан явно и явно указана функция валидации: */ if (typeof callback !== "undefined") { return callback(cellValue, this.filters, i); } /* Если в фильтр напихали пробелов, или другой непечатной фигни - удаляем: */ filter.value = filter.value.replace(/^\s+$/g, ""); /* "Фильтр содержит значение и оно совпало со значением ячейки" */ return !filter.value || filter.value == cellValue; } this._setAction = function (anEventName, callback) { for (var i = 0; i < this.filters.length; i += 1) { this.filters[i] = callback; } } };

Արժեքի միջակայքի զտիչ «FROM» և «TO»

Աշխատողների խնդրանքով ես ցույց եմ տալիս, թե ինչպես կարող եք կիրառել զտիչ, որը թույլ կտա ընտրել «ից» և «մինչև» թվերի արժեքների միջակայքերը: Այս ֆիլտրի կարիք ունեցող սյունակի վերնագրում գրեք կոդը, որը երկու բացվող ցուցակ է։ Համապատասխանաբար՝ առաջինը «ից» արժեքն է, իսկ երկրորդը՝ «դեպի» արժեքը.

... ... ...

ԻՑ ՆԱԽՔԱՆ

Իսկ սցենարի զանգում մենք նախատեսում ենք զտիչ (երրորդ սյունակի համար) հակիրճության համար, ես կրճատեցի ցուցակը, թողնելով միայն ֆիլտրի սահմանումը «ից» և «դեպի».

FilterTable (/* Հղում տարրին աղյուսակներ */ document.getElementById(«թիրախ»), /* Զտիչի կազմաձևման օբյեկտ՝ */ ( /* Զտել առաջին սյունակի վանդակների համար. */ 1: ... , /* FILTER արժեքների միջակայք FROM-ից և TO */ 2: new filterTable.Filter([ document.getElementById(«թվերը-ից»), document.getElementById(«թվեր-մինչև») ], ֆունկցիա (արժեք, զտիչներ, i) ( var ընդունում = ճշմարիտ; արժեքը = parseInt (արժեք, 10) if (filters.value) (ընդունել = (արժեք >= parseInt(filters.value,10)); if (ընդունել && filters.value) (ընդունել = (արժեք<= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

Գործի անզգայուն սեղանի ֆիլտրի օրինակներ

Զտել գործի անզգայունճշգրիտ համապատասխանության համար (դուք կարող եք փոխարինել ստանդարտը դրանով)

Նոր filterTable.Filter(document.getElementById(«տեքստ»), ֆունկցիա (արժեք, ֆիլտրեր, i) ( var vala_filter = filters[i].value == «», match_value = value.toLowerCase() == զտիչներ[i] .value.toLowerCase(); վերադարձնել դատարկ_ֆիլտր || match_value; ))

Զտել գործի անզգայունբառի աստիճանական մուտքագրման համար

Նոր filterTable.Filter(document.getElementById("regexp"), /* Վավերացման ֆունկցիայի հետ կանչում */ ֆունկցիա (արժեք, զտիչներ, i) ( var c_value = value.toLowerCase(), f_value = filters[i].value. toLowerCase( վերադարձնել c_value.indexOf(f_value) === 0; ), /* Մենք կկանչենք վավերացում ֆիլտրի onkeyup իրադարձության վրա */ «onkeyup»)

Սկզբունքորեն, գործի անզգայունությունը կարող է ներկառուցվել հենց ֆիլտրի սկրիպտի մեջ, բայց առայժմ ժամանակ չունեմ ապագայում այս սցենարը վերաշարադրելու համար՝ հաշվի առնելով ձեր բոլոր ցանկությունները, այնուհետև մենք այնտեղ կդարձնենք այս հնարավորությունը: Ինչպես ասում են՝ սպասեք ;)

Լավ մշակված ֆիլտրը հզոր գործիք է, որից օգտվողները կարող են օգտվել: Իրականում սա կարևոր հատկություն է, եթե ձեր կայքը (առցանց խանութ) ունի բազմաթիվ ապրանքներ, որոնք բաշխված են տարբեր կատեգորիաներով:

ԱՂԲՅՈՒՐՆԵՐ

Էլեկտրոնային առևտրի համար սա փոխակերպման տոկոսադրույքները բարելավելու միջոց է՝ նվազեցնելով օգտվողի համար պահանջվող ժամանակը գտնելու այն, ինչ փնտրում է:

Նման հնարավորությունների ստեղծումը երբեք հեշտ չէ. զտիչները մեծապես կախված են կայքի բովանդակությունից. Բացի այդ, ֆիլտրի սանդղակը չպետք է շեղի, հիմնական ուշադրությունը պետք է լինի բովանդակության/արտադրանքի վրա: Այսպիսով, մենք փորձեցինք մի փոքր ավելի հեշտացնել ձեր կյանքը՝ ստեղծելով ձեզ համար շատ հարմարեցված և հեշտությամբ ինտեգրված CSS ֆիլտրի գոտի:

Այն օգտվում է CSS Transitions-ից, CSS Transformations-ից և jQuery-ից՝ անհրաժեշտության դեպքում սահուն անցումների համար:

Կառուցվածքի ստեղծում

HTML կառուցվածքը սովորականից մի փոքր ավելի բարդ է: Նախ, կան երկու հիմնական բովանդակության բլոկներ՝ վերնագիր և հիմնական տարրեր, երկրորդն օգտագործվում է և՛ gallery.cd-gallery-ը, և՛ filter.cd-filter-ը փաթաթելու համար: Բացի դրանից, մենք ունենք nested navigation (ներդրված է 2 divs-ում, քանի որ իջնող էֆեկտը տեսանելի է շարժական սարքերում) և զտիչ trigger.cd-filter-trigger :

Դուք կարող եք նաև նկատել դասերի շատ անուններ (օրինակ՝ պատկերասրահի ցուցակի տարրերում) և տվյալների զտիչներ. դրանք օգտագործվում են բովանդակության զտման համար, այլ ոչ թե ոճավորման:

Նշում. .cd-gallery> li.gap տարրի նպատակն է աշխատել տեքստի հետ համատեղ. justify; Հատկությունը կիրառվել է .cd-gallery-ին՝ պատկերասրահի ցանց ստեղծելու համար: Դուք պետք է .gap-ում ստեղծեք այնքան էլեմենտներ, որքան անընդմեջ տարրերի առավելագույն քանակը -1 է:

բովանդակության զտիչ

Ոչ մի արդյունք չի գտնվել

փակել

Զտիչներ

Ոճի ավելացում

CSS-ի մեծ մասը վերաբերում է ձևի տարրերի և այլ հիմնական դեկորների ոճավորմանը: Հետաքրքիր է, թե ինչպես ենք մենք սահմանել և օգտագործել որոշ դասեր՝ jQuery-ի հետ համատեղ, որոշակի իրադարձությունների հիման վրա որոշ տարրերի վարքագիծը փոխելու համար:

Օրինակ՝ բոլոր սարքերում ֆիլտրի սանդղակը ամրացվում է, երբ այն հասնում է տեսադաշտի վերևին: Այս էֆեկտին հասնելու համար մենք օգտագործեցինք .is-fixed դասը, որը կիրառվում էր հիմնական (.cd-main-content) տարրի վրա, որպեսզի կարողանանք թիրախավորել դրա երեխաներից մի քանիսը: Մասնավորապես՝ .cd-tab-filter-wrapper-ը ստատիկ դիրքում է, մինչդեռ .cd-filter-ը և .cd-filter-trigger-ը բացարձակ դիրքում են (համեմատած .cd-main-content-ի հետ): Երբ մենք .is-fixed դասը կիրառում ենք .cd-main-content-ում, այս բոլոր տարրերի դիրքը փոխում ենք Fixed-ի:

cd-tab-filter-wrapper (ֆոնի գույնը՝ #ffffff; z-ինդեքսը՝ 1;) #ffffff; z-ինդեքս՝ 2; փոխակերպում՝ translateX(-100%), անցում. փոխակերպում 0.3 վրկ, տուփ-ստվեր 0.3 վրկ; բարձրությունը՝ 50px; լայնությունը՝ 60px; z-index՝ 3; ).cd-main-content.is-fixed .cd-tab-filter-wrapper ( դիրքը՝ ֆիքսված; վերև՝ 0; ձախ՝ 0; լայնությունը՝ 100% . ;)

Մեկ այլ բան, որ արժե նշել, .filter-is-visible դասն է: Այն կիրառվում է բազմաթիվ տարրերի վրա, երբ օգտագործողը գործարկում է ֆիլտրի վահանակը: Բոլոր սարքերում այն օգտագործվում է .cd-filter տարրի translateX արժեքը փոխելու համար (-100%-ից 0): Ավելի մեծ սարքերում (>1170px) մենք նաև թիրախավորում ենք .cd-gallery-ը և .cd-tab-ֆիլտրը և նվազեցնում դրանց լայնությունը. այս կերպ վահանակը չի համընկնի բովանդակության վրա, և օգտագործողը օգտագործում է լրացուցիչ հնարավորություններԶտիչներ կիրառելու և փոփոխությունները միաժամանակ դիտելու համար բաց՝ առանց վահանակը փակելու:

Միջոցառումների կազմակերպում

Բովանդակության ֆիլտրի գործառույթն իրականացնելու համար մենք ինտեգրել ենք MixItUp jQuery հավելվածը: Փլագինը պատկերասրահի կոնտեյներում սկզբնավորելու համար մենք օգտագործում ենք mixItUp() ֆունկցիան և հայտարարում ենք buttonFilter փոփոխական, որը պարունակում է բոլոր սովորականները: ֆունկցիոնալությունըզտիչ. Բացի այդ, մենք օգտագործում ենք jQuery ֆիլտրի սանդղակը բացելու/փակելու և շտկելու համար (ներդիրներով նավիգացիայի հետ միասին), որպեսզի այն դեռ երևա պատկերասրահում ոլորելիս:

Մենք սովորել ենք, թե ինչպես հավաքել տվյալներ հաճախորդի վերաբերյալ և ուղարկել այն սերվերին: Իսկ սերվերի վրա կոճղ են գրել այն տեղում, որտեղ պետք է վերադարձվեն մուտքագրված պարամետրերով զտված ապրանքները։ Այժմ մենք կազատվենք կոճղից և կգրենք մի քանի մեթոդ և հարցումներ, որոնք անհրաժեշտ ապրանքները կհանեն տվյալների բազայից և վերադարձնեն հաճախորդին: Դասը բավականին կարճ է։ Սկսել

Ի՞նչ ենք մենք անում։

Մեզ անհրաժեշտ է ընդամենը 3 քայլ կատարել.

1. Ստացեք տվյալներ հաճախորդից և մշակեք դրանք ըստ սերվերի կարիքների: Օրինակ, սահմանեք լռելյայն պարամետրերը
2. Գրեք, փաստորեն, ինքնին կոդը տվյալների բազայից ապրանքներ հանելու համար։ Առաջին հերթին պատրաստեք sql հարցումը
3. Ստացված տվյալները վերադարձրեք հաճախորդին

Հաճախորդից տվյալների ստացում

Կարող եք հարցնել՝ ինչո՞ւ է դա անհրաժեշտ ընդգծել պարզ գործողությունառանձին, եթե մենք հեշտությամբ կարողանանք դուրս հանել բոլոր տվյալները $_GET զանգվածից:

Նախ՝ լռելյայն արժեքները դնելու համար։ Դուք չեք կարող հույս դնել հաճախորդի վրա, որպեսզի հոգ տանի դրա մասին:

Երկրորդ, ոչ բոլոր տվյալները $_GET են՝ օգտագործելի ձևով: Օրինակ՝ մեզ համար ավելի հարմար է հաճախորդից տեսակավորումը փոխանցել որպես մեկ պարամետր՝ դաշտ_ուղղության տեսքով, օրինակ՝ price_asc։ Բայց sql հարցումում սրանք առանձին սուբյեկտներ են, ուստի դրանք պետք է նախապես մշակվեն:

Իրավիճակը նույնն է բրենդների դեպքում. Հաճախորդի վրա մենք դրանք ուղարկում ենք որպես ապրանքանիշերի զանգված, և php-ն դրանք ստանում է նաև որպես զանգված: Բայց sql հարցումին անհրաժեշտ է տող՝ ստորակետերով բաժանված ապրանքանիշերի ցուցակ: Հետևաբար, ապրանքանիշերը նույնպես հետագա մշակման կարիք ունեն:

Այսպիսով, եկեք գրենք getOptions() ֆունկցիան, որը կհանի տվյալները $_GET-ից և կվերածի մեզ հարմար ձևի։ Ես արդեն հայտնել եմ գրեթե բոլոր ներածականները, այնպես որ մենք անմիջապես նայում ենք պատրաստի կոդը:

// Տվյալների ստացում _GET զանգվածի ֆունկցիայից getOptions() ( // Կատեգորիա և գներ $categoryId = (isset($_GET["category"])) ? (int)$_GET["category"] : 0; $minPrice = ( isset($_GET["min_price"])) ? (int)$_GET["min_price"]: 0; $maxPrice = (isset($_GET["max_price"])) ? (int)$_GET["max_price" " ] : 1000000; // Ապրանքանիշեր $brands = (isset($_GET["brands"])) ?implode($_GET["brands"], ",") : null; // Տեսակավորել $sort = (isset( $ _GET["sort"])) ?$_GET["sort"]: "price_asc"; $sort = պայթել ("_", $sort); $sortBy = $sort; $sortDir = $sort; վերադարձի զանգված ( " brands" => $brands, "category_id" => $categoryId, "min_price" => $minPrice, "max_price" => $maxPrice, "sort_by" => $sortBy, "sort_dir" => $sortDir);)

Այստեղ մենք տեսնում ենք, որ մենք առաջին հերթին ստանում ենք կատեգորիայի ID-ն: Եթե կատեգորիան չի անցնում, ապա մենք համարում ենք category_id = 0: Նվազագույն գինը կլինի 0, առավելագույնը կլինի 1 միլիոն: Եթե ձեր առցանց խանութը պլուտոնիում է վաճառում (նավթը՝ չինացիներին, մրջյունները՝ կտորով), ապա դուք միշտ կարող եք զրոներ ավելացնել ցանկալի տողին կամ, վատագույն դեպքում, վճարումներ կատարել եվրոյով։

Տեսակավորումը կատարվում է այլ կերպ. Առանձին-առանձին մենք հանում ենք տեսակավորման դաշտը և պարամետրը՝ asc կամ desc:

Նկատի ունեցեք, որ բոլոր դեպքերում մենք հիշում ենք փոխարինել լռելյայն արժեքը if ցանկալի պարամետրչի եկել հաճախորդից: Եվ հիմա, երբ բոլոր տվյալները փոխարկված են, մնում է միայն վերադարձնել դրանք ասոցիատիվ զանգվածի ֆունկցիայից վերադարձի զանգվածի միջոցով (...)

Sql հարցումի պատրաստում և տվյալների բազայից տվյալների հանում

Բոլոր տվյալները պատրաստված են մեզ անհրաժեշտ ձևով, հիմա գրենք հարցում և կատարենք այն։ Դա կիրականացվի getGoods($options, $conn) ֆունկցիայի միջոցով: Որպես պարամետրեր, այն վերցնում է $options՝ նախորդ ֆունկցիայի կողմից պատրաստված տվյալները, իսկ $conn՝ տվյալների բազայի միացման օբյեկտը, որը մենք ստեղծել ենք նախորդ դասում։ Մեր խնդիրն է գրել sql հարցում: Ընդհանուր առմամբ, այն ունի հետևյալ տեսքը.

Ընտրեք g.id-ը որպես good_id, g.good-ը որպես լավ, b.brand-ը որպես ապրանքանիշ, g.price-ը որպես գին, g.գնահատումը որպես գնահատական, g.լուսանկարը որպես լուսանկար ապրանքներից որպես g, ապրանքանիշերը որպես b, որտեղ g.category_id=ընտրված_կատեգորիա: և g.brand_id-ը (ստորակետ_տարածված_բրանդի_ցուցակում) և g.brand_id = b.id և (g.price՝ min_price-ի և max_price-ի միջև)՝ ըստ տեսակավորման_դաշտի տեսակավորման_ուղղության:

Մենք առբերում ենք պահանջվող դաշտերը՝ կիրառելով մի շարք որտեղ պայմաններ և նշելով ցանկալի տեսակավորումը: Գների և տեսակավորման հետ կապված հարցեր չկան, մենք պարզապես անհրաժեշտ արժեքները փոխարինում ենք հարցման համապատասխան վայրերում։ Բայց դուք պետք է ավելի զգույշ լինեք կատեգորիայի և ապրանքանիշերի հետ, և ահա թե ինչու:

Յուրաքանչյուր ապրանք, որը մենք ունենք, միշտ ունի կատեգորիա: Մեր տվյալների բազայում զրոյական կատեգորիայի հասկացություն չկա. մենք դա արել ենք մեր հարմարության համար, որպեսզի հասկանանք, որ օգտատերը բրաուզերում որևէ կատեգորիա չի ընտրել (կամ ընտրել է բոլորը. մեզ համար դա նույնն է): Եվ այս դեպքում մենք չպետք է տողը ներառենք հարցման մեջ
g.category_id = ընտրված_կատեգորիա և
Նույնը բրենդների դեպքում է, եթե դրանք ընտրված չեն, ապա բաց ենք թողնում համապատասխան տողը։ Ահա թե ինչ տեսք ունի այն կոդով:

// Ստանալով ապրանքներ ֆունկցիան getGoods($options, $conn) ( // Պահանջվող պարամետրեր $minPrice = $options["min_price"]; $maxPrice = $options["max_price"]; $sortBy = $options["sort_by"] $sortDir = $options["sort_dir"]; // Լրացուցիչ ընտրանքներ $categoryId = $options["category_id"]; $categoryWhere = ($categoryId !== 0) ? " g.category_id = $categoryId և " :" "; $brands = $options["brands"]; $brandsWhere = ($brands !== null) ? " g.brand_id in ($brands) and " : ""; $query = " ընտրել g.id որպես good_id , գ.լավը որպես լավ, b.brand-ը որպես ապրանքանիշ, g.գինը որպես գն, g.գնահատումը որպես գնահատական, g.լուսանկարը որպես լուսանկար ապրանքներից որպես g, ապրանքանիշեր որպես b, որտեղ $categoryWhere $brandsWhere g.brand_id = b.id և (g.price $minPrice-ի և $maxPrice-ի միջև) պատվիրել ըստ $sortBy $sortDir "; $data = $conn->query($query); վերադարձնել $data->fetch_all(MYSQLI_ASSOC); )

Նախ, մենք $options զանգվածից հանում ենք գինը և տեսակավորում փոփոխականները. դրանք պարզապես տեղադրվում են հարցման մեջ՝ առանց փոփոխության: Իսկ կատեգորիայի և բրենդների համար մենք կազմում ենք $categoryWhere և $brandsWhere տողերը ըստ սկզբունքի՝ որտեղ բաժնի համար անհրաժեշտ պայման, եթե տվյալներ կան, և դատարկ տող, եթե տվյալներ չկան։ Այսպիսով, մենք ստացանք բավականին ողջամիտ sql-հարցում, որը հաշվի է առնում մեր բոլոր ցանկությունները: Վերջին երկու տողերը կատարում են այս հարցումը և ֆունկցիայից վերադարձնում են օբյեկտների զանգված՝ անհրաժեշտ դաշտերով: Մնում է հավաքել ամեն ինչ կույտով և ստացված ապրանքները հետ ուղարկել արդեն սպասող հաճախորդին / բրաուզերին:

Մենք ապրանքները վերադարձնում ենք հաճախորդին

Սա ձեռնարկի ամենահեշտ մասն է: Դիտարկենք նախորդ դասում գրված կոճակը։

// Միացեք տվյալների շտեմարանին $conn = connectDB(); // Վերադարձնել հաջող պատասխան հաճախորդին echo json_encode(array("code" => "success", "data" => $_GET));

Եկեք փոխարինենք այս կոդը

// Միացեք տվյալների շտեմարանին $conn = connectDB(); // Ստացեք տվյալներ հաճախորդից $options = getOptions(); // Ստացեք ապրանքները $goods = getGoods($options, $conn); // Վերադարձնել հաջող պատասխան հաճախորդին echo json_encode(array("code" => "success", "options" => $options, "goods" => $goods));

Մենք ավելացրեցինք մի քանի տող. օգտագործելով getOptions ֆունկցիան, մենք ստացանք տվյալները $options փոփոխականի մեջ: Մենք անմիջապես օգտագործեցինք այն ապրանքների getGoods ստանալու համար, արդյունքները պահվեցին $goods-ում: Եվ ընդլայնեց արձագանքը հաճախորդին: Տվյալների պարամետրը վերանվանվեց ընտրանքների և վերադարձրեց ոչ թե $_GET-ի բովանդակությունը, այլ արդեն փոխարկված արժեքները: Իսկ ապրանքների պարամետրում մենք վերադարձրել ենք ստացված ապրանքների զանգված։

Այս դասն ավարտվեց: Թեև մենք չենք կարող օգտագործել այս տվյալները հաճախորդի վրա, դրանք ցուցադրել զննարկիչում, մենք դրանով կզբաղվենք հաջորդ դասում: Բայց մենք միշտ կարող ենք բացել վահանակը, սեղմել կոճակները և ստուգման նշանները և համոզվել, որ սերվերը մեզ վերադարձնում է ճիշտ ապրանքները:

Աշխատանքի արդյունքների ստուգում

Ընտրենք սմարթֆոններ կատեգորիան և նշենք Apple և Samsung ապրանքանիշերը։ Պատասխանում կտեսնենք, որ սերվերը վերադարձրել է 3 ապրանք՝ դասավորված ըստ գնի աճի

Հիմա նվազագույն գինը սահմանենք 20 հազար, իսկ տեսակավորումը փոխենք գնային նվազման
Ինչպես տեսնում եք, այժմ կա ընդամենը 2 ապրանք՝ մեկ Samsung-ը հանվել է 17 հազարանոց ֆիլտրերի ոչ պիտանի գնի պատճառով։ Իսկ ապրանքներն արդեն դասավորված են հակառակը։ Եթե ամեն ինչ ճիշտ եք արել, ապա կտեսնեք ճիշտ նույն պատկերը։

Դուք դեռ կարող եք խաղալ վահանակի հետ և համոզվել, որ տվյալները ճիշտ են վերադարձվել: Ի վերջո, ամենակարեւորն այն է, որ ֆիլտրերը ճիշտ աշխատեն՝ վերադարձնելով ապրանքների ճիշտ ցանկը։ Ստացված տվյալների ցրումը էջում՝ հաշվի առնելով արդեն ավարտված դասավորությունը, արտաքուստ ամենահետաքրքիրն է, բայց զարգացման տեսանկյունից՝ բավականին պարզ։ Բայց ես ինձանից առաջ չեմ ընկնի - մանրամասները հաջորդ դասում:

Բայց HTML-ն աջակցում է նաև զտիչներ: Դիմում տարբեր զտիչներտեքստին, դուք կարող եք հասնել հետաքրքիր էֆեկտներ. Բայց զգույշ եղեք, ոչ բոլոր բրաուզերներն են ցուցադրում նույն էֆեկտները, որոնք պետք է տան ֆիլտրերը, որոշ բրաուզերներ ուղղակիորեն անտեսում են զտիչները: Այսպիսով, փորձարկեք ձեր վեբ էջերը տարբեր բրաուզերներ. Բոլոր զտիչները ճիշտ են աշխատում Internet Explorer-ի հետ:Այսպիսով, եկեք տեսնենք, թե ինչպես են աշխատում ֆիլտրերը:

Օրինակ, մենք ուզում ենք ընդգծել արտահայտությունը. "Լավ օր!!!«Փորձենք խեղաթյուրել այս արտահայտությունը :-)՝ դրա վրա տարբեր զտիչներ կիրառելով։

Դիմակի զտիչ.

Ընտրում է տեքստը, ավելի ճիշտ այն ֆոնը, որի վրա գրված է տեքստը, կարծես մկնիկով ընտրել եք տեքստը։

Զտիչի շարահյուսություն. STYLE="ֆիլտր:Դիմակ(Գույն =Գույն")

Գույն - ընդգծեք գույնը տասնվեցական ձևաչափով (օրինակ՝ #000FFF) կամ գույնի անվանումը անգլերենով, օրինակ՝ կարմիր, կապույտ, կանաչ: Գույնի այս սահմանումը օգտագործվում է բոլոր ֆիլտրերում, ուստի այն չի կրկնվի հետագա:

Ցուցակ 19.1.

DropShadow ֆիլտր:

Տեքստի վրա ստվեր է ավելացնում:

Զտիչի շարահյուսություն.
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

Գույն - Ստվերային գույն
OffX - Օֆսեթ ստվեր X-ում
OffY - ստվերային Y օֆսեթ
Դրական - ստվեր ձախ կամ աջ (0 կամ 1 համապատասխանաբար)

Ցուցակ 19.3.

Ահա թե ինչ տեսք ունի այն վեբ էջում.

Flip V ֆիլտր:

Շրջում է տեքստը ուղղահայաց:

Զտիչի շարահյուսություն. STYLE = "ֆիլտր:FlipV"

Ցուցակ 19.5.

Ահա թե ինչ տեսք ունի այն վեբ էջում.

Ալիքային ֆիլտր:

Տեքստը դարձնում է ալիքաձև:

Զտիչի շարահյուսություն.STYLE = "զտիչ: Wave (Freq = "Freq", Add = "Add", LightStrength = "LightStrength", Phase = "Phase", Strength = "Strength")"

Freq - ալիքների քանակը
Ավելացնել - ցույց տալ/թաքցնել եզրագիծը (համապատասխանաբար 1 կամ 0)
LightStrength - ալիքների ուժը
Փուլ - ալիքի անկյուն
Ուժ - ալիքի ինտենսիվություն

Ցուցակ 19.7.

Լավ օր!!!

Ահա թե ինչ տեսք ունի այն վեբ էջում.

Blur ֆիլտր:

Լղոզում է տեքստը որոշակի ուղղությամբ:

Զտիչի շարահյուսություն.
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

Ավելացնել - չափավոր կամ ուժեղ պղտորում (համապատասխանաբար 1 կամ 0)
Ուղղություն - ո՞ր ուղղությամբ կհայտնվի մշուշումը (0-ից մինչև 315)
Ուժ - մթության փոխհատուցում

Ինչպես օգտագործել

Սկզբում դուք պետք է ներբեռնեք հավելվածի արխիվը մշակողի էջից և բացեք այն ձեր կայքի գրացուցակի մեջ: Հասանելի է երկու տարբերակ՝ նվազագույնի հասցնել (Արտադրական տարբերակ) և մշակողների համար (Զարգացման տարբերակ): Մշակողի տարբերակում հավելվածի տեքստը ներկայացվում է կառուցվածքային ձևով՝ մեկնաբանություններով, ինչը հարմար է գործողության սկզբունքը հասկանալու համար (դասի սկզբնական կոդը պարունակում է հավելվածի տարբերակը մշակողների համար՝ թարգմանված մեկնաբանություններով):

Այնուհետև բաժին այն էջում, որտեղ դուք նախատեսում եք օգտագործել զտիչ, դուք պետք է տեղադրեք plugin կապի կոդը.

Պետք է փոխարինել» /path_to_plugin/« դեպի այն ուղին, որտեղ տեղադրված է plugin-ը liveFilter, որը դուք բացել եք ավելի վաղ: Դուք նույնպես պետք է փոխարինեք « տարր_զտման_համար«CSS ընտրիչով, որը համապատասխանում է ցանկալի տարրին:

Plugin պարամետր «տարբերակ»վերահսկում է անիմացիայի օգտագործումը զտման ընթացքում տարրեր թաքցնելիս և ցուցադրելիս: Հետևյալ արժեքները մատչելի են. հիմնական- տարրերը պարզապես անջատված են / միացված են առանց որևէ անիմացիայի, Սլայդ- զտված տարրերը կփլուզվեն/ընդլայնվեն, մարել-զտված տարրերն աստիճանաբար կմիացվեն/անջատվեն:

Օրինակ:

$(ul#filter_me").liveFilter("slide");

Վերոնշյալ կոդը ասում է LiveFilter հավելվածին զտել չպատվիրված ցուցակը ID-ով « filter_me«և օգտագործիր անիմացիա» Սլայդ”.

Պլագինը կարող է օգտագործվել չպատվիրված և պատվիրված ցուցակների և աղյուսակների համար: Փլագինը զանգահարելիս պետք է նշեք անհրաժեշտ ընտրիչը:

Կարևոր.Որպեսզի հավելվածն աշխատի, դուք պետք է դասի հետ ավելացնեք տեքստի մուտքագրման դաշտ «ֆիլտր». Այս դաշտը կօգտագործվի զտիչ տեքստ մուտքագրելու համար.

Զտիչ օգտագործող էջի օրինակ.

LiveFilter հավելվածի օգտագործման օրինակ

Նյութի թիվ 1.
2-րդ կետ.
3-րդ կետ.
4-րդ կետ.
5-րդ կետ.
6-րդ կետ.
7-րդ կետ.
8-րդ կետ.
9-րդ կետ.
10-րդ կետ.

Plugin Code

(function($)($.fn.liveFilter = ֆունկցիա (aType) ( // Որոշեք, թե ինչ է զտվելու: var filterTarget = $(this); var child; if ($(this).is("ul")) ( երեխա = "li"; ) else if ($(this).is("ol")) (երեխա = "li"; ) else if ($(this).is("աղյուսակ")) (երեխա = " tbody tr"; ) // Սահմանել փոփոխականները var hide; var show; var filter; // Միջոցառում մուտքային տարրի համար $("input.filter").keyup(function() ( // Ստանալ զտիչի արժեքի զտիչ = $(this) .val(); // Ստացեք, թե ինչ պետք է թաքցնել և ինչ ցուցադրել hide = $(filterTarget).find(child + ":not(:Contains("" + filter + ""))"); show = $(filterTarget): ).find(child + ":Contains("" + filter + "")") // Անիմացնել տարրերը, որոնք պետք է թաքցնել և ցույց տալ, եթե (aType == "հիմնական") ( hide.hide() ; show.show() ;) else if (aType == «slide») ( hide.slideUp (500); show.slideDown (500); ) else if (aType == «fade») ( hide.fadeOut (400 ); show. fadeIn( 400); ))); // Պատվերով արտահայտությունը մեծատառերի համար անզգայուն տեքստային ֆունկցիայի համար պարունակում է() jQuery. expr[":"]: Պարունակում է = ֆունկցիա(a,i,m)( վերադարձնել jQuery(a .text().toLowerCase ().indexOf(m.toLowerCase())>=0; ); ) )) (jQuery);