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

James před 5 měsíci

This kind of game gives a real experience of

reagovat

James před 4 měsíci

Hi there! I could have sworn I've been to this blog before but after checking through some of the post I realized it's new to me. Nonetheless, I'm definitely happy I found it and I'll be bookmarking and checking back frequently!

reagovat

James před 4 měsíci

Hi there! I could have sworn I've been to this blog before but after checking through some of the post I realized it's new to me. Nonetheless, I'm definitely happy I found it and I'll be bookmarking and checking back frequently!

reagovat

James před 3 měsíci

Aw, this was a very nice post. In thought I want to put in writing like this moreover taking time and actual effort to make an excellent article but what can I say I procrastinate alot and not at all seem to get something done.

reagovat

James před 3 měsíci

Aw, this was a very nice post. In thought I want to put in writing like this moreover taking time and actual effort to make an excellent article but what can I say I procrastinate alot and not at all seem to get something done.

reagovat

James před měsícem

Hey, thanks for the blog article.Really looking forward to read more. Much obliged.

reagovat

Přidat komentář

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