Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

moved header row generation into its own function, we no longer rende…

…r by default
  • Loading branch information...
commit b6dfe5f40f0309a581bb0a669487f01b634e412e 1 parent 8301fcb
Francis Gulotta authored
Showing with 31 additions and 28 deletions.
  1. +0 −2  expandable-table.js
  2. +5 −0 index.html
  3. +18 −11 table.js
  4. +8 −15 templates.js
2  expandable-table.js
View
@@ -40,7 +40,6 @@
add: function(model){
BTS.SortableTable.prototype.add.call(this, model);
-
var cid = model.cid;
var data = {
model: model,
@@ -49,7 +48,6 @@
var ctd = this.contractedViews[cid] = this.rows[cid];
var exp = this.expandedViews[cid] = new this.opt.expandedView(data);
-
ctd.on('toggle', this.toggle, this);
ctd.on('expand', this.expand, this);
ctd.on('contract', this.contract, this);
5 index.html
View
@@ -36,6 +36,7 @@
tableClass:'table table-bordered table-striped',
collection: new BTS.SortableList(names)
});
+ nameTable.render();
nameTable.sortBy('age');
});
</pre>
@@ -112,6 +113,7 @@
tableClass:'table table-bordered table-striped',
collection: new BTS.SortableList(names)
});
+ nameTable.render();
nameTable.collection.sortBy('age');
//advanced
@@ -131,6 +133,7 @@
tableClass:'table table-bordered table-striped',
col:twitterCol
});
+ twitterTable.render();
$('#search').submit(function(e){
e.preventDefault();
@@ -158,6 +161,8 @@
col: advancedTwitterCol,
keepRow: true
});
+ expandoTable.render();
+
});
</script>
29 table.js
View
@@ -110,6 +110,7 @@
opt = opt || {};
this.opt = _.defaults(opt,{
template: 'sortable-table',
+ templateHead: 'sortable-table-head',
tableClass: false,
sortable: true,
view: BTS.SortableTableRow,
@@ -129,25 +130,32 @@
this.collection.on('add', this.add, this);
this.collection.on('remove', this.remove, this);
this.collection.on('sort', this.sort, this);
+ },
- this.render();
+ render: function(){
+ this.$el.html( BTS.renderTemplate(this.opt.template));
+ this.tbody = this.$('tbody');
+ this.thead = this.$('thead');
+ if(!this.tbody.length){ throw new Error('No table body found');} // save hours of debugging
+ if(!this.thead.length){ throw new Error('No table head found');}
+ this.updateColumns();
this.reset();
+ return this.el;
},
- render: function(){
- this.$el.html( BTS.renderTemplate(this.opt.template,{
+ updateColumns: function(){
+ this.thead.html(BTS.renderTemplate(this.opt.templateHead,{
col: this.col()
}));
- this.tbody = this.$('tbody');
- if(!this.tbody.length){ throw new Error('No table body found');}
+
},
reset: function(){
this.removeAll();
- this.render(); //needed to redraw the headers
- this.updateHeaders(); // the sort is already done during the reset so...
- this.addEmpty();
+ this.updateColumns();
+ this.updateChevrons(); // the sort is already done during the reset so...
this.collection.forEach(this.add, this);
+ this.addEmpty();
},
update: function(){
@@ -187,13 +195,12 @@
},
sort: function(){
- //console.log('sort');
this.detatchAll();
- this.updateHeaders();
+ this.updateChevrons();
this.attachAll();
},
- updateHeaders: function(){
+ updateChevrons: function(){
var field = this.sortField;
this.$('.js-sort-sprite').removeClass('icon-chevron-down icon-chevron-up');
var sprite = this.$('th[data-field="'+ field +'"] > .js-sort-sprite');
23 templates.js
View
@@ -8,23 +8,16 @@
}
BTS.templates = {
- 'sortable-table': '<colgroup>{{#col}}<col {{#className}}class="{{className}}"{{/className}}/>{{/col}}</colgroup><thead><tr>{{#col}}<th {{#className}}class="{{className}}"{{/className}} data-field="{{field}}">{{name}} <i class="js-sort-sprite"></i></th>{{/col}}</tr></thead><tbody></tbody>',
- // <colgroup>
+ 'sortable-table': '<thead></thead><tbody></tbody>',
+
+ 'sortable-table-head': '<tr>{{#col}}<th {{#className}}class="{{className}}"{{/className}} data-field="{{field}}">{{name}} <i class="js-sort-sprite"></i></th>{{/col}}</tr>',
+ // <tr>
// {{#col}}
- // <col {{#className}}class="{{className}}"{{/className}}/>
+ // <th {{#className}}class="{{className}}"{{/className}} data-field="{{field}}">
+ // {{name}} <i class="js-sort-sprite"></i>
+ // </th>
// {{/col}}
- // </colgroup>
- // <thead>
- // <tr>
- // {{#col}}
- // <th {{#className}}class="{{className}}"{{/className}} data-field="{{field}}">
- // {{name}} <i class="js-sort-sprite"></i>
- // </th>
- // {{/col}}
- // </tr>
- // </thead>
- // <tbody></tbody>
-
+ // </tr>
'sortable-table-row':'{{#col}}<td {{#className}}class="{{className}}"{{/className}}>{{text}}{{{html}}}</td>{{/col}}',
// {{#col}}
// <td {{#className}}class="{{className}}"{{/className}}>
Please sign in to comment.
Something went wrong with that request. Please try again.