Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Now able to show an empty message automatically when there are no row…

…s. Fixes #2

 + option to show or hide the header when empty
 + added default style for the empty message. class name is jst-emptymessage
 + readme updated to reflect new options
  • Loading branch information...
commit 9a0d49d755155dfc2bb492febfe65206cc04de75 1 parent 780884a
@reednj authored
View
29 Docs/jsTable.md
@@ -15,6 +15,9 @@ jsTable Method: constructor {#InlineEditor:constructor}
### Options:
+* empty_message (string) - This message is show when there are no rows in the table. Styled using the class 'jst-emptymessage'
+* show_header_onempty (boolean) - should the table header be shown or hidden when the table is empty?
+
### Events:
* onRowAdded(row_index, row_data) - called after each row is added.
@@ -50,6 +53,18 @@ Empties the table. Does not remove the header.
### Example:
jst.clear();
+jsTable Method: setEmptyMessage {#InlineEditor:setEmptyMessage}
+-------------------------------------------------------------
+Set the mesage
+### Syntax:
+ jst.setEmptyMessage(empty_message, show_header)
+
+### Arguments:
+ * empty_message (string) - This message is show when there are no rows in the table. Styled using the class 'jst-emptymessage'
+ * show_header (boolean) - should the table header be shown or hidden when the table is empty?
+
+### Example:
+ jst.setEmptyMessage('table is empty', true);
jsTable Method: addColumn {#InlineEditor:addColumn}
-------------------------------------------------------------
@@ -68,7 +83,7 @@ empty the results can be unpredictable.
jsTable Method: addColumns {#InlineEditor:addColumns}
-------------------------------------------------------------
-Add multiple columns.
+Add multiple columns.
### Syntax:
jst.addColumns(column_list);
@@ -94,10 +109,10 @@ Add a row to the bottom of the table.
### Example:
jst.addRow(
- '1234',
- 'Nathan',
+ '1234',
+ 'Nathan',
new Element('a', {
- 'href':'?id=1234',
+ 'href':'?id=1234',
'text':'profile'
})
);
@@ -117,7 +132,7 @@ Removes a row from the index provided.
jsTable Method: deleteRowById {#InlineEditor:deleteRowById}
-------------------------------------------------------------
-Removes a row from the table but by the internal row id, instead of the row index. This is
+Removes a row from the table but by the internal row id, instead of the row index. This is
useful for linking to events, as the ids do not change when rows are added or removed.
### Syntax:
@@ -171,7 +186,7 @@ Serializes the table to a javascript data structure.
### Example:
// returns an array like [12, 25, 36, 47, 58];
- jst.toData('id');
+ jst.toData('id');
// returns something like [
{'id':12, 'firstname':'Nathan'},
@@ -181,7 +196,7 @@ Serializes the table to a javascript data structure.
{'id':58, 'firstname':'Samantha'},
]
//
- jst.toData('id', 'firstname);
+ jst.toData('id', 'firstname);
jsTable Method: toJson {#InlineEditor:toJson}
-------------------------------------------------------------
View
63 Source/jsTable.js
@@ -25,9 +25,13 @@ var jsTable = new Class({
this.options.onRowDeleted = this.options.onRowDeleted || $empty;
this.options.onRowAdded = this.options.onRowAdded || $empty;
this.options.onCellUpdated = this.options.onCellUpdated || $empty;
+ this.options.empty_message = this.options.empty_message || null;
+ this.options.show_header_onempty = this.options.show_header_onempty || false;
+ this.table = null;
this.thead = null;
this.tbody = null;
+ this.empty_tr = null;
this.table_id = (Math.random() * 1000).round();
@@ -66,7 +70,7 @@ var jsTable = new Class({
_createTable: function() {
this.element.empty();
- $e('table', {
+ this.table = $e('table', {
'class': 'jst-table',
'children':[
this.thead = $e('thead', {'children': [$e('tr')]}),
@@ -74,6 +78,40 @@ var jsTable = new Class({
]
}).inject(this.element);
+ // if the empty message has been set, then create that element as well
+ if(this.options.empty_message != null) {
+ this._createEmptyMessage();
+ }
+
+ },
+
+ _createEmptyMessage: function() {
+ this.empty_tr = $e('div', {'class':'jst-emptymessage', 'text': this.options.empty_message});
+ this.element.grab(this.empty_tr);
+
+ // show we be showing the message or not?
+ this._setEmptyMessageVisibility();
+ },
+
+ _setEmptyMessageVisibility: function() {
+ if(this.empty_tr == null) {
+ return;
+ }
+
+ if(this.data.length > 0 && this.empty_tr.getStyle('display') != 'none') {
+ this.empty_tr.hide();
+
+ if(this.options.show_header_onempty !== true) {
+ this.thead.show();
+ }
+
+ } else if(this.data.length == 0 && this.empty_tr.getStyle('display') != '') {
+ this.empty_tr.show();
+
+ if(this.options.show_header_onempty!== true) {
+ this.thead.hide();
+ }
+ }
},
// does not include the head row.
@@ -91,6 +129,20 @@ var jsTable = new Class({
this.tbody.empty();
},
+ setEmptyMessage: function(empty_message, show_header) {
+ this.options.empty_message = empty_message;
+
+ if($defined(show_header)) {
+ this.options.show_header_onempty = show_header;
+ }
+
+ // if the empty message is not in the page yet, then create the
+ // element and add it to the page.
+ if(!$defined(this.empty_tr)) {
+ this._createEmptyMessage();
+ }
+ },
+
addColumns: function(columns) {
columns.each(function(col) {
this.addColumn(col.name, col.description);
@@ -143,6 +195,8 @@ var jsTable = new Class({
this.data.push(row_data);
this.options.onRowAdded(this.data.length-1, row_data);
+
+ this._setEmptyMessageVisibility();
},
deleteRow: function(row_index) {
@@ -160,6 +214,7 @@ var jsTable = new Class({
this.options.onRowDeleted(row_index, row_id);
+ this._setEmptyMessageVisibility();
},
deleteRowById: function(row_id) {
@@ -307,3 +362,9 @@ function $e(tag, props) {
return new_element
}
+
+// this is now implemented in mootool.more (finally!)
+Element.implement({
+ show: function() {this.setStyle('display','');},
+ hide: function() {this.setStyle('display','none');}
+});
View
5 Source/jstable-default.css
@@ -19,3 +19,8 @@
text-align: left;
padding: 3px 8px;
}
+
+.jst-emptymessage {
+ text-align: center;
+ font-style: italic;
+}
View
27 Test/test.html
@@ -14,10 +14,14 @@
margin: 32px;
}
-#t1 table {
+#t1 {
width: 500px;
}
+#t1 table {
+ width: 100%;
+}
+
#t-status {
float: right;
padding: 14px;
@@ -42,19 +46,23 @@
this.jst = new jsTable('t1', {
'onRowDeleted': this.deleted,
'onRowAdded': this.added,
- 'onCellUpdated': this.updated
+ 'onCellUpdated': this.updated,
+ 'empty_message': 'Click the buttons above to add some rows'
});
+
var jst = this.jst;
jst.addColumn('id', 'id');
jst.addColumn('desc', 'Description');
jst.addColumn('button', 'delete');
+ //jst.setEmptyMessage('empty table', true);
+
for(i=0; i < 10; i++) {
var id = (Math.random() * 100).round();
jst.addRow(
- id,
+ id,
'description-' + id,
$e('a', {
'text':'x',
@@ -76,6 +84,10 @@
$('t-status').innerHTML = 'Complete';
},
+ add_row: function() {
+ this.jst.addRow(this.jst.rowCount(), Math.random(), '');
+ },
+
delete_row: function() {
this.jst.deleteRow(3);
},
@@ -105,8 +117,8 @@
<body>
<div id='t-body'>
-
-
+
+
<div id='t-status'>FAIL</div>
<div class='clear'></div>
@@ -116,6 +128,7 @@
<div>
<input type='button' value='delete' onclick='Ui.delete_row.bind(Ui)()'>
<input type='button' value='delete last' onclick='Ui.delete_last.bind(Ui)()'>
+ <input type='button' value='add row' onclick='Ui.add_row.bind(Ui)()'>
</div>
<div>
@@ -128,9 +141,9 @@
<span>update: </span> <span id='s2'> </span>
<span>adds: </span> <span id='s3'> </span>
</div>
-
+
<div>
- <span>get cell by column_id:</span>
+ <span>get cell by column_id:</span>
<span id='r2'></span>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.