Բովանդակություն
- 01. Բեռնել ֆայլերը
- 02. Ստեղծեք օրինակի տվյալներ
- 03. Սկսեք ծածկագրով դաս
- 04. Վերլուծեք արդյունքները
- 05. Փոխեք գույները ծրագրի կատարման ընթացքում
- 06. Ավելացրեք օրինակի տվյալներ
- 07. Բջջի կտտոցը իրադարձությունների մշակողների վրա
- 08. Վերլուծել իրադարձության պարամետրերը
- 09. Թիրախավորեք հատուկ բջիջները
- 10. ruաղկեպսակ ցուցադրություն
- 11. Տեղադրեք ձևաչափիչ
- 12. Սահմանեք որոշ տարբերակներ
- 13. Ավելացրեք կոճակ
- 14. Մուտք գործեք սեղանի օրինակ
- 15. Կիրառել զտիչ
- 16. Օգտագործեք զտիչի տարբեր գործողություններ
- 17. Ստեղծել հարմարեցված տողեր - I
- 18. Ստեղծել հարմարեցված տողեր - II
- 19. Կատարելիս փոփոխեք տվյալները
- 20. Թիրախային շրջանակի տարրերը
- 21. Իմացեք ավելին
Սեղանները պարունակում են բոլոր տեսակի առաջադեմ տեսողական հնարքներ, որոնք նպատակ ունեն դրանք ավելի լավ տեսք ունենալ: Սեղանի մատուցման կատարումը ավելի կարևոր է, քան երբևէ: Ինքնաթիռի վրա մի քանի պիտակ առաջացնելը խնդիր չէ, բայց դա արվում է բարդ սեղանների միջոցով, որոնք պատկերներ են ծանրաբեռնում համակարգերի վրա:
Theանցի համար նախատեսված աղյուսակները լավագույնս ստեղծվում են Tabulator համակարգի միջոցով: Likeիշտ այնպես, ինչպես վեբ ձևավորման բոլոր լավագույն գործիքները, որոնք նախատեսված են ձեր աշխատանքային հոսքը պարզեցնելու համար: JavaScript- ի այս շրջանակը պարունակում է վիրտուալ փաստաթղթերի օբյեկտների ծրագրավորման պարադիգմի առաջադեմ իրականացում: Սա նշանակում է, որ այն ստեղծում է ընդամենը մի քանի վիջեթ, որոնք այն վերամշակում է, երբ օգտագործողը պտտվում է ձեր ցուցակի միջով:
Բացի այդ, շրջանակն ապահովում է նաև հարմարավետության գործառույթների լայն շրջանակ: Աղյուսակի չափերը կարող են ճշգրտվել տվյալ պահին ցուցադրվող տվյալների վրա: Տարրերի վերաբերյալ տեղեկատվությունը կարելի է ձեռք բերել տարբեր աղբյուրներից, ներառյալ REST փոխանցումները: Tableրագրավորողները, ովքեր հետաքրքրված են սեղանի խմբագրման առաջադեմ փորձեր ստեղծելու մեջ, նույնպես կարող են ուրախանալ:
Ապրանքը աջակցում է զտմանը, տեսակավորմանը և օգտվողներին հնարավորություն է տալիս խմբագրել աղյուսակի տվյալները: Տվյալների վավերացման կամընտիր գործընթացը հետագայում կանխում է սխալները: Հաշվի առնելով, որ Tabulator- ը ամբողջովին բաց աղբյուր է, ձեր սեփական սեղանը մատուցող շարժիչը ծրագրավորելու համար քիչ պատճառ կա:
Wantանկանո՞ւմ եք փոխել ծածկագիրը: Ձևավորեք ձեր կայքը վեբ կայքեր ստեղծողներից մեկի հետ, և այս ուղեցույցը կօգնի ձեզ ճիշտ կատարել ձեր վեբ հոստինգի ծառայությունը:
- Ներբեռնեք այստեղ Tabulator- ի այս ձեռնարկին ուղեկցող ֆայլերը:
01. Բեռնել ֆայլերը
Tabulator- ը բաղկացած է CSS ոճաթերթից և որոշ JavaScript- ից: Շրջանակի մշակողները սերտ հարաբերություններ ունեն UnPKG բովանդակության մատակարարման ցանցի հետ: Մեր օրինակի կոդը այնտեղ աղբյուրներ է բերում, և ավելին, հայտարարում է պիտակ, որը պատասխանատու է աղյուսակը ցուցադրելու համար:
html> head> հղում href = "https://unpkg.com/ [email protected]/dist/css/tabulator. min.css" rel = "stylesheet"> սցենարի տեսակ = "text / javascript" src = "https://unpkg.com/tabulatortables@ 4.3.0 / dist / js / tabulator.min.js"> / սցենար> / ղեկավար> մարմին> div id = "example-table"> / div> / body> / html>
02. Ստեղծեք օրինակի տվյալներ
Ajax- ի բեռնման գործընթացով մեր ցուցադրումը սկսելը ծածկագիրը չափազանց երկար կդարձնի: Դրա շնորհիվ մենք սահմանափակվում ենք ստատիկ տվյալների ցուցադրմամբ:Ստեղծեք սցենարի պիտակ, որը պետք է տեղադրվի պիտակի տակ, և սկսեք տարրերի զանգվածից:
div id = "example-table"> / div> սցենար> var tableData = [{id: 1, անուն ՝ "AA", տարիքը ՝ "24", սեռ ՝ "արական", հասակ ՝ 1, col: "կարմիր" }, {id: 2, անուն ՝ "BB", տարիքը ՝ "48", սեռ ՝ "կին", հասակ ՝ 2, col: "կապույտ"},];
03. Սկսեք ծածկագրով դաս
Երբ զանգվածը պատրաստ է, մենք կարող ենք անցնել մատուցման գործընթացը: Աղյուսակի վիջեթները ներկայացված են Tabulator դասի օրինակով. Մեր առաջին խնդիրը մեկի ստեղծումն է: Tabulator- ն ակնկալում է ինչպես դաշտային հայտարարագրում, այնպես էլ հղում տվյալ տվյալների վրա:
var table = new Tabulator («# օրինակ-աղյուսակ», {տվյալներ ՝ tableData, սյունակներ ՝ [{վերնագիր ՝ «Անուն», դաշտ ՝ «անուն»), {վերնագիր ՝ «Տարիք», դաշտ ՝ «տարիք»}, { վերնագիր ՝ «Սեռ», դաշտ ՝ «սեռ»}, {վերնագիր ՝ «Բարձրություն», դաշտ ՝ «բարձրություն»}, {վերնագիր ՝ «Սիրված գույն», դաշտ ՝ «սյուն»},],}); / սցենար> / մարմին>
04. Վերլուծեք արդյունքները
Բացեք ծրագիրը և ձեր աչքերը հյուրասիրեք այս քայլին ուղեկցող նկարում ցույց տրված սեղանի վրա: Շրջանակը տրամադրում է բանականություն ՝ տեսակավորման համար: Սա ցույց է տրված երկրորդ նկարում, որը ստեղծվել է սեղանի վերնագիրը մի քանի անգամ կտտացնելով `տեսակավորումը սկսելու համար:
05. Փոխեք գույները ծրագրի կատարման ընթացքում
Tabulator- ի կոնստրուկտորը առաջարկում է տարբեր պարամետրեր: Չնայած այս պարամետրերից մի քանիսը սահմանափակվում են պարզապես ստատիկ տվյալներ տրամադրելով, մենք կարող ենք նաև տրամադրել իրադարձությունների կառավարիչներ: rowFormatter- ը աղյուսակում առաջացած յուրաքանչյուր տողի համար մեկ անգամ է կանչվում: Գործարկելիս, կոդը ցույց կտա այս քայլը ուղեկցող նկարում ցույց տրված արդյունքը:
var table = new Tabulator ("# # table-table", {.. rowFormatter: function (row) {var data = row.getData (); if (data.col == "կապույտ") {row.getElement () . style.backgroundColor = "# A6A6DF";} եթե (data.col == "կարմիր") {row.getElement (). style.backgroundColor = "# A60000";}},
06. Ավելացրեք օրինակի տվյալներ
Շրջանակի առաջադեմ առանձնահատկությունների ցուցադրումը պահանջում է լրացուցիչ տվյալներ: Դա կարող է հեշտությամբ ամրագրվել. Պարզապես վերադառնալ աղյուսակի տվյալների դաշտի հայտարարությանը և ավելացնել մի շարք լրացուցիչ գրառումներ:
սցենար> var tableData = [{id: 1, անուն ՝ ”AA”, տարիքը ՝ ”24”, սեռ ՝ ”արական”, հասակ ՝ 1, col: ”կարմիր”}, {id: 2, անուն ՝ ”BB” , տարիքը ՝ «48», սեռը ՝ «կին», հասակը ՝ 2, սյուն ՝ «կապույտ»}, {id: 3, անուն ՝ «BB», տարիքը ՝ «48», սեռ ՝ «կին», հասակ ՝ 3 , սյուն ՝ «սպիտակ»}, {id: 4, անուն ՝ «BB», տարիքը ՝ «48», սեռ ՝ «կին», հասակ ՝ 4, սյուն ՝ «կանաչ»}, {id: 5, անուն ՝ " BB », տարիքը ՝« 48 », սեռը ՝« կին », հասակը ՝ 5, սյունը ՝« վարդագույն »}, {id: 6, անունը ՝« BB », տարիքը ՝« 48 », սեռը ՝« կին », հասակ : 6, col: ”xxx”},];
07. Բջջի կտտոցը իրադարձությունների մշակողների վրա
Երկու մակարդակներով ավելացրեք իրադարձությունների կարգավարներ. Բացի ծրագրի սուբյեկտի համար բեռնաթափող սարքեր սեղմելուց, կարող եք նաև թիրախավորել աղյուսակի որոշակի տարրեր: Երկու մոտեցումներն էլ ունեն իրենց արժանիքները. Այս քայլին ուղեկցող ծածկագիրը ցույց է տալիս, թե ինչպես են տեղադրվում իրադարձությունների գլոբալ տեղական մշակողները:
var table = new Tabulator ("# example-table", {cellClick: function (e, cell) {}, {title: "Name", դաշտը ՝ "name", cellClick: function (e, cell) {// e - կտտոցի իրադարձության օբյեկտ // բջիջ - բջջային բաղադրիչ},}
08. Վերլուծել իրադարձության պարամետրերը
Իրադարձությունների մշակողները ստանում են երկու առարկա ՝ ձգանի մասին հետագա տեղեկատվությամբ: Մեր առաջին թեստը ներառում է փորձել ավելին իմանալ դրանց բովանդակության մասին: Դա լավագույնս հաջողվում է դուրս բերել զննարկչի հրամանի տողում: Այժմ գործարկեք օրինակի կոդը Firefox- ում ՝ տեսնելու, թե ինչպես է արդյունքն իրեն ներկայացնում:
var table = new Tabulator ("# օրինակ-աղյուսակ", {cellClick: function (e, cell) {console.log (e); console.log (cell);},
09. Թիրախավորեք հատուկ բջիջները
Այժմ մենք կարող ենք դրդել օգտվողին ընտրել որոշակի հավաքածու: Սկզբունքորեն, մեզ պետք է ընդամենը լարային համեմատություն: Tabulator- ը այս գործընթացը մի փոքր ավելի է ներգրավում `արժեքն ուղղակիորեն չտրամադրելով. Փոխարենը, օգտագործումը նախքան օբյեկտը պետք է փաթաթվի:
var table = new Tabulator («# օրինակ-աղյուսակ», {cellClick: ֆունկցիա (e, բջիջ) {if (cell._cell.value == ”AA”) {alert («Ողջույն, պարոն A. A!»); } console.log (բջիջ);},
10. ruաղկեպսակ ցուցադրություն
Տեղադրիչը կարող է տվյալների հիման վրա ստեղծել առաջադեմ ցուցադրման տարրեր: Դա արվում է օգնական դասերի միջոցով, որոնք հայտնի են որպես ձևաչափիչներ: Սրանք անում են ճիշտ այնպես, ինչպես դուք կարող եք ակնկալել և ձևավորել աղյուսակ: Teamարգացման թիմը մի քանիսն է տրամադրում անմիջապես դուրս:
11. Տեղադրեք ձևաչափիչ
Սյունակի զանգվածին ավելացրեք դրա հայտարարագիրը: Շրջանակը ավտոմատ կերպով կբացահայտի առաջադրանքը և կօգտագործի առաջացած վիջեթները ՝ տեղեկատվությունը ցուցադրելու համար: Մեր օրինակի դեպքում արժեքները վերափոխվում են աստղերի շարքի:
սյունակներ ՝ [{վերնագիր ՝ ”Անուն”, դաշտ ՝ ”անուն”}, {վերնագիր: ”Տարիք”, դաշտ ՝ ”տարիք”}, {վերնագիր: ”Սեռ”, դաշտ ՝ ”սեռ”}, {վերնագիր ”” Բարձրություն ”, Դաշտ ՝” բարձրություն ”, ձևաչափող ՝” աստղ ”}, {վերնագիր ՝” Սիրված գույն ”, դաշտ ՝” սյուն ”},],
12. Սահմանեք որոշ տարբերակներ
Մեր զանգվածը պարունակում է արժեքներ, որոնք տատանվում են 1-ից մինչև 6-ը: Լռելյայն, ձևաչափը սահմանափակվում է հինգ աստղով: Մենք կարող ենք աշխատել այս խնդրի շուրջ ՝ հատկանիշ դնելով ՝ մատուցման վարքագիծը փոփոխելու համար:
սյունակներ ՝ [{վերնագիր ՝ ”Անուն”, դաշտ ՝ ”անուն”}, {վերնագիր: ”Տարիք”, դաշտ ՝ ”տարիք”}, {վերնագիր: ”Սեռ”, դաշտ ՝ ”սեռ”}, {վերնագիր ”” Բարձրություն ”, Դաշտ ՝” բարձրություն ”, ձևաչափող ՝” աստղ ”, formatterParams: {աստղեր: 6}}, {վերնագիր ՝” Սիրված գույն ”, դաշտ ՝” սյուն ”},],
13. Ավելացրեք կոճակ
Շրջանակի որոշ առաջադեմ գործառույթների ցուցադրումը պահանջում է կոճակ, որի միջոցով հնարավոր է փոխազդեցություն սկսել: Վերադարձեք փորձարկման զենքի նշագծման մաս և ավելացրեք կոճակի հայտարարությունը, ինչպես ցույց է տրված: Հաշվի առնելով, որ մեր սեղանը ներկայումս չի խանգարում էկրանն ընդլայնելուն, կոճակը պարզապես կհայտնվի սեղանի տակ:
body> div id = "example-table"> / div> br> կոճակ onclick = "workThis ()"> Կիրառել գործողություն! / կոճակ> սցենար> ֆունկցիա workThis () {} / սցենար> սցենար> var tableData = [
14. Մուտք գործեք սեղանի օրինակ
Աղյուսակի օրինակ մուտք գործելը պահանջում է, որ այն պահենք հանրային փոփոխականում: Հաշվի առնելով, որ մենք ծրագրավորում ենք զուտ զննարկչի վրա, պատուհանի օբյեկտը լավ տեղ է արժեքը պահելու համար:
սցենար> var tableData = [{id: 1, անուն ՝ "A A", տարիքը ՝ "24", սեռ ՝ "տղամարդ", հասակ ՝ 1, col: "կարմիր"},. , , }); windows.myTable = աղյուսակ; / սցենար>
15. Կիրառել զտիչ
Կիրառեք զտիչները setFilter մեթոդով: Այն տևում է երեք պարամետր `նախ` օգտագործվող սյունակի ID- ն: Երկրորդ հերթին, համեմատության օպերատորը փոխանցվում է, և, վերջապես, համեմատության արժեքը: Մեր օրինակի ծրագրի դեպքում կտտացրեք կոճակին, որպեսզի երեք տող անհետանա:
սցենար> ֆունկցիա workThis () {window.myTable. setFilter ("բարձրություն", ">", 3); } / սցենար>
16. Օգտագործեք զտիչի տարբեր գործողություններ
Tabulator- ը տրամադրում է ընդհանուր առմամբ յոթ օպերատոր, որոնք կարող են օգտագործվել `անցնելով իրենց տողը: Այս քայլը ուղեկցող ցուցանիշը վերցված է արտադրանքի փաստաթղթերից: Այն տրամադրում է օպերատորի գործառույթի նկարագրություն:
17. Ստեղծել հարմարեցված տողեր - I
Մեր վերջին «մեծ» առաջադրանքը ներառում է ամբողջ շարքի փոխարինումը մի փոքր անհատականացված նշագրմամբ: Դրա համար մենք պետք է սկսենք rowFormatter- ի տեղադրմամբ և գեներատորի գործառույթով ապահովմամբ:
var table = new Tabulator («# օրինակ-աղյուսակ», {տվյալներ ՝ tableData, սյունակներ ՝ [{վերնագիր ՝ ”Անուն”, դաշտ ՝ ”անուն”}], բարձրություն ՝ ”350 px”, դասավորություն ՝ ”fitColumns”, resizableColumns: false, rowFormatter: գործառույթ (տող) {var տարր = տող. getElement (), տվյալներ = row.getData (), լայնություն = տարր. օֆսեթ լայնություն, շարքի աղյուսակ, բջջային պարունակություն; while (element.firstChild) element.removeChild (element.firstChild) ;
18. Ստեղծել հարմարեցված տողեր - II
Օրվա երկրորդ մասը ներառում է իրական DOM հատվածի ստեղծում: Մեր կոդը ստեղծում է TD պիտակ, որը պարունակում է տեղեկատվություն ընթացիկ տողի համար և դրանից հետո այն վերադարձնում է շրջանակ:
rowTable = փաստաթուղթ: createElement («աղյուսակ») rowTable.style.width = (լայնություն - 18) + «px»; rowTabletr = փաստաթուղթ: createElement («tr»); cellContents = "td>" + data.id + "/ td>"; cellContents + = "td> div> strong> Name: / strong>" + data.name + "/ div> / td>" rowTabletr.innerHTML = cellContents; շարասեղան appendChild (rowTabletr); element.append (rowTable); },}); table.setData (tableData);
19. Կատարելիս փոփոխեք տվյալները
Tabulator- ը չի սահմանափակվում ստատիկ տվյալների ցուցադրմամբ: Այս քայլին ուղեկցող ծածկագիրը նկարագրում է ծրագրի կատարման ընթացքում տեղեկատվության փոփոխման չորս եղանակ: Հիշեք, որ իրական զանգվածի փոփոխությունները չեն վերահսկվում. Զանգվածի արժեքները փոխելը չի հանգեցնում ավտոմատ թարմացման:
$ («# Ավելացնել տող»): կտտացնել (ֆունկցիան () {table.addRow ({});}); $ («# Del-row»): կտտացրեք (function () {table.deleteRow (1);}); $ («# Մաքրել»). Կտտացնել (ֆունկցիա () {table.clearData ()}); $ («# Վերականգնել»): կտտացնել (ֆունկցիան () {table.setData (աղյուսակ);});
20. Թիրախային շրջանակի տարրերը
Երբ Excel- ն առաջին անգամ թույլ տվեց օգտվողներին կիրառել ոճեր, հստակությունը բարելավվեց: Հիմնվելով վիրտուալ DOM գաղափարի վրա ՝ ապրանքը առաջացնում է ցուցադրման վիդջեթների շարք: Նրանք ունեն նախորոշված ID- ների շարք, որոնք հարմար թվարկված են այստեղ:
21. Իմացեք ավելին
Tabulator- ի փաստաթղթավորումը կազմված է մի փոքր տարօրինակ ձևով: Այստեղ գտնված օրինակների պատկերասրահը շփման առաջին հիանալի կետն է. Կտտացրեք Վերնագրերի կողքին գտնվող Փաստաթղթերի հղումներին, որպեսզի փոխանցեք քննարկվող API- ի ավելի մանրամասն նկարագրությունը:
Բազմաթիվ ակտիվներ ստացե՞լ եք կայք ստեղծելու համար պահելու համար: Փորձեք ամպի լավագույն պահեստը շրջապատում:
