Piilotetut taulukon solut

v3 lajittelumahdollisuudella

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_ots": {"kys1" : "Kysymys nro 1", "kys2" : "Kysymys nro 2"}, "Kysymys_maski" : { "kys1": true, "kys2": false }, "Yksikko_maski" : { "v01": true, "v02" : true, "v03" : true } , "Yksikko_nimi" : {"v01": "Yksikkö X", "v02" : "Yksikkö Aaaa", "v03": "A-osasto"}, "Yksikko_sijainti" : {"v01": "s01", "v02": "s02", "v03":"s03"} , "Sijainti_nimi" : {"s01" : "Akaa", "s02" : "Urjala" , "s03" : "Helsinki" }, "Yksikko_info" : {"v01" : "esim y-tunnus tai muuta lisätietoa", "v02" : "jokin muu tieto" , "v03" : "Ei lisätietoja"}, "Sijainti_maski" : {"s01":true, "s02":true , "s03" : true}, "Yksikko_tuottaja" : {"v01":"t01", "v02":"t01", "v03": "t02"}, "Tuottaja_nimi" : {"t01" : "Akaan ja Urjalan yhteistoiminta-alue", "t02" : "Helsingin yksityinen tuottaja"}, "Tuottaja_maski" : { "t01" : true, "t02" : false } , "Yksikko_sektori" : { "v01" : "j", "v02" : "j", "v03" : "y"}, "Sektori_maski" : { "j" : true, "y" : true} },"data": [ { "koodi": "v01", "vast" : {"kys1": ["ABCDEFG13", "A14"],  "kys2" : ["B13", "B14"]}}, { "koodi" : "v02" , "vast" : {"kys1": ["C13", "C14 a a a aaaa aaa a a aa a a a aaa"], "kys2" : ["D13", "D14"]}}, { "koodi" : "v03" , "vast" : {"kys1": ["xx13", "neljätoista"], "kys2" : ["131313", "141414141"]}} ]}',
    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) {
       /* if (peruste == "yksikkonimi" || peruste === null) {
            data_obj.sort(function(rivi1, rivi2) {
                var vert1 = rivi1.koodi;
  ...