Piilotetut taulukon solut

v2 vanhat poistettu

by Teppo Jussmäki

HTML

<table id="jsontaulu"></table>
<p>Seurantavuodet</p>
<select id="vuosivalinta">
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="vert">Vertailu 2014 ja 2013</option>
</select>
<p>Sarakesuodattimet</p>
<div id="kysvaldiv"><form id="jsonvalintakys"></form>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintakys, 'yes')">Valitse kaikki</a>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintakys, '')">Poista valinnat</a>
</div>
<p>Rivisuodattimet</p>
<select id="suodatinandor">
  <option value="AND">Yksikkö toteuttaa kaikki rivisuodattimet</option>
  <option value="OR">Yksikkö toteuttaa jonkin rivisuodattimista</option>
</select>
<div id="yksikkovaldiv"><form id="jsonvalintayksikko"></form>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintayksikko, 'yes')">Valitse kaikki</a>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintayksikko, '')">Poista valinnat</a>
</div>
<div id="sijaintivaldiv"><form id="jsonvalintasijainti"></form>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintasijainti, 'yes')">Valitse kaikki</a>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintasijainti, '')">Poista valinnat</a>
</div>
<div id="tuottajavaldiv"><form id="jsonvalintatuottaja"></form>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintatuottaja, 'yes')">Valitse kaikki</a>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintatuottaja, '')">Poista valinnat</a>
</div>

<button type="button" onClick="obj_taulukko.teeTaulukko()">Piirrä taulukko uudestaan</button>

CSS

table, td, th {
   border: 1px solid black;
}
tr:nth-child(even) {background: #EEE}
tr:nth-child(odd) {background: #FFF}

td div.metainfo {
   background-color: #FFFFCC;
   z-index : 10;
   border : 1px solid black;
   padding: 5px;
   visibility: hidden;
   display : block;
   position: absolute;
}
td:hover div.metainfo
{
   visibility: visible;
   min-height : 70px;
   width: 150px;
} 

#kysvaldiv
{
    background-color : #CCFFFF;
    margin: 1em 0em 1em 0em;
}
#yksikkovaldiv
{
    background-color : #FFCCFF;
    margin: 1em 0em 1em 0em;
}
#sijaintivaldiv
{
    background-color : #CCFFCC;
    margin: 1em 0em 1em 0em;
}
#tuottajavaldiv
{
    background-color : #FFFFCC;
    margin: 1em 0em 1em 0em;
}
.val_a:link, .val_a:visited
{
    color: blue;
}

div.y13 { border-top-style: dotted; }
div.y13::before { content: "2013 : "; }
div.y14::before { content: "2014 : "; }

JavaScript

/* pitäisi kyllä olla Tuottaja_nimi, Tuottaja_sijainti ja Tuottaja */
/* kuntakyselyssä Tuottaja_nimi voi olal yta ja sijainti sisältää luettelon kaikista kunnista tai poistaa näkyvistä */


var taulukkoLuokka = new Class({
    json_txt: '{"meta": {"Kysymys_ots": {"kys1" : "Kysymys nro 1", "kys2" : "Kysymys nro 2"}, "Kysymys_maski" : { "kys1": true, "kys2": false }, "Yksikko_maski" : { "v01": true, "v02" : true } , "Yksikko_nimi" : {"v01": "Yksikkö 1", "v02" : "Yksikkö 2"}, "Yksikko_sijainti" : {"v01": "s01", "v02": "s02"} , "Sijainti_nimi" : {"s01" : "Akaa", "s02" : "Urjala" }, "Yksikko_info" : {"v01" : "esim y-tunnus tai muuta lisätietoa", "v02" : "jokin muu tieto" }, "Sijainti_maski" : {"s01":true, "s02":true}, "Yksikko_tuottaja" : {"v01":"t01", "v02":"t01"}, "Tuottaja_nimi" : {"t01" : "Akaan ja Urjalan yhteistoiminta-alue"}, "Tuottaja_maski" : { "t01" : true } },"data": { "v01": { "kys1": ["ABCDEFG13", "A14"], "kys2" : ["B13", "B14"]}, "v02": { "kys1": ["C13", "C14"], "kys2" : ["D13", "D14"]} }}',
    vuosi2013: null,
    vuosi2014: null,
    data_obj: null,
    meta_obj: null,
    ikkuna: null,
    
    lueJSON: function() {
        var tmp_json = JSON.decode( this.json_txt );
        meta_obj = tmp_json.meta;
        data_obj = tmp_json.data;
    },
    
    teeTaulukko: function() {
        var xtaulukko = $('jsontaulu');
        Element.empty(xtaulukko);
        
        
        this.lueValintaruudut();
        // paikallinen kopio, jotta ei tule scope-ongelmaa (pitäisi varmaan löytää hienopi ratkaisu)
        var vuosi2014_ = this.vuosi2014;
        var vuosi2013_ = this.vuosi2013;
        
        var xrivi = new Element('tr', {class: "otsikkorivi"});
        xrivi.inject(xtaulukko);
        
        /* sarakeotsikot */
        var xsarake1 = new Element('th', {html: "Yksikkö"});
        xsarake1.inject(xrivi);
        var xsarake2 = new Element('th', {html: "Sijainti"});
        xsarake2.inject(xrivi);
        var xsarake3 = new Element('th', {html:...