Nuevo Agregada la clase AddTab a la case TModal !!

[administrador]

Colegas, buen dia.

Ya esta incluida la clase AddTab en la clase TModal, tiene los controles basicos :
Input, Select, Radio, CheckBox, Label, Table, Image, Memo, Spinner y Html (para usuarios avanzados).

En el ejemplo cuando lo ejecuten por pimera vez, en la pestaña (tab) "Productos" hacer click en refresh para ajustar la tabla.
(Esto es por un bug del plugin boostrap-table).

A continuacion esta el codigo del ejemplo

Código: Seleccionar todo

<?php
include( "config.php" );
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'core.modal.php' );

$aData = [ 
  [ "codigo" => "COD-001", "descri" => "COCA-COLA", "canti"  => 2, "precio" => 25.10 ],
  [ "codigo" => "COD-002", "descri" => "PEPSI-COLA", "canti"  => 1, "precio" => 19.00 ],
  [ "codigo" => "COD-003", "descri" => "PIZZA-MARGARITA", "canti"  => 3, "precio" => 5.20 ],
  [ "codigo" => "COD-004", "descri" => "POLO EN BRASA", "canti"  => 2, "precio" => 6.50 ],
  [ "codigo" => "COD-005", "descri" => "PASTA NAPOLITANA", "canti"  => 1, "precio" => 7.1 ],
  [ "codigo" => "COD-006", "descri" => "HAMBURGUESA 1/4 LIBRA", "canti"  => 1, "precio" => 8.25 ]
];

$oWeb = new TWeb('TEST MODAL TABS');
$oWeb->lAwesome = true; 
$oWeb->Activate();

  $oWnd = new TWindow('main', 10, 10, '45%', '40%');

  $oBtn = new TButton( $oWnd, "btn", 10, 10, "Modal Tabs", "DoTabs()", 150, 30 );

  // $oWnd->AddVarJS("dataTable", json_encode($aData));

  $oWnd->Activate();

  CreateModalTabs( $aData );

$oWeb->End();

//--------------------------------------------------

function CreateModalTabs( $aData ) {

  $oModal = new TModal( "myTabs", "TEST TABS" );
  
  $oTab = $oModal->AddTab( "Cliente" );
    $oTab->Input("Nombre", "get1-t1", TYPE_TEXT );
    $oTab->Input("Cedula", "get2-t1", TYPE_TEXT );

  $oTab = $oModal->AddTab( "Producto" );
    $oGrid = $oTab->Table( $aData );
    $oGrid->AddColumn( "codigo", "Codigo" );
    $oGrid->AddColumn( "descri", "Descri" );
    $oGrid->AddColumn( "canti",  "Cant", AL_RIGHT, null, "totalTextFormatter" );
    $oGrid->AddColumn( "precio", "Precio", AL_RIGHT, "priceFormatter", "totalPriceFormatter" );
    $oGrid->Footer(true);
    $oGrid->Paging(true);
    $oGrid->AddButton("bnew", "Nuevo", "AddRow()", "fa fa-plus");
    $oGrid->AddButton("bdel", "Elimina", "DelRow()", "fa fa-minus");
    $oTab->TableHeight($oGrid, 400);
    $oTab->TableData( $oModal, $aData );
    $oTab->Input("Direccion de envio", "get1-t1", TYPE_TEXT );
   
  $oTab = $oModal->AddTab( "Pagar" );
    $oTab->Input("Efectivo", "get1-t3", TYPE_TEXT );
    $oTab->Input("Debito", "get2-t3", TYPE_TEXT );   
    $oTab->Input("Credito", "get2-t3", TYPE_TEXT );   

  $oModal->AddButton( 'bexit2', 'Grabar', '', 'white', 'green' );
  $oModal->AddButton( 'bexit2', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );  
    
  $oModal->Activate();  

}

?>

<script>

  var oModal;

  $(function() {
    oModal = new TModal("myTabs");
  });

  function DoTabs() {
    MsgNotify("Test Modal Tabs", "success");
    // oModal.setTable(dataTable);
    oModal.show();
  }

  function totalTextFormatter(data) {
    return 'Total Bs';
  }         

  function totalPriceFormatter(data) {
    var field = this.field;
    var value = data.map(function(row) { return +row[field] }).reduce(function(sum, i) { return sum + i }, 0);
    return 'Bs ' + value.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
  }

  function priceFormatter(value) {
    var price = value.toFixed(2);
    return 'Bs ' + price; 
  }

  function AddRow() {
    oModal.addTableRow({ "codigo" : "COD-005", "descri" : "POLLO EN BRASA", "canti" : 2, "precio" : 6.5 });
  }

  function DelRow() {
    if ( oModal.tablerowselect() ) {
      let index = oModal.getindex();
      oModal.delRowIndex( index );
      MsgNotify("Registro " + index + " Eliminado !!!", "success");
    } else {
      MsgNotify("Seleccione una fila", "error");
    }  
  }

  function DoForo() {
    location.href = 'http://avcsistemas.com/foro';
  }

</script>

Link del ejemplo : TEST

[administrador]

Corregido el bug del RefreshView de la tabla en la TModal usando TTabs, ahora ya se muestra de manera correcta
en modo responsive en todos los dispositivos.

[Erick Almanza]

Hola Antonio
Excelente clase.

Ya lo probe en el celular. totalmente adaptable




Saludos,

Erick Almanza

[Oscar Maldonado]

Estimado Antonio

El tab productos no se vee bien en celular


saludos

[administrador]

Hola Oscar,

Si ya habias probado antes el ejemplo en tu celular, debes borrar el cache de navegacion para que tome los nuevos cambios.

Saludos

[Oscar Maldonado]

Muchas gracias

Yo lo probé poniendo al celular de forma horizontal, espero explicarme.

Saludos

[administrador]

Amigo, Maldonado,

Corregido el bug, gracias por el feed back.