Permalink
Browse files

First version of demo page. Shows serialization, row manipulation and…

… styling.
  • Loading branch information...
1 parent d5e1f84 commit 0282bbf2b60dd1c37738792035bf3145e0692209 @reednj committed Aug 28, 2011
Showing with 86 additions and 4 deletions.
  1. +86 −4 Test/demo.html
View
@@ -6,18 +6,19 @@
<title> jsTable for Mootools - Demo </title>
<link rel="stylesheet" href="./css-lib/default.css" type="text/css">
+<link rel="stylesheet" href="../Source/jstable-default.css" type="text/css">
<style type='text/css'>
#t-body {
font-size: 16pt;
margin: 32px;
}
-
+
.box {
padding: 16px;
}
-
+
div.desc {
font-weight: bold;
}
@@ -32,22 +33,80 @@
font-size: 18pt;
font-weight: bold;
}
-
+
#t-sub {
font-size: 10pt;
font-weight: bold;
}
+ /* table styles */
+ #t2 tbody td {
+ text-align: right;
+ }
+
+ #t2 tbody td.jst-total, #t2 th.jst-total {
+ background-color: #eee;
+ border-left: 1px solid #ccc;
+ }
+
</style>
<script src='./js-lib/mootools-core-1.3.2.js' type='text/javascript'></script>
+<script src='../Source/jsTable.js' type='text/javascript'></script>
<script type='text/javascript'>
var Ui = {
init: function() {
+ this.create_t1();
+ this.create_t3();
+ },
+
+ create_t1: function() {
+ this.jst = new jsTable('t1');
+ this.jst.addColumn('ID');
+ this.jst.addColumn('N1');
+ this.jst.addColumn('N2');
+
+ for(var i=1; i < 6; i++) {
+ this.jst.addRow(i, this.random_cell(), this.random_cell());
+ }
+ },
+
+ create_t3: function() {
+ this.jst2 = new jsTable('t2');
+ this.jst2.addColumn('March');
+ this.jst2.addColumn('April');
+ this.jst2.addColumn('May');
+ this.jst2.addColumn('total', 'Total');
+
+ for(var i=1; i < 6; i++) {
+ var march = this.random_cell();
+ var april = this.random_cell();
+ var may = this.random_cell();
+ var total = march + april + may;
+
+ this.jst2.addRow('$' + march, '$' + april, '$' + may, '$' + total);
+ }
+ },
+
+ add_random: function() {
+ this.jst.addRow(this.jst.rowCount()+1, this.random_cell(), this.random_cell());
+ },
+
+ remove_last: function() {
+ this.jst.deleteRow(this.jst.rowCount()-1);
+ },
+
+ random_cell: function() {
+ return (Math.random() * 1000).round();
+ },
+
+ serialize_table: function(format) {
+ alert(this.jst2.toJson(format));
}
+
}
window.addEvent('load', Ui.init.bind(Ui));
@@ -61,9 +120,32 @@
<div id='title'>
<div id='t-main'>jsTable for Mootools</div>
- <div id='t-sub'>By Nathan Reed (<a href='http://twitter.com/reednj'>@reednj</a>) | <a href='#'>Mootools Plugin Page</a> | <a href='#'>Code @ Github</a> </div>
+ <div id='t-sub'>Nathan Reed (<a href='http://twitter.com/reednj'>@reednj</a>) | <a href='#'>Mootools Plugin Page</a> | <a href='https://github.com/reednj/jsTable'>Code @ Github</a> </div>
</div>
+<div class='desc'>
+ <div>This table was generated by jsTable. Use the links below to add and remove rows.</div>
+ <div style='padding-left: 16px;'><a href='javascript:Ui.add_random.bind(Ui)()'>add row</a> | <a href='javascript:Ui.remove_last.bind(Ui)()'>remove row</a></div>
+</div>
+
+<div class='box'>
+ <div id='t1'></div>
+</div>
+
+<div class='desc'>Classes are added for easy styling. To make the 'total' column below gray we simply style the 'td.jst-total' class.</div>
+<div class='box'>
+ <div id='t2'></div>
+</div>
+
+<div class='desc'>
+ <div>You can also easily serialize the table to json for export. Use the links below to test.</div>
+ <div style='padding-left: 16px;'>
+ <a href='javascript:Ui.serialize_table.bind(Ui)()'>Serialize the entire table</a> |
+ <a href='javascript:Ui.serialize_table.bind(Ui)("total")'>Serialize just the 'Total' column</a>
+ </div>
+</div>
+
+
</div>
</body>

0 comments on commit 0282bbf

Please sign in to comment.