git.roojs.org Git - roojs1/blob - Roo/bootstrap/Table.js

   1 /*
   2  * - LGPL
   3  *
   4  * table
   5  *
   6  */
   7
   8 /**
   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
  23  *
  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
  29  *
  30
  31
  32  *
  33  * @constructor
  34  * Create a new Table
  35  * @param {Object} config The config object
  36  */
  37
  38 Roo.bootstrap.Table = function(config){
  39     Roo.bootstrap.Table.superclass.constructor.call(this, config);
  40
  41     if (this.sm) {
  42         this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
  43         this.sm = this.selModel;
  44         this.sm.xmodule = this.xmodule || false;
  45     }
  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;
  50     }
  51     if (this.store) {
  52         this.store= Roo.factory(this.store, Roo.data);
  53         this.ds = this.store;
  54         this.ds.xmodule = this.xmodule || false;
  55
  56     }
  57 };
  58
  59 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
  60
  61     cls: false,
  62     align: false,
  63     bgcolor: false,
  64     border: false,
  65     cellpadding: false,
  66     cellspacing: false,
  67     frame: false,
  68     rules: false,
  69     sortable: false,
  70     summary: false,
  71     width: false,
  72     striped : false,
  73     bordered: false,
  74     hover:  false,
  75     condensed : false,
  76     responsive : false,
  77     sm : false,
  78     cm : false,
  79     store : false,
  80
  81     getAutoCreate : function(){
  82         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
  83
  84         cfg = {
  85             tag: 'table',
  86             cls : 'table',
  87             cn : []
  88         }
  89
  90         if (this.striped) {
  91             cfg.cls += ' table-striped';
  92         }
  93         if (this.hover) {
  94             cfg.cls += ' table-hover';
  95         }
  96         if (this.bordered) {
  97             cfg.cls += ' table-bordered';
  98         }
  99         if (this.condensed) {
 100             cfg.cls += ' table-condensed';
 101         }
 102         if (this.responsive) {
 103             cfg.cls += ' table-responsive';
 104         }
 105
 106
 107
 108
 109         if (this.cls) {
 110             cfg.cls+=  ' ' +this.cls;
 111         }
 112
 113         // this lot should be simplifed...
 114
 115         if (this.align) {
 116             cfg.align=this.align;
 117         }
 118         if (this.bgcolor) {
 119             cfg.bgcolor=this.bgcolor;
 120         }
 121         if (this.border) {
 122             cfg.border=this.border;
 123         }
 124         if (this.cellpadding) {
 125             cfg.cellpadding=this.cellpadding;
 126         }
 127         if (this.cellspacing) {
 128             cfg.cellspacing=this.cellspacing;
 129         }
 130         if (this.frame) {
 131             cfg.frame=this.frame;
 132         }
 133         if (this.rules) {
 134             cfg.rules=this.rules;
 135         }
 136         if (this.sortable) {
 137             cfg.sortable=this.sortable;
 138         }
 139         if (this.summary) {
 140             cfg.summary=this.summary;
 141         }
 142         if (this.width) {
 143             cfg.width=this.width;
 144         }
 145
 146         if(this.store || this.cm){
 147             cfg.cn.push(this.renderHeader());
 148             cfg.cn.push(this.renderBody());
 149             cfg.cn.push(this.renderFooter());
 150
 151             cfg.cls+=  ' TableGrid';
 152         }
 153
 154         return cfg;
 155     },
 156 //
 157 //    initTableGrid : function()
 158 //    {
 159 //        var cfg = {};
 160 //
 161 //        var header = {
 162 //            tag: 'thead',
 163 //            cn : []
 164 //        };
 165 //
 166 //        var cm = this.cm;
 167 //
 168 //        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 169 //            header.cn.push({
 170 //                tag: 'th',
 171 //                html: cm.getColumnHeader(i)
 172 //            })
 173 //        }
 174 //
 175 //        cfg.push(header);
 176 //
 177 //        return cfg;
 178 //
 179 //
 180 //    },
 181
 182     initEvents : function()
 183     {
 184         if(!this.store || !this.cm){
 185             return;
 186         }
 187
 188         Roo.log('initEvents with ds!!!!');
 189
 190         var _this = this;
 191
 192         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
 193             e.on('click', _this.sort, _this);
 194         });
 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();
 198
 199         this.store.on('load', this.onLoad, this);
 200         this.store.on('beforeload', this.onBeforeLoad, this);
 201
 202         this.store.load();
 203
 204
 205
 206     },
 207
 208     sort : function(e,el)
 209     {
 210         var col = Roo.get(el)
 211
 212         if(!col.hasClass('sortable')){
 213             return;
 214         }
 215
 216         var sort = col.attr('sort');
 217         var dir = 'ASC';
 218
 219         if(col.hasClass('glyphicon-arrow-up')){
 220             dir = 'DESC';
 221         }
 222
 223         this.store.sortInfo = {field : sort, direction : dir};
 224
 225         this.store.load();
 226     },
 227
 228     renderHeader : function()
 229     {
 230         var header = {
 231             tag: 'thead',
 232             cn : []
 233         };
 234
 235         var cm = this.cm;
 236
 237         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 238
 239             var config = cm.config[i];
 240
 241             var c = {
 242                 tag: 'th',
 243                 html: cm.getColumnHeader(i)
 244             };
 245
 246             if(typeof(config.dataIndex) != 'undefined'){
 247                 c.sort = config.dataIndex;
 248             }
 249
 250             if(typeof(config.sortable) != 'undefined' && config.sortable){
 251                 c.cls = 'sortable';
 252             }
 253
 254             if(typeof(config.width) != 'undefined'){
 255                 c.style = 'width:' + config.width + 'px';
 256             }
 257
 258             header.cn.push(c)
 259         }
 260
 261         return header;
 262     },
 263
 264     renderBody : function()
 265     {
 266         var body = {
 267             tag: 'tbody',
 268             cn : []
 269         };
 270
 271         return body;
 272     },
 273
 274     renderFooter : function()
 275     {
 276         var footer = {
 277             tag: 'tfoot',
 278             cn : []
 279         };
 280
 281         return footer;
 282     },
 283
 284     onLoad : function()
 285     {
 286         Roo.log('ds onload');
 287
 288         var _this = this;
 289         var cm = this.cm;
 290
 291         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
 292             e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
 293
 294             if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
 295                 e.addClass(['glyphicon', 'glyphicon-arrow-up']);
 296             }
 297
 298             if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
 299                 e.addClass(['glyphicon', 'glyphicon-arrow-down']);
 300             }
 301         });
 302
 303         var tbody = this.el.select('tbody', true).first();
 304
 305         var renders = [];
 306
 307         if(this.store.getCount() > 0){
 308             this.store.data.each(function(d){
 309                 var row = {
 310                     tag : 'tr',
 311                     cn : []
 312                 };
 313
 314                 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 315                     var renderer = cm.getRenderer(i);
 316                     var config = cm.config[i];
 317                     var value = '';
 318                     var id = Roo.id();
 319
 320                     if(typeof(renderer) !== 'undefined'){
 321                         value = renderer(d.data[cm.getDataIndex(i)], false, d);
 322                     }
 323
 324                     if(typeof(value) === 'object'){
 325                         renders.push({
 326                             id : id,
 327                             cfg : value
 328                         })
 329                     }
 330
 331                     var td = {
 332                         tag: 'td',
 333                         id: id,
 334                         html: (typeof(value) === 'object') ? '' : value
 335                     };
 336
 337                     if(typeof(config.width) != 'undefined'){
 338                         td.style = 'width:' +  config.width + 'px';
 339                     }
 340
 341                     row.cn.push(td);
 342
 343                 }
 344
 345                 tbody.createChild(row);
 346
 347             });
 348         }
 349
 350
 351         if(renders.length){
 352             var _this = this;
 353             Roo.each(renders, function(r){
 354                 _this.renderColumn(r);
 355             })
 356         }
 357 //
 358 //        if(this.loadMask){
 359 //            this.maskEl.hide();
 360 //        }
 361     },
 362
 363     onBeforeLoad : function()
 364     {
 365         Roo.log('ds onBeforeLoad');
 366
 367         this.clear();
 368
 369 //        if(this.loadMask){
 370 //            this.maskEl.show();
 371 //        }
 372     },
 373
 374     clear : function()
 375     {
 376         this.el.select('tbody', true).first().dom.innerHTML = '';
 377     },
 378
 379     getSelectionModel : function(){
 380         if(!this.selModel){
 381             this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
 382         }
 383         return this.selModel;
 384     },
 385
 386     renderColumn : function(r)
 387     {
 388         var _this = this;
 389         r.cfg.render(Roo.get(r.id));
 390
 391         if(r.cfg.cn){
 392             Roo.each(r.cfg.cn, function(c){
 393                 var child = {
 394                     id: r.id,
 395                     cfg: c
 396                 }
 397                 _this.renderColumn(child);
 398             })
 399         }
 400     }
 401
 402 });
 403
 404
 405
 406