9 * @class Roo.bootstrap.Table
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Table class
12 * @cfg {String} cls table class
13 * @cfg {String} align (left|center|right) Specifies the alignment of a table according to surrounding text
14 * @cfg {String} bgcolor Specifies the background color for a table
15 * @cfg {Number} border Specifies whether the table cells should have borders or not
16 * @cfg {Number} cellpadding Specifies the space between the cell wall and the cell content
17 * @cfg {Number} cellspacing Specifies the space between cells
18 * @cfg {String} frame Specifies which parts of the outside borders that should be visible
19 * @cfg {String} rules Specifies which parts of the inside borders that should be visible
20 * @cfg {String} sortable Specifies that the table should be sortable
21 * @cfg {String} summary Specifies a summary of the content of a table
22 * @cfg {Number} width Specifies the width of a table
24 * @cfg {boolean} striped Should the rows be alternative striped
25 * @cfg {boolean} bordered Add borders to the table
26 * @cfg {boolean} hover Add hover highlighting
27 * @cfg {boolean} condensed Format condensed
28 * @cfg {boolean} responsive Format condensed
35 * @param {Object} config The config object
38 Roo.bootstrap.Table = function(config){
39 Roo.bootstrap.Table.superclass.constructor.call(this, config);
42 this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
43 this.sm = this.selModel;
44 this.sm.xmodule = this.xmodule || false;
46 if (this.cm && typeof(this.cm.config) == 'undefined') {
47 this.colModel = new Roo.bootstrap.Table.ColumnModel(this.cm);
48 this.cm = this.colModel;
49 this.cm.xmodule = this.xmodule || false;
52 this.store= Roo.factory(this.store, Roo.data);
54 this.ds.xmodule = this.xmodule || false;
59 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
81 getAutoCreate : function(){
82 var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
91 cfg.cls += ' table-striped';
94 cfg.cls += ' table-hover';
97 cfg.cls += ' table-bordered';
100 cfg.cls += ' table-condensed';
102 if (this.responsive) {
103 cfg.cls += ' table-responsive';
110 cfg.cls+= ' ' +this.cls;
113 // this lot should be simplifed...
116 cfg.align=this.align;
119 cfg.bgcolor=this.bgcolor;
122 cfg.border=this.border;
124 if (this.cellpadding) {
125 cfg.cellpadding=this.cellpadding;
127 if (this.cellspacing) {
128 cfg.cellspacing=this.cellspacing;
131 cfg.frame=this.frame;
134 cfg.rules=this.rules;
137 cfg.sortable=this.sortable;
140 cfg.summary=this.summary;
143 cfg.width=this.width;
146 if(this.store || this.cm){
147 cfg.cn.push(this.renderHeader());
148 cfg.cn.push(this.renderBody());
149 cfg.cn.push(this.renderFooter());
151 cfg.cls+= ' TableGrid';
157 // initTableGrid : function()
168 // for(var i = 0, len = cm.getColumnCount(); i < len; i++){
171 // html: cm.getColumnHeader(i)
182 initEvents : function()
184 if(!this.store || !this.cm){
188 Roo.log('initEvents with ds!!!!');
192 Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
193 e.on('click', _this.sort, _this);
195 // this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
196 // this.maskEl.enableDisplayMode("block");
197 // this.maskEl.show();
199 this.store.on('load', this.onLoad, this);
200 this.store.on('beforeload', this.onBeforeLoad, this);
208 sort : function(e,el)
210 var col = Roo.get(el)
212 if(!col.hasClass('sortable')){
216 var sort = col.attr('sort');
219 if(col.hasClass('glyphicon-arrow-up')){
223 this.store.sortInfo = {field : sort, direction : dir};
228 renderHeader : function()
237 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
239 var config = cm.config[i];
243 html: cm.getColumnHeader(i)
246 if(typeof(config.dataIndex) != 'undefined'){
247 c.sort = config.dataIndex;
250 if(typeof(config.sortable) != 'undefined' && config.sortable){
260 renderBody : function()
270 renderFooter : function()
282 Roo.log('ds onload');
287 Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
288 e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
290 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
291 e.addClass(['glyphicon', 'glyphicon-arrow-up']);
294 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
295 e.addClass(['glyphicon', 'glyphicon-arrow-down']);
299 var tbody = this.el.select('tbody', true).first();
303 if(this.store.getCount() > 0){
304 this.store.data.each(function(d){
310 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
311 var renderer = cm.getRenderer(i);
312 var config = cm.config[i];
316 if(typeof(renderer) !== 'undefined'){
317 value = renderer(d.data[cm.getDataIndex(i)], false, d);
320 if(typeof(value) === 'object'){
330 html: (typeof(value) === 'object') ? '' : value
333 if(typeof(config.width) != 'undefined'){
334 td.width = config.width;
341 tbody.createChild(row);
349 Roo.each(renders, function(r){
350 _this.renderColumn(r);
354 // if(this.loadMask){
355 // this.maskEl.hide();
359 onBeforeLoad : function()
361 Roo.log('ds onBeforeLoad');
365 // if(this.loadMask){
366 // this.maskEl.show();
372 this.el.select('tbody', true).first().dom.innerHTML = '';
375 getSelectionModel : function(){
377 this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
379 return this.selModel;
382 renderColumn : function(r)
385 r.cfg.render(Roo.get(r.id));
388 Roo.each(r.cfg.cn, function(c){
393 _this.renderColumn(child);