Piilotetut taulukon solut

v6 oma objekti taulukolle

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>Seurantavuodet v2</p>
<div id="vuosivaldiv"><form id="piilotusvuosi" method="POST"></form>
    <input type="checkbox" id="vuosi2013" value="Vuosi 2013"  onClick="obj_sivu.vuosiEsitys()">Vuosi 2013</input>
    <input type="checkbox" id="vuosi2014" value="Vuosi 2014" checked="yes"  onClick="obj_sivu.vuosiEsitys()">Vuosi 2014</input>
</div>

<p>Sarakesuodattimet</p>
<div id="kysvaldiv"><form id="jsonvalintakys" method="POST"></form>
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintakys, 'yes')">Valitse kaikki</a>  |  
<a href="#" class="val_a" onClick="obj_sivu.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" method="POST"></form>
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintasijainti, 'yes')">Valitse kaikki</a>  |  
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintasijainti, '')">Poista valinnat</a>
</div>
<div id="tuottajavaldiv"><p class="suod_txt">Tuottaja</p><form id="jsonvalintatuottaja" method="POST"></form>
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintatuottaja, 'yes')">Valitse kaikki</a>  |  
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintatuottaja, '')">Poista valinnat</a>
</div>
<div id="sektorivaldiv"><p class="suod_txt">Sektori</p><form id="jsonvalintasektori" method="POST"></form>
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintasektori, 'yes')">Valitse kaikki</a>  |  
<a href="#" class="val_a"...

CSS

table, td, th {
   border: 1px solid black;
}
td,th {
    padding: 3px;
}
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.v2014 {
    border-top-width: 1px;
    border-top-style: dotted;
}
div.v2013::before { content: "2013 : "; }
div.v2014::before { content: "2014 : "; }

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

JavaScript

var taulukkoLuokka = new Class({
    ots_rivi: null,
    ots_html: null,
    rivit2013: null,
    rivit2014: null,
    metarivit: null,
    metaextra: null,
    
    teeTaulukko: function(yksikot, vastaukset, tuottajat, sijainnit) {
        rivit2013 = [];
        rivit2014 = [];
        metarivit = [];
        metaextra = [];
        yksikot.each(function(y_obj, jarj0) {
            var s_obj = null;
            var t_obj = null;
            var sk_maski  = null;
            
            var loytyi_sijainti = sijainnit.some(function(tmp_obj, tmp_index){
                if (y_obj.sij == tmp_obj.koodi ) { s_obj = tmp_obj; return true; }
            });
            var loytyi_tuottaja = tuottajat.some(function(tmp_obj, tmp_index){
                if (y_obj.tuot == tmp_obj.koodi ) { t_obj = tmp_obj; return true; }
            });

            // riviotsikot
            var xrivinimi1 = "(Tuntematon yksikkö)";
            var xrivinimi2 = "(Tuntematon sijainti)";
            var xrivinimi3 = "(Tuntematon tuottaja)";
            var xrivinimi4 = "(Tuntematon sektori)";         
            var xmetateksti = "Ei lisätietoja";
            // riville tulevat yksikön, sijainnin ja tuottajan nimet
            if (y_obj.nim !== undefined) {xrivinimi1 = y_obj.nim;}
            if (s_obj.nim !== undefined) {xrivinimi2 = s_obj.nim;}
            if (t_obj.nim !== undefined) {xrivinimi3 = t_obj.nim;}
            if (y_obj.info !== undefined) {xmetateksti = y_obj.info;}
            // sektori käsitellään erikseen
            if(y_obj.sek == "j"){xrivinimi4 = "Julkinen";}
            if(y_obj.sek == "y"){xrivinimi4 = "Yksityinen";}

            this.metarivit[this.metarivit.length] =
                [xrivinimi1, xrivinimi2, xrivinimi3, xrivinimi4];
            this.metaextra[this.metaextra.length] = xmetateksti;
            
            var solut2013 = [];
            var solut2014 = [];
        vastaukset.each(function(solu_tmp, jarj1) {
            var soluarvo =...