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  * @cfg {Boolean} loadMask (true|false) default false
  30  *
  31  * @cfg {Roo.bootstrap.PagingToolbar} footer  a paging toolbar
  32
  33  *
  34  * @constructor
  35  * Create a new Table
  36  * @param {Object} config The config object
  37  */
  38
  39 Roo.bootstrap.Table = function(config){
  40     Roo.bootstrap.Table.superclass.constructor.call(this, config);
  41
  42     if (this.sm) {
  43         this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
  44         this.sm = this.selModel;
  45         this.sm.xmodule = this.xmodule || false;
  46     }
  47     if (this.cm && typeof(this.cm.config) == 'undefined') {
  48         this.colModel = new Roo.grid.ColumnModel(this.cm);
  49         this.cm = this.colModel;
  50         this.cm.xmodule = this.xmodule || false;
  51     }
  52     if (this.store) {
  53         this.store= Roo.factory(this.store, Roo.data);
  54         this.ds = this.store;
  55         this.ds.xmodule = this.xmodule || false;
  56
  57     }
  58     if (this.footer && this.store) {
  59         this.footer.dataSource = this.ds;
  60         this.footer = Roo.factory(this.footer);
  61     }
  62 };
  63
  64 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
  65
  66     cls: false,
  67     align: false,
  68     bgcolor: false,
  69     border: false,
  70     cellpadding: false,
  71     cellspacing: false,
  72     frame: false,
  73     rules: false,
  74     sortable: false,
  75     summary: false,
  76     width: false,
  77     striped : false,
  78     bordered: false,
  79     hover:  false,
  80     condensed : false,
  81     responsive : false,
  82     sm : false,
  83     cm : false,
  84     store : false,
  85     loadMask : false,
  86
  87     getAutoCreate : function(){
  88         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
  89
  90         cfg = {
  91             tag: 'table',
  92             cls : 'table',
  93             cn : []
  94         }
  95
  96         if (this.striped) {
  97             cfg.cls += ' table-striped';
  98         }
  99         if (this.hover) {
 100             cfg.cls += ' table-hover';
 101         }
 102         if (this.bordered) {
 103             cfg.cls += ' table-bordered';
 104         }
 105         if (this.condensed) {
 106             cfg.cls += ' table-condensed';
 107         }
 108         if (this.responsive) {
 109             cfg.cls += ' table-responsive';
 110         }
 111
 112
 113
 114
 115         if (this.cls) {
 116             cfg.cls+=  ' ' +this.cls;
 117         }
 118
 119         // this lot should be simplifed...
 120
 121         if (this.align) {
 122             cfg.align=this.align;
 123         }
 124         if (this.bgcolor) {
 125             cfg.bgcolor=this.bgcolor;
 126         }
 127         if (this.border) {
 128             cfg.border=this.border;
 129         }
 130         if (this.cellpadding) {
 131             cfg.cellpadding=this.cellpadding;
 132         }
 133         if (this.cellspacing) {
 134             cfg.cellspacing=this.cellspacing;
 135         }
 136         if (this.frame) {
 137             cfg.frame=this.frame;
 138         }
 139         if (this.rules) {
 140             cfg.rules=this.rules;
 141         }
 142         if (this.sortable) {
 143             cfg.sortable=this.sortable;
 144         }
 145         if (this.summary) {
 146             cfg.summary=this.summary;
 147         }
 148         if (this.width) {
 149             cfg.width=this.width;
 150         }
 151
 152         if(this.store || this.cm){
 153             cfg.cn.push(this.renderHeader());
 154             cfg.cn.push(this.renderBody());
 155             cfg.cn.push(this.renderFooter());
 156
 157             cfg.cls+=  ' TableGrid';
 158         }
 159
 160         return cfg;
 161     },
 162 //
 163 //    initTableGrid : function()
 164 //    {
 165 //        var cfg = {};
 166 //
 167 //        var header = {
 168 //            tag: 'thead',
 169 //            cn : []
 170 //        };
 171 //
 172 //        var cm = this.cm;
 173 //
 174 //        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 175 //            header.cn.push({
 176 //                tag: 'th',
 177 //                html: cm.getColumnHeader(i)
 178 //            })
 179 //        }
 180 //
 181 //        cfg.push(header);
 182 //
 183 //        return cfg;
 184 //
 185 //
 186 //    },
 187
 188     initEvents : function()
 189     {
 190         if(!this.store || !this.cm){
 191             return;
 192         }
 193
 194         Roo.log('initEvents with ds!!!!');
 195
 196         var _this = this;
 197
 198         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
 199             e.on('click', _this.sort, _this);
 200         });
 201 //        this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
 202 //        this.maskEl.enableDisplayMode("block");
 203 //        this.maskEl.show();
 204
 205         this.parent().el.setStyle('position', 'relative');
 206         if (this.footer) {
 207             this.footer.parentId = this.id;
 208             this.footer.onRender(this.el.select('tfoot tr td').first(), null);
 209         }
 210
 211
 212         // mask should be using Roo.bootstrap.Mask...
 213
 214         var mark = {
 215             tag: "div",
 216             cls:"x-dlg-mask",
 217             style: "text-align:center",
 218             cn: [
 219                 {
 220                     tag: "div",
 221                     style: "background-color:white;width:50%;margin:100 auto; display:none",
 222                     cn: [
 223                         {
 224                             tag: "img",
 225                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
 226                         },
 227                         {
 228                             tag: "span",
 229                             html: "Loading"
 230                         }
 231
 232                     ]
 233                 }
 234             ]
 235         }
 236         this.maskEl = Roo.DomHelper.append(document.body, mark, true);
 237
 238         var size = this.parent().el.getSize();
 239
 240         this.maskEl.setSize(size.width, 300); // we will fix the height at the beginning...
 241
 242         this.maskEl.enableDisplayMode("block");
 243
 244         this.store.on('load', this.onLoad, this);
 245         this.store.on('beforeload', this.onBeforeLoad, this);
 246
 247         // load should be trigger on render..
 248         //this.store.load();
 249
 250
 251
 252     },
 253
 254     sort : function(e,el)
 255     {
 256         var col = Roo.get(el)
 257
 258         if(!col.hasClass('sortable')){
 259             return;
 260         }
 261
 262         var sort = col.attr('sort');
 263         var dir = 'ASC';
 264
 265         if(col.hasClass('glyphicon-arrow-up')){
 266             dir = 'DESC';
 267         }
 268
 269         this.store.sortInfo = {field : sort, direction : dir};
 270
 271         this.store.load();
 272     },
 273
 274     renderHeader : function()
 275     {
 276         var header = {
 277             tag: 'thead',
 278             cn : []
 279         };
 280
 281         var cm = this.cm;
 282
 283         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 284
 285             var config = cm.config[i];
 286
 287             if(typeof(config.hidden) != 'undefined' && config.hidden){
 288                 continue;
 289             }
 290
 291             var c = {
 292                 tag: 'th',
 293                 html: cm.getColumnHeader(i)
 294             };
 295
 296             if(typeof(config.dataIndex) != 'undefined'){
 297                 c.sort = config.dataIndex;
 298             }
 299
 300             if(typeof(config.sortable) != 'undefined' && config.sortable){
 301                 c.cls = 'sortable';
 302             }
 303
 304             if(typeof(config.width) != 'undefined'){
 305                 c.style = 'width:' + config.width + 'px';
 306             }
 307
 308             header.cn.push(c)
 309         }
 310
 311         return header;
 312     },
 313
 314     renderBody : function()
 315     {
 316         var body = {
 317             tag: 'tbody',
 318             cn : []
 319         };
 320
 321         return body;
 322     },
 323
 324     renderFooter : function()
 325     {
 326         var footer = {
 327             tag: 'tfoot',
 328             cn : [
 329                 {
 330                     tag: 'tr',
 331                     cn : [
 332                         {
 333                             tag : 'td',
 334                             colspan : 1
 335                         }
 336                     ]
 337                 }
 338             ]
 339         };
 340
 341         return footer;
 342     },
 343
 344     onLoad : function()
 345     {
 346         Roo.log('ds onload');
 347
 348         var _this = this;
 349         var cm = this.cm;
 350
 351         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
 352             e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
 353
 354             if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
 355                 e.addClass(['glyphicon', 'glyphicon-arrow-up']);
 356             }
 357
 358             if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
 359                 e.addClass(['glyphicon', 'glyphicon-arrow-down']);
 360             }
 361         });
 362
 363         var tbody = this.el.select('tbody', true).first();
 364
 365         var renders = [];
 366
 367         if(this.store.getCount() > 0){
 368             this.store.data.each(function(d){
 369                 var row = {
 370                     tag : 'tr',
 371                     cn : []
 372                 };
 373
 374                 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 375                     var config = cm.config[i];
 376
 377                     if(typeof(config.hidden) != 'undefined' && config.hidden){
 378                         continue;
 379                     }
 380
 381                     var renderer = cm.getRenderer(i);
 382                     var value = '';
 383                     var id = Roo.id();
 384
 385                     if(typeof(renderer) !== 'undefined'){
 386                         value = renderer(d.data[cm.getDataIndex(i)], false, d);
 387                     }
 388
 389                     if(typeof(value) === 'object'){
 390                         renders.push({
 391                             id : id,
 392                             cfg : value
 393                         })
 394                     }
 395
 396                     var td = {
 397                         tag: 'td',
 398                         id: id,
 399                         html: (typeof(value) === 'object') ? '' : value
 400                     };
 401
 402                     if(typeof(config.width) != 'undefined'){
 403                         td.style = 'width:' +  config.width + 'px';
 404                     }
 405
 406                     row.cn.push(td);
 407
 408                 }
 409
 410                 tbody.createChild(row);
 411
 412             });
 413         }
 414
 415
 416         if(renders.length){
 417             var _this = this;
 418             Roo.each(renders, function(r){
 419                 _this.renderColumn(r);
 420             })
 421         }
 422
 423         if(this.loadMask){
 424             this.maskEl.hide();
 425         }
 426     },
 427
 428     onBeforeLoad : function()
 429     {
 430         Roo.log('ds onBeforeLoad');
 431
 432         this.clear();
 433
 434         if(this.loadMask){
 435             this.maskEl.show();
 436         }
 437     },
 438
 439     clear : function()
 440     {
 441         this.el.select('tbody', true).first().dom.innerHTML = '';
 442     },
 443
 444     getSelectionModel : function(){
 445         if(!this.selModel){
 446             this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
 447         }
 448         return this.selModel;
 449     },
 450
 451     renderColumn : function(r)
 452     {
 453         var _this = this;
 454         r.cfg.render(Roo.get(r.id));
 455
 456         if(r.cfg.cn){
 457             Roo.each(r.cfg.cn, function(c){
 458                 var child = {
 459                     id: r.id,
 460                     cfg: c
 461                 }
 462                 _this.renderColumn(child);
 463             })
 464         }
 465     }
 466
 467 });
 468
 469
 470
 471