TVALWEB

Código: Seleccionar todo

<?php
include ( "config.php" );

// Librerias
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'core.table.php' );

$oWeb = new TWeb( "TEST BOOTSTRAP TABLE" );
$oWeb->lAwesome = true; 
$oWeb->SetFontFamily("Sans-serif");
$oWeb->Activate();

$aData = [ 
  [ "id" => "A0001", "name" => "HABURGUESA MIXTA", "price" => 5.25 ],
  [ "id" => "A0002", "name" => "PERRO CALIENTE", "price" => 3.00 ],
  [ "id" => "A0003", "name" => "COCA-COLA", "price" => 2.50 ],
  [ "id" => "B0001", "name" => "PEPSI-COLA", "price" => 1.50 ],
];

$footer = Format2Html( './footer.html', [ "TVALWEB 2.0", "Albeiro Valencia" ] );

$oWnd = new TWindow( 'main', 5, 5, '98%', '95%' );
$oWnd->footer( $footer, "my-footer" );

  $oGrid = new BTable( $oWnd, 'grid', 5, 5, '98%', '60%', null, $aData );
  $oGrid->AddCol('id', 'Codigo', null, AL_LEFT, true );
  $oGrid->AddCol('name', 'Nombre', null, AL_LEFT, true, true );
  $oGrid->AddCol('price', 'Precio', 'priceFormatter', AL_RIGHT, false, false, true );
  $oGrid->Title("Test de Boostrap-Table", "black", "white", "title");
  $oGrid->AddColIcon('icon', 'Icon', "operateFormatter" );
  $oGrid->HeaderStyle( "headerStyle" );
  $oGrid->FooterStyle( "footerStyle" );
  $oGrid->Export( true );
  $oGrid->CardView( false );
  // $oGrid->ClickRow( "onClickRow()" );
  $oGrid->AddButton("badd", "Nuevo", "AddRow()", "fa fa-plus");
  $oGrid->AddButton("bdel", "Elimina", "DelRow()", "fa fa-minus");
  // $oGrid->DblClickRow( "onDblClickRow()" );

  
$oWnd->Activate();

$oWeb->End();

?>

<script>

  var oGrid;

  $(function() {
    var oCtrl = new TControl();
    oGrid = oCtrl.GetControl("grid");
    console.log(oGrid);
  });

  function AddRow() {
    oGrid.addRow({ id : "C0001", name : "PIZZA MARGARITA", price : 8.90 });
  }

  function DelRow() {
    console.log("DelRow()");
    if ( oGrid.rowselect() ) {
      var index = oGrid.getindex();
      oGrid.delRowIndex( index );
    } else {
      MsgNotify("Seleccione un Registro", "error");
    }
  }

  function headerStyle(column) {
    return {
      id: {
        classes: 'uppercase'
      },
      name: {
        css: {background: 'yellow'}
      },
      price: {
        css: {color: 'red'}
      }
    }[column.field];
  }
  
  function footerStyle(column) {
    return { 
      id : { 
        classes: 'foot-table' 
      },
      name : { 
        classes: 'foot-table' 
      },
      price : { 
        classes: 'foot-table' 
      },  
    }[column.field];
  }

  function priceFormatter(value) {
    // 16777215 == ffffff in decimal
    var color = '#' + Math.floor(Math.random() * 6777215).toString(16)
    return '<div style="color: ' + color + '">' +
      '$ ' + value +
      '</div>';
  }

  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:AddRow()" title="Like">',
      '<i class="fa fa-plus"></i>',
      '</a>  ',
      '<a class="remove" href="javascript:myRemove()" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('');
  }

  function myLike() {
    JMsgInfo("Click Like");
  }

  function myRemove() {
    let index = oGrid.getindex(); 
    oGrid.check(index);
    let row   = oGrid.getrow( index );
    JMsgYesNo("Elimina el Registro " + JSON.stringify(row) + " ?", DelRow);
  }

  function onClickRow() {
    JMsgInfo("Click en el Row");
  }

  function onDblClickRow() {
    JMsgInfo("DobleClick en el Row");
  }

  function testIcon() {
   JMsgInfo("TVALWEB Ver. 2.0, The Power of the web!!!");
  }
  
</script>

<style>
  
  .head-table {
    color: black;
    background-color: aqua;
  }

  .foot-table {
    color: black;
    background-color: aqua;
  }

  @media (max-width : 640px) {
    #main {
      overflow-y: scroll !important;
    }
  }

  .text-footer {
    color: #0b369b;
    font-size: 13px;
    font-weight: bold;
    font-family: verdana;
  }

  .uppercase {
    text-transform: uppercase;
    color : blue;
    background-color: gray;
  }

  .remove {
    margin-left: 5px;
  }
  
</style>