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>
        <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"
.......

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

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 = window.innerWidth <= 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 = window.innerWidth <= 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: window.innerWidth > 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>
                                <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