Piilotetut taulukon solut

v7 oma objekti taulukolle

by Teppo Jussmäki

HTML

<p>Seurantavuodet</p>
<div id="vuosivaldiv"><form id="piilotusvuosi" method="POST"></form>
    <input type="checkbox" id="vuosi2013" value="Vuosi 2013" checked="yes"   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>

<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" 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-color: #ECF7E4}
tr:nth-child(odd) {background-color: #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

/* Parempi olisi, jos käyttä suodattaisi vain aina yhdellä perusteella kerrallaan
tämä peruste määräytyis taulukossa tapahtuvien klikkausten mukaan: esim. klikkaa julkinen, suodatin julkinen aktivoituu ja sen voi poistaa erikseen.
Toisaalta miten saisi esim. Helsingin yksityiset listattua kerralla?*/


var taulukkoLuokka = new Class({
    ots_txt:  null,
    ots_html: null,
    rivit2013: null,
    rivit2014: null,
    metarivit: null,
    metaextra: null,
    
    teeTaulukko: function(yksikot, vastaukset, tuottajat, sijainnit, kysymykset) {
        rivit2013 = [];
        rivit2014 = [];
        metarivit = [];
        metaextra = [];
        /* otsikkorivi */
        ots_html  = ["Yksikkö   <a href='#' onClick='obj_sivu.jarjestaData(\"yksikkonimi\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"yksikkonimi\", \"za\")'>↓</a>",
                     "Sijainti   <a href='#' onClick='obj_sivu.jarjestaData(\"sijainti\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"sijainti\", \"za\")'>↓</a>",
                     "Tuottaja   <a href='#' onClick='obj_sivu.jarjestaData(\"tuottaja\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"tuottaja\", \"za\")'>↓</a>",
                     "Sektori   <a href='#' onClick='obj_sivu.jarjestaData(\"sektori\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"sektori\", \"za\")'>↓</a>"];
        ots_txt = ["Yksikkö", "Lisätieto", "Sijainti", "Tuottaja", "Sektori", "Vuosi"];
        Object.each(kysymykset, function(kys_obj, kys_key){
            ots_html[ots_html.length] = kys_obj.ots;
            ots_txt[ots_txt.length] = kys_obj.ots;
        });
        
        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; }
           ...