Redesign column selection

This commit is contained in:
hodasemi 2018-11-03 12:25:12 +01:00
parent 23d613ba0f
commit 938d70abb9
3 changed files with 43 additions and 39 deletions

View file

@ -3,17 +3,13 @@
background: linear-gradient(to bottom, lightgrey, white); background: linear-gradient(to bottom, lightgrey, white);
overflow: hidden; overflow: hidden;
border: 1px solid lightgrey; border: 1px solid lightgrey;
} }
.topnav ul { .topnav ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
} }
.topnav li { .topnav li {
margin: 5px; margin: 5px;
@ -22,7 +18,6 @@
.pic{ .pic{
display: block; display: block;
height: 75px; height: 75px;
} }
.pic:hover { .pic:hover {
@ -71,8 +66,6 @@ h1 {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 26px; font-size: 26px;
margin: 10px; margin: 10px;
} }
.text { .text {
@ -111,7 +104,6 @@ table#t01 tr:nth-child(even) {
table#t01 tr:nth-child(odd) { table#t01 tr:nth-child(odd) {
background-color: lightgrey; background-color: lightgrey;
height: 2em; height: 2em;
} }
table#t01 th { table#t01 th {
@ -135,10 +127,10 @@ th {
border: 1px solid; border: 1px solid;
float: left; float: left;
padding: 2em; padding: 2em;
min-height: 150px;
min-width: 250px;
} }
.didi { .Div {
border: 5px solid green; display: none;
float: left;
padding: 2em;
} }

View file

@ -65,9 +65,8 @@
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a> At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
</p> </p>
<!-- <div id="list1" class="dropdown-check-list" tabindex="100"> </div> --> <button href="javascript:/" onClick="div_change('options')">Show Options</button>
<ul id="list1"></ul> <div id="options" class=Div></div>
<p id="debug"></p>
<table id="t01"></table> <table id="t01"></table>
<script> <script>
@ -76,22 +75,6 @@
</script> </script>
</div> </div>
<div class="did">
<h2>Listenüberschrift</h2>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
</div>
<div class="didi">
<h2>Listenüberschrift</h2>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
</div>
<footer> <footer>
<hr style="border: 1px solid lightgreen"> <hr style="border: 1px solid lightgreen">
<p>Copyright © 2018 world_data</p> <p>Copyright © 2018 world_data</p>

View file

@ -39,7 +39,6 @@ function rerequestFile(path, columns) {
function processData(csv, path) { function processData(csv, path) {
var table = ""; var table = "";
var checkbox = "";
// split rows // split rows
var allTextLines = csv.split(/\r\n|\n/); var allTextLines = csv.split(/\r\n|\n/);
@ -55,16 +54,36 @@ function processData(csv, path) {
table += data[j]; table += data[j];
table += "</th>"; table += "</th>";
/*
// create dropdown elements // create dropdown elements
checkbox += "<li>"; checkbox += "<li>";
checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>"; checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
checkbox += data[j]; checkbox += data[j];
checkbox += "</li>"; checkbox += "</li>";
*/
} }
// checkbox += "</ul>";
table += "</tr>"; table += "</tr>";
var checkbox = "";
for (var j = 0; j < data.length; j++) {
var test = j % 3;
if (test == 0) {
checkbox += "<div class='did'><ul>";
}
checkbox += "<li>";
checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
checkbox += data[j];
checkbox += "</li>";
if (test == 2) {
checkbox += "</ul></div>";
}
}
// create table content // create table content
for (var i = 1; i < allTextLines.length; i++) { for (var i = 1; i < allTextLines.length; i++) {
var data = allTextLines[i].split(','); var data = allTextLines[i].split(',');
@ -81,18 +100,22 @@ function processData(csv, path) {
} }
document.getElementById('t01').innerHTML = table; document.getElementById('t01').innerHTML = table;
document.getElementById('list1').innerHTML = checkbox; document.getElementById('options').innerHTML = checkbox;
} }
function toggleColumn(file) { function toggleColumn(file) {
var iterator = document.getElementById('list1').childNodes; var inner_div = document.getElementById('options').childNodes;
var activated_columns = []; var activated_columns = [];
for (i = 0; i < iterator.length; i++) { for (i = 0; i < inner_div.length; i++) {
var checkbox = iterator[i].children[0]; var list = inner_div[i].children[0].childNodes;
if (checkbox.checked) { for (j = 0; j < list.length; j++) {
activated_columns.push(checkbox.id); var checkbox = list[j].children[0];
if (checkbox.checked) {
activated_columns.push(checkbox.id);
}
} }
} }
@ -207,3 +230,9 @@ function sortTable(n) {
} }
} }
} }
function div_change(strID) {
document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'block' : 'none';
document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'block' : 'none';
document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'block' : 'none';
}