Edicion de Celda en TDatatables - Nuevo !!

[administrador]

Agregada la Edicion de Celdas en Linea para TDatatable

Se agrego la edicion de celdas en linea, para la clase TDatatables. Para validar el contenido se llama una funcion callback desde javascript.

La manera de usarlo en javascript es la siguiente :

var oCtrl = new TControl();
var oGrid = oCtrl.GetControl( 'myTable' );
oGrid.SetData( aDatos );
oGrid.onUpdate = postEdit; <--- se asigna la funcion que vamos a usar, en este ejemplo es la funcion postEdit
oGrid.MakeCellsEditable(); <--- con solo invocar este method se crea la edicion de celdas

Codigo de ejemplo de uso

Código: Seleccionar todo

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

$oWeb = new TWeb('TEST TDATATABLE');
$oWeb->lAwesome = true; 
$oWeb->AddJs( TWEB_PATH . 'datatable.cellEdit.js' );
// $oWeb->AddJs( TWEB_PATH . 'albeiro.js' );
$oWeb->Activate();

  $oWnd = new TWindow('main', 10, 10, '50%', '70%');

    $oBar = new TBar( $oWnd );
    $oBar->AddButton( 'bLoad', 'Load', 'Load()' , IMAGE_PATH . 'refresh-black-16.png', 'Load' );
    $oBar->AddButton( 'bSalir', 'Salir', 'DoForo()' , IMAGE_PATH . 'logout-black-16.png', 'Salir' );

    $oDataTable = new TDataTable( $oWnd, 'myTable' );
    $oCol = $oDataTable->AddCol( 'codigo'     , 'Codigo' );
    $oCol = $oDataTable->AddCol( 'descripcion', 'Descripcion' );
    $oCol = $oDataTable->AddCol( 'precio'     , 'Precio', 'N$', AL_RIGHT );
    $oCol = $oDataTable->AddIcon( null, 'fa fa-trash fa-2x', 'red', "myIcon()" ); 
    $oCol = $oDataTable->AddButton( null, 'Editar', 'blue', "myBtn()" ); 
    $oDataTable->PageLength( 2 );
    $oDataTable->Paging( true );
    $oDataTable->ScrollY( "120px" );
    $oDataTable->ScrollX( true );

  $oWnd->Activate();

$oWeb->End();

?>

<script>
  
  var aDatos = [ { codigo : "001", descripcion : "primero AA", precio : 25.30 },
                 { codigo : "002", descripcion : "segundo AA", precio : 50.00 },
                 { codigo : "003", descripcion : "tercero AB", precio : 10.00 },
                 { codigo : "004", descripcion : "cuarto  AB", precio : 20.00 },
                 { codigo : "005", descripcion : "quinto AC", precio : 30.00 },
                 { codigo : "006", descripcion : "sexto AC", precio : 60.00 },
                 { codigo : "007", descripcion : "septimo AD", precio : 70.00 },
                 { codigo : "008", descripcion : "octavo AD", precio : 90.00 } ];

  function Load() {
    var oCtrl = new TControl();
    var oGrid = oCtrl.GetControl( 'myTable' );
    console.log(aDatos, oGrid);
    oGrid.SetData( aDatos );
    oGrid.onUpdate = postEdit;
    oGrid.MakeCellsEditable();
  }

  function postEdit (updatedCell, updatedRow, oldValue) {
	  console.log("The new value for the cell is: " + updatedCell.data());
	  console.log("The old value for that cell was: " + oldValue);
    console.log("The values for each cell in that row are: " + updatedRow.data());
    JMsgInfo( updatedCell.data() );
  }

  function myBtn() {
    JMsgInfo("Click en Button");
  }

  function myIcon() {
    JMsgInfo("Click en Icon");
  }

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

</script>

<style>

@media (max-width: 375px) {
  #main {
    top: 20px !important;
    left: 18px  !important;
    width: 90%  !important;
    height: 80%  !important;
  }
}

.my-input-class {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.my-confirm-class {
  padding: 3px 6px;
  font-size: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #337ab7;
  text-decoration: none;
}    

.my-cancel-class {
  padding: 3px 6px;
  font-size: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #a94442;
  text-decoration: none;
  margin-left: 2px;
}

.error {
  border: solid 1px;
  border-color: #a94442;
}    

#idcell .my-confirm-class {
  margin-top: 5px ;
}
  
</style>

Para probar solo deben hacer click en la celda de la fila que quieren editar.

Link del ejemplo funcionando : Test del ejemplo

[Oscar Maldonado]

Estimado Antonio.

He revisado y me parece que tiene algún bug te envié las imagenes al chat.

Muchas gracias.


Saludos.

Oscar

[administrador]

Oscar, el bug esta corregido con la nueva version.