Baza znanja

#pagemenu#

Tabulator mobilni HTML

Standardni predložak (template) HTML koda za mobilni prikaz tabulatora se nalazi u predmetu HTML templates na Elastyc-u pod nazivom Tabulator Mobilni HTML template (acckey 25S01001440).


`
<div class="tabulator_mob_html">
    <div class="tabulator_mob_html_row tabulator_mob_html_header">
        <div class="tabulator_mob_html_wrap">
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_radnik">` + tabulatorMobileHTMLRadnikFormatter(data.Radnik_display, data.post_emplimg) + `</div>
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_status">` + tabulatorMobileHTMLStatusFormatter(data.oddelek, data.Status, data.Statusname) + `</div>
        </div>
        <div class="tabulator_mob_html_wrap tabulator_mob_html_wrap_koji_se_ne_skuplja">
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_followup">` + tabulatorMobileHTMLFollowupFormatter(data.Followup) + `</div>
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_pregled_subjekta">` + tabulatorMobileHTMLPregledSubjektaFormatter("", data.Client) + `</div>
        </div>
        <div class="tabulator_mob_html_wrap tabulator_mob_html_wrap_koji_se_ne_skuplja" style="display: none">
            <div class="tabulator_mob_html_cell tabulator_mob_html_datum">` + tabulatorMobileHTMLDatumFormatter(data.datum) + `</div>
        </div>        
    </div>
    <div class="tabulator_mob_html_row tabulator_mob_html_client_row">
        <div class="tabulator_mob_html_wrap">
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_client tabulator_mob_html_text_strong">` + data.field2 + `</div>
        </div>
    </div>
    <div class="tabulator_mob_html_row tabulator_mob_html_tags_row">
        <div class="tabulator_mob_html_wrap ">
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_tags">` + tabulatorMobileHTMLDecode(data.post_embeddescription) + `</div>
        </div>
    </div>
</div>
`

Standardna polja

Svaki predmet se sastoji od standardnih i prilagodjenih (custom) polja.
U ovom HTML predlošku se nalaze standardna polja koja se koriste sa standardnim formaterima za mobilni prikaz Tabulatora.

Standardna polja koja se koriste u HTML predlošku su:
- Radnik_display - naziv odgovorne osobe
- post_emplimg - slika odovorne osobe
- oddelek - šifra predmeta
- Status - status predmeta
- Statusname - naziv statusa predmeta
- Followup - rok isporuke
- datum - datum kreiranja predmeta
- post_embeddescription - tagovi predmeta

NoSQL query na podešavanju predmeta

Polja koja je preporučeno uvek izvlačiti pored onih specifičnih su:
"Acckey",
"oddelek",
"Statusname",
"Status",
"Client",
"Client_name",
"datum",
"Followup",
"Radnik",
"Radnik_display",
"post_emplimg",
"post_embeddescription"
""post_id"
.......

Savet

Po potrebi osvežiti NoSQL bazu!

Standarni formateri i funckije

Standardni formateri kojai se koriste u HTML predlošku su:
- tabulatorMobileHTMLRadnikFormatter(radnik_display, post_emplimg) - formatira naziv i sliku odgovorne osobe i prikazuje sliku ako je ima, a ako nema inicijale.
- tabulatorMobileHTMLStatusFormatter(oddelek, Status, Statusname) - formatira status i boji prikazuje ga u boji
- tabulatorMobileHTMLDatumFormatter(datum) - formatira datum
- tabulatorMobileHTMLFollowupFormatter(datum) - formatira rok isporuke
- tabulatorPregledSubjektaFormatter(cell, client) - kreira dugme koje otvara formu Subjekt pregled

Napomena

Kada se formater koristi za mobilni, cell parametar se prosleđuje prazan (""), dok se ostali parametri prosleđuju!

Funkcija tabulatorMobileHTMLDecode(html) se koriste za dekodiranje enkodovanog HTML-a koji se prilikom elasticsearch inserta enkoduje.

Standardne CSS klase

Standardne klase koje mogu da se koriste u HTML-u za mobilni prikaz tabulatora su:
- tabulator_mob_html_wrap_koji_se_ne_skuplja - klasa koja se stavlja na element sa klasom tabulator_mob_html_wrap i ne dozvoljava da se taj element skupi, bez obzira na sirinu drugih elemenata
- tabulator_mob_html_text_strong - klasa koja se stavlja na element sa klasom tabulator_mob_html_cell i bolduje tekst

JavaScript kod

U JS kodu treba obratiti pažnju na par bitnih stvari:

Da postoji varijabla isMobile:

var isMobile = windowWidth <= 992

Da ako postoji soritranje tabele, da se osigura da se primenjuje samo za web varijantu tabele:

if (!isMobile) {
table.on("dataSorted", function (sorters) {
// ...
        });
    }

Primer JS koda

function buld_table_nosql_tabulator(jsonnew2) {
var sort_column = Object.keys(query_current["sort"][0])[0]
var sort_column1 = sort_column.replace(/.keyword/, "")
var sort_dir = query_current["sort"][0][sort_column]["order"]

var isMobile = windowWidth <= 992

var options = {
        height: window.innerWidth > 992 ? tableHeight + "px" : "100%",
        data: jsonnew2,
        columnHeaderSortMulti: false,
        initialSort: [{
            column: sort_column1,
            dir: sort_dir
        }],
        placeholder: "No Data Set",
        layout: window.innerWidth < 911 ? "fitColumns" : "fitColumns",
        scrollHorizontal: window.innerWidth < 911 ? "true" : "false",
        responsiveLayout: "collapse",
        sortMode: "remote",

        columns: windowWidth > 992 ? [
//web
                {
                    title: "",
                    field: "",
                    sorter: "string",
                    visible: true,
                    formatter: subjektEditFormatter,
                    width: 40
                },
// ...
] 
:
[
// mobilni - OBAVEZNO mora da stoji jedna placeholder kolona da bi rowFormatter radio
                {
                title: "",
                field: "placeholder",
                visible: false
                }, 
],
        rowFormatter: isMobile ? function (row) {
var data = row.getData();
console.log(data)
var html = `
                        <div class="tabulator_mob_html">
                            <div class="tabulator_mob_html_row tabulator_mob_html_header">
                                <div class="tabulator_mob_html_wrap">
                                    <div class="tabulator_mob_html_cell tabulator_mob_html_cell_radnik">` + tabulatorMobileHTMLRadnikFormatter(data.Radnik_display, data.post_emplimg) + `</div>
                                    <div class="tabulator_mob_html_cell tabulator_mob_html_cell_status">` + tabulatorMobileHTMLStatusFormatter(data.oddelek, data.Status, data.Statusname) + `</div>
                                </div>
                                <div class="tabulator_mob_html_wrap tabulator_mob_html_wrap_koji_se_ne_skuplja">
                                    <div class="tabulator_mob_html_cell tabulator_mob_html_cell_followup">` + tabulatorMobileHTMLFollowupFormatter(data.Followup) + `</div>
            <div class="tabulator_mob_html_cell tabulator_mob_html_cell_pregled_subjekta">` + tabulatorMobileHTMLPregledSubjektaFormatter("", data.Client) + `</div>
                                </div>
                                <div class="tabulator_mob_html_wrap tabulator_mob_html_wrap_koji_se_ne_skuplja" style="display: none">
                                    <div class="tabulator_mob_html_cell tabulator_mob_html_datum">` + tabulatorMobileHTMLDatumFormatter(data.datum) + `</div>
                                </div>        
                            </div>
                            <div class="tabulator_mob_html_row tabulator_mob_html_client_row">
                                <div class="tabulator_mob_html_wrap">
                                    <div class="tabulator_mob_html_cell tabulator_mob_html_cell_client tabulator_mob_html_text_strong">` + data.field2 + `</div>
                                </div>
                            </div>
                            <div class="tabulator_mob_html_row tabulator_mob_html_tags_row">
                                <div class="tabulator_mob_html_wrap ">
                                    <div class="tabulator_mob_html_cell tabulator_mob_html_cell_tags">` + tabulatorMobileHTMLDecode(data.post_embeddescription) + `</div>
                                </div>
                            </div>
                        </div>
                    `;
row.getElement().innerHTML = html;
        } : undefined,
    };

var table = new Tabulator("#nosql_tabulator", options);
nosql_tabulator = table

var handleRowClick = function (e, row) {
// ...
    };

table.on("rowClick", handleRowClick);

$("#nosql_tabulator").attr("init", "T")

table.on("tableBuilt", function () {
// ...
    });

if (!isMobile) {
table.on("dataSorted", function (sorters) {
// ...
        });
    }


table.on("scrollVertical", function (top) {
// ...
    })
}

#pagemenu#

Saznajte više