Nueva Clase BTable (Bootstrap-Table)

[administrador]

Como estan,

Agregue la nueva clase BTable, usa el pluggin Table de Bootstrap, con esta clase y la
TDatatable ya tenemos dos poderosas clases para elegir la que mas les guste, son
muy buenas las dos.

Aqui el codigo del ejemplo para usarla :

Código: Seleccionar todo

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

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

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

$msg = "Test doble click";

$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 ],
];

$oWnd = new TWindow( 'main', 5, 12, '98%', '95%' );

  $oGrid = new BTable( $oWnd, 'grid', 5, 5, '95%', '60%' );
  $oGrid->AddColumn('id', 'Codigo', null, AL_LEFT, true );
  $oGrid->AddColumn('name', 'Nombre', null, AL_LEFT, true, true );
  $oGrid->AddColumn('price', 'Precio', 'priceFormatter', AL_RIGHT, false, false, true );
  $oGrid->AddIcon('icon', 'Icon', "operateFormatter" );
  $oGrid->SetDataTable( $aData );
  $oGrid->HeaderStyle( "headerStyle" );
  $oGrid->FooterStyle( "footerStyle" );
  $oGrid->BtnTools( 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 + '">' +
      '<i class="fa fa-dollar-sign"></i>' + value +
      '</div>'
  }

  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:myLike()" title="Like">',
      '<i class="fa fa-heart"></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(); 
    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");
  }
  
</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;
    }
  }
  
</style>

Link del ejemplo : TEST