Add column selection
This commit is contained in:
parent
e49fde0d9c
commit
07fe15952a
2 changed files with 84 additions and 22 deletions
|
|
@ -12,7 +12,6 @@
|
|||
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/dropdown.css" />
|
||||
<script src="js/table.js"></script>
|
||||
<script src="js/checkbox.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
|
||||
crossorigin="anonymous">
|
||||
|
|
@ -66,12 +65,14 @@
|
|||
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
|
||||
</p>
|
||||
|
||||
<div id="list1" class="dropdown-check-list" tabindex="100"> </div>
|
||||
<!-- <div id="list1" class="dropdown-check-list" tabindex="100"> </div> -->
|
||||
<ul id="list1"></ul>
|
||||
<p id="debug"></p>
|
||||
<table id="t01"></table>
|
||||
|
||||
<script>
|
||||
// create table
|
||||
handleFile()
|
||||
handleFile("resources/world_data_v1.csv")
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
99
js/table.js
99
js/table.js
|
|
@ -4,24 +4,40 @@
|
|||
// Source: https://www.w3schools.com/howto/howto_js_sort_table.asp
|
||||
// Source: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
|
||||
|
||||
function handleFile() {
|
||||
function handleFile(path) {
|
||||
// Check for the various File API support.
|
||||
if (window.FileReader) {
|
||||
// FileReader are supported.
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
|
||||
processData(xmlhttp.responseText);
|
||||
processData(xmlhttp.responseText, path);
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", "resources/world_data_v1.csv", true);
|
||||
xmlhttp.open("GET", path, true);
|
||||
xmlhttp.send();
|
||||
} else {
|
||||
alert('FileReader are not supported in this browser.');
|
||||
}
|
||||
}
|
||||
|
||||
function processData(csv) {
|
||||
function rerequestFile(path, columns) {
|
||||
if (window.FileReader) {
|
||||
// FileReader are supported.
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
|
||||
updateTable(xmlhttp.responseText, columns);
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", path, true);
|
||||
xmlhttp.send();
|
||||
} else {
|
||||
alert('FileReader are not supported in this browser.');
|
||||
}
|
||||
}
|
||||
|
||||
function processData(csv, path) {
|
||||
var table = "";
|
||||
var checkbox = "";
|
||||
|
||||
|
|
@ -31,10 +47,6 @@ function processData(csv) {
|
|||
// create table header
|
||||
table += "<tr>";
|
||||
|
||||
// create checkbox content
|
||||
checkbox += "<span class='anchor'>Select Columns</span>";
|
||||
checkbox += "<ul class='items'>";
|
||||
|
||||
var data = allTextLines[0].split(",");
|
||||
|
||||
for (var j = 0; j < data.length; j++) {
|
||||
|
|
@ -45,12 +57,12 @@ function processData(csv) {
|
|||
|
||||
// create dropdown elements
|
||||
checkbox += "<li>";
|
||||
checkbox += "<input id=checkbox_" + data[j] + " type='checkbox' checked='checked' />";
|
||||
checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
|
||||
checkbox += data[j];
|
||||
checkbox += "</li>";
|
||||
}
|
||||
|
||||
checkbox += "</ul>";
|
||||
// checkbox += "</ul>";
|
||||
table += "</tr>";
|
||||
|
||||
// create table content
|
||||
|
|
@ -70,19 +82,68 @@ function processData(csv) {
|
|||
|
||||
document.getElementById('t01').innerHTML = table;
|
||||
document.getElementById('list1').innerHTML = checkbox;
|
||||
}
|
||||
|
||||
// create callbacks for checkboxes
|
||||
var checkList = document.getElementById('list1');
|
||||
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
|
||||
if (!checkList.classList.contains('visible'))
|
||||
checkList.classList.remove('visible');
|
||||
else
|
||||
checkList.classList.add('visible');
|
||||
function toggleColumn(file) {
|
||||
var iterator = document.getElementById('list1').childNodes;
|
||||
var activated_columns = [];
|
||||
|
||||
for (i = 0; i < iterator.length; i++) {
|
||||
var checkbox = iterator[i].children[0];
|
||||
|
||||
if (checkbox.checked) {
|
||||
activated_columns.push(checkbox.id);
|
||||
}
|
||||
}
|
||||
|
||||
checkList.onblur = function (evt) {
|
||||
checkList.classList.remove('visible');
|
||||
rerequestFile(file, activated_columns);
|
||||
}
|
||||
|
||||
|
||||
function updateTable(csv, columns) {
|
||||
var table = "";
|
||||
|
||||
// split rows
|
||||
var allTextLines = csv.split(/\r\n|\n/);
|
||||
|
||||
// create table header
|
||||
table += "<tr>";
|
||||
|
||||
var data = allTextLines[0].split(",");
|
||||
var discarded_indices = [];
|
||||
|
||||
for (var j = 0; j < data.length; j++) {
|
||||
// create table column header
|
||||
if (columns.includes(data[j])) {
|
||||
table += "<th onclick=\"sortTable(" + j + ")\" >";
|
||||
table += data[j];
|
||||
table += "</th>";
|
||||
} else {
|
||||
discarded_indices.push(j);
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox += "</ul>";
|
||||
table += "</tr>";
|
||||
|
||||
// create table content
|
||||
for (var i = 1; i < allTextLines.length; i++) {
|
||||
var data = allTextLines[i].split(',');
|
||||
|
||||
table += "<tr>";
|
||||
|
||||
for (var j = 0; j < data.length; j++) {
|
||||
if (!discarded_indices.includes(j)) {
|
||||
table += "<td>";
|
||||
table += data[j];
|
||||
table += "</td>";
|
||||
}
|
||||
}
|
||||
|
||||
table += "</tr>";
|
||||
}
|
||||
|
||||
document.getElementById('t01').innerHTML = table;
|
||||
}
|
||||
|
||||
function sortTable(n) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue