Potřeba mít v tabulce nějaký druh tooltip nápovědy je celkem běžná. Dnes si ukážeme jak poměrně jednoduše zprovoznit takovou nápovědu v jQuery tabulce, konkrétně SlickGrid.

Definice tabulky

Nejdřív si nějakou tu jednoduchou SlickGrid tabulku nadefinujeme, třeba nějak takhle

<div id="myGrid" style="width:350px;min-height:300px; margin: 30px 0 0 30px;"></div>
var dataView;
var grid;
var mydata = "[{\"id\": \"id_1\", \"realId\": \"26050\", \"label\": \"Test\" }, {\"id\": \"id_2\", \"realId\": \"26054\", \"label\": \"Test 2\"}]";
var data = jQuery.parseJSON(mydata);
var columns = [
        {id: "nazev", width: 350,  name: "Nazev", field: "label"}
];

$(function () {
        dataView = new Slick.Data.DataView({ inlineFilters: true });
                dataView.setItems(data);

        grid = new Slick.Grid("#myGrid", dataView, columns);
})

Abychom zobrazili tooltip, potřebujeme nějak pracovat s daty ve sloupcích, nějak je formátovat, a na to máme – počkejte si na to – formattery! Formatter je funkce, která nám data v tabulce přechroustá podle potřeb. Pojďme jeden přidat:

var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
        value = value + "<span class='tooltip' id='tooltip"+dataContext["realId"]+"' style='display: none;'>"+value+" tooltip !</span>"
        return value;
};

Tahle funkce udělá to, že za každou hodnotu v řádku tabulky přidá další schovaný řádek s nějakou hodnotou. Bystřejší už uhodli – tentýž řádek na konci zázračně odschováme a vykouzlíme tak náš tooltip.

Funkci ale musíme nějak někde zavolat a proto upravíme kód takto:

var columns = [
        {id: "nazev", width: 350,  name: "Nazev", field: "label", formatter: TaskNameFormatter}
];

Tím jsme změnili definici tabulky a v kódu v prohlížeči by už měly být vidět schované položky.

Zbývají už jen dvě věci: zjistit jak aktivovat naše odschovávátko na hover událost a poplácat se po rameni. SlickGrid na to má konkrétně tento nástroj:

grid.onMouseEnter.subscribe(function(e, args) {
    var cell = grid.getCellFromEvent(e)
    var row = cell.row
    var item = dataView.getItem(row);
    $("#tooltip"+item.realId+"").stop().show('fast');
});

Kód mluví jasnou řečí: na objektu grid jsme při hoveru myší ukázali prvek, který jsme předtím vytvořili a schovali. A protože všechno se omrzí, necháme ho po odjetí myší zase pěkně zmizet:

grid.onMouseLeave.subscribe(function(e, args) {
  var cell = grid.getCellFromEvent(e)
  var row = cell.row
  var item = dataView.getItem(row);
  $("#tooltip"+item.realId+"").stop().hide('fast');
});

Slovo na závěr

Tak a to je vše – kompletní funkční kód pro ty, kterým se nepodařilo poslepovat.

Řešení je to takové nanicovaté, protože schovaný tooltip vypisujeme do kódu pro všechny řádky. V případě textu to nemusí tak vadit, ale například já budu potřebovat zobrazovat obrázky a to se pro velký počet řádků prodraží. Zřejmě budu muset tahat data ajaxem až na požádání, nebo něco v tom smyslu.

Taky vyvstává problém kde přesně tooltip zobrazovat, tabulka totiž zatvrzele odmítá respektovat existenci čehokoliv mimo svůj rámec, ale to už je na hrátky s CSS. Ani samotná SlickGrid komponenta se mi nakonec moc nelíbí, ale lepší zatím nemám.

Děkuji za pozornost a u našeho pořadu opět příště zdarec.

Komentáře

Mark před 3 měsíci

If you are going for best contents like myself, simply go to see this site all

reagovat

Mark před 3 měsíci

If you are going for best contents like myself, simply go to see this site all

reagovat

generic_cialis před měsícem

http://v1buyonline.com/ , mg elsewhere let it turn into for a.

reagovat

ronrogers před 19 dny

Looks good.Happy for sharing.How can you write this good post?Its an amazing one to read and I am thankful for you to share it with us.You will get academic integrity, quality and punctuality from sites available now. Hence, each of the paper done at custom essays has a touch of professionalism.So try to write better and make your essay better at any level.Refer custom essay (http://www.essayguardian.com/) if you do not know anything about writing works and you will get better information such as tips and guidelines for your works.

reagovat

Přidat komentář

  • Můžete použít Texy syntaxi, HTML není povoleno
  • Například: *kurzíva*, **tučně**, "text odkazu":adresa