Piilotetut taulukon solut

v5 data-osan 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="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 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;
}
#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

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": "A Yksikkö X","tuot": "t01","sij": "s01","sek": "j","info": "esim y-tunnus tai muuta lisätietoa"},{"koodi": "v02","nim": "B Yksikkö Aaaa","tuot": "t01","sij": "s02","sek": "j","info": "lisätietoa"},{"koodi": "v03","nim": "C A-osasto","tuot": "t02","sij": "s03","sek": "y","info": "ei lisätietoa"}],"sijainti": [{"koodi" : "s01", "nim": "B Akaa","maski": true}, {"koodi" : "s02", "nim": "C Urjala","maski": true},{ "koodi" : "s03", "nim": "A 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": "kys1", "v01": ["ABCD EFG13","A14"],"v02": ["B13","B14"],"v03": ["c131313","cccccc14"]},{"koodi": "kys2", "v01": ["C13","C14 aaa aaaaaaaaaaaaaaaaa"],"v02": ["D13","D14"],"v03": ["v03 13","v04 14"]}]}',
    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");
    },
    
    /* myös arrayn voi järjestää */
  /*  jarjestaData: function(peruste, suunta) {
        alert("jarjesta");
        meta_obj.yksikko.sort(function (a, b) {
            return a["sij"] < b["sij"];
        });
        this.teeTaulukko();
    },*/
    
    jarjestaData:  function(peruste, suunta) {   
            var haku_obj = null;
            var haku_nimiobj = null;
     //   alert(peruste + " "+suunta);
            if (peruste == "yksikkonimi" || peruste === null) {
                    haku_obj = "nim";
                    haku_nimiobj = null;
            } else if...