Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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
@reconbot 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
View
2  expandable-table.js
@@ -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);
View
5 index.html
@@ -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>
View
29 table.js
@@ -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');
View
23 templates.js
@@ -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.