Piilotetut taulukon solut

v4 uudistettu json-rakenne

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"><p class="suod_txt">Yksikkö</p><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"><p class="suod_txt">Sijainti</p><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"><p class="suod_txt">Tuottaja</p><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>
<div id="sektorivaldiv"><p class="suod_txt">Sektori</p><form id="jsonvalintasektori"></form>
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintasektori, 'yes')">Valitse kaikki</a>  |  
<a href="#" class="val_a" onClick="obj_taulukko.valKaikki(jsonvalintasektori, '')">Poista valinnat</a>
</div>

<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;
}
#sektorivaldiv
{
    background-color : #CCCCCC;
    margin: 1em 0em 1em 0em;
}
a, a:visited
{
    color: blue;
    text-decoration: none;
}

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

p.suod_txt { font-size : 10pt; margin-bottom: 0em; }

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": [ {"koodi" : "kys1", "ots": "Kysymys nro 1","maski": true}, {"koodi":"kys2", "ots": "Kysymys nro 2","maski": true} ],"yksikko": [{"koodi": "v01","nim": "Yksikkö X","maski": true,"tuot": "t01","sij": "s01","sek": "j","info": "esim y-tunnus tai muuta lisätietoa"},{"koodi": "v02","nim": "Yksikkö Aaaa","maski": true,"tuot": "t01","sij": "s02","sek": "j","info": "lisätietoa"},{"koodi": "v03","nim": "A-osasto","maski": true,"tuot": "t02","sij": "s03","sek": "y","info": "ei lisätietoa"}],"sijainti": [{"koodi" : "s01", "nim": "Akaa","maski": true}, {"koodi" : "s02", "nim": "Urjala","maski": true},{ "koodi" : "s03", "nim": "Helsinki","maski": true}],"tuottaja": [{"koodi" :"t01","nim": "Akaan ja Urjalan yhteistoiminta-alue","maski": true}, {"koodi" :"t02","nim": "Helsingin yksityinen","maski": true}],"sektori_maski": {"j": true,"y": true}},"data": [{"koodi": "v01", "vast" : {"kys1": ["ABCD EFG13","A14"],"kys2": ["B13","B14"]}},{"koodi": "v02", "vast" : {"kys1": ["C13","C14 aaa aaaaaaaaaaaaaaaaa"],"kys2": ["D13","D14"]}},{"koodi": "v03", "vast" : {"kys1": ["xx13","neljätoista"],"kys2": ["131313","141414 141"]}}]}',
    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;
       // this.jarjestaData("yksikkonimi", "az");
    },
    
    jarjestaData: function(peruste, suunta) {
            var haku_obj;
            var haku_nimiobj;
            if (peruste == "yksikkonimi" || peruste === null) {
                    haku_obj = meta_obj.Yksikko_nimi;
                    haku_nimiobj = null;
            } else if (peruste ==...