-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (131 loc) · 4.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Excel pivot tables!</title>
<script src="lib/jquery.min.js"></script>
<script src="dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="dist/handsontable.full.css">
<script src="lib/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script>
var container, table;
$(document).ready(function() {
var data = [
["John Smith", "Berkeley", "COM-ANA", "Grace 2102"],
["Stephen Lee", "Taiwan", "COM-ANA", "Beacon"],
["Josh Victor", "Taiwan", "UCLA", "Grace 2104"],
["Josh Body", "Cambridge", "ELAC", "Grace 2104"]
];
container = $('#input');
container.handsontable({
data: data,
minSpareRows: 1,
minRows: 5,
minCols: 4,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
// This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
table = $("#input").handsontable('getInstance');
$('#pivotbtn').click(function(e) {
// pivot table keeps track of all the other row name with same set values
var pvTable = {};
// this set keeps track of all repeating columns with same value
var colSet = {};
console.log('data', table.getData());
var d = table.getData(),
row, cell, title, colName;
for (var r in d) {
row = d[r];
title = row[0];
if (!title) {
// Skip empty rows
continue;
}
pvTable[title] = {};
for (var c = 1; c < row.length; c++) {
cell = row[c];
colName = 'col-' + c;
if (! (colName in colSet)) {
colSet[colName] = [];
}
col = colSet[colName];
if (cell) {
if (cell in col) {
colSet[colName][cell].push(title);
} else {
colSet[colName][cell] = [title];
}
}
}
}
console.log('colSet', colSet, pvTable);
var val, mergeList;
var popList = [];
// Loop through all the colSet and merge into pvTable for all common occurrences
for (var i in colSet) {
col = colSet[i];
for (var val in col) {
// For each column, grab all the common sets and add to each title in pvTable
inCommon = col[val]
while (inCommon.length > 0) {
title = inCommon.pop();
mergeList = popList.concat(inCommon);
// Put in every other element into set of that title
for (var m in mergeList) {
pvTable[title][mergeList[m]] = true;
}
popList.push(title);
}
popList = [];
}
}
console.log('colSet', colSet, pvTable);
// Translate set to array
function _setToArray(dict) {
var array = [];
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
array.push(key);
}
}
return array;
}
// Go through pvTable and create a list of titles in common with each table
var outputData = [],
otherList;
for (var t in pvTable) {
title = pvTable
otherList = _setToArray(pvTable[t])
outputData.push([t].concat(otherList));
}
console.log('outputdata', outputData);
outputContainer = $('#output');
outputContainer.handsontable({
data: outputData,
minSpareRows: 1,
minRows: 5,
minCols: 4,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
});
});
</script>
</head>
<body>
<div class="container-fluid">
<h3>Pivot Table - Helps you pivot tables that's hard to do in Excel</h3>
<p class="well">Paste excel data into table and hit pivot! <button id="pivotbtn" class="btn btn-primary pull-right">Pivot!</button></p>
<div class="col-md-6">
<div id="input"></div>
</div>
<div class="col-md-6">
<div id="output"></div>
</div>
</div>
</body>
</html>