Agregar columnas a JTable

Siguiendo con el proyecto de creacion de Jtable en java viene el momento de agregar una columna a nuestra JTable.

A diferencia de como agregar un registro a nuestra JTable, para agregar una columna es mas sencillo que lo anterior, se necesita de un JOptionPane en el ejemplo que estoy usando. y punto.


Ahora trabajaremos con el total de los renglones, esto nos dará como resultado un arreglo del tipo Object que sera el data de la nueva columna, quedando de la siguiente manera.

 
    public void addCols(){
        String n = (String) JOptionPane.showInputDialog(
                null, 
                "Nombre de la columna", 
                "New Column", 
                JOptionPane.QUESTION_MESSAGE, 
                null, 
                null, 
                "Columna Nueva"
        );
        if( n==null ){
            return;
        }else if( ( n.length() == 0 ) || ( n.trim().length() == 0 ) ){
            return;
        }else if( n.trim() != null ){
            Object[] newColumn = new Object[tabla.getRowCount()];
            dtm.addColumn( n, newColumn );
        }
    }
    

Como lo mencione anteriormente, en el ejemplo que les estoy mostrando pido el nombre de la columna mediante un JOptionPane, pasandole los parametros que se requieren para mostrar esta ventana.

Al final solo se agrega la nueva columna al DefaultTableModel. le agregamos unas validaciones tales como. valor no nulo o que la longitud del valor sea mayor a 0, dejando como resultado la asignación del nombre a la nueva columna.


Sin mas es todo por hoy, Déjame tu comentario para saber en que mejorar.

Cargar CSV en JavaScript

Cargar y leer un archivo csv en JavaScript sin necesidad de php, java u otro más.

Así es, tal y como lo leen, hoy les traigo un código que espero les ayude tanto como a mi me a ayudado hasta este momento, con un poco de lógica, que les dejara como resultado el contenido del archivo en un array.

Y como siempre lo digo... vamos al punto.

<div id="drop_file_zone" ondragover="return false" ondrop="upload_file(event)">
 <div id="drag_upload_file">
  <div id="datos">
   <h2>
    Drag and drop file here or click for selected file
   </h2>
  </div>
  <input id="selectfile" type="file" />
 </div>
</div>

<div id="dvCSV"></div>

dando como resultado lo siguiente

A esto demos le un poco de estilo.

#drop_file_zone{
 border: solid 1px;
 cursor: pointer;
 }
#drop_file_zone #drag_upload_file{
 height: 3em;
 padding: 1em;
 }
#drop_file_zone:hover{
 border-style: dashed;
 border-radius: 5px;
 border-color: blue;
 }
#drop_file_zone input[type=file]{
 display: none;
 }

Esto quedara así

Ahora lo mas esperado. Así es, el codigo.

Comencemos con las acciones del drop y el evento click a nuestra área de archivo.

---

$( '#drag_upload_file' ).click(function(){
 document.getElementById('selectfile').click();
 document.getElementById('selectfile').onchange = function () {
  uploadCsv( document.getElementById('selectfile').files[0], function(data){
   createTable( data );
  });
 };
});
function upload_file( e ){
 e.preventDefault();
 uploadCsv( e.dataTransfer.files[0], function(data){
  createTable( data );
 } );
}

function uploadCsv( fileUpload, callback ){}

function createTable( datos ){}

---

Con esto, decimos que cuando den click o bien cuando dejen un archivo en nuestra área esta invocará la función uploadCsv, la cual recibe como primer parametro el archivo del file upload mientras que en su segundo parametro deja una funcion de retorno.

Ahora bien el codigo de la funcion uploadCsv es el siguiente.


---

function uploadCsv(fileUpload, callBack) {
 var rtn = {};
 var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv)$/;
 if (regex.test(fileUpload.name.toLowerCase())) {
  rtn.name = fileUpload.name;
  rtn.data = [];
  rtn.size = fileUpload.size;
  rtn.encabezado = [];
  if (typeof (FileReader) != "undefined") {
   var reader = new FileReader();
   reader.onload = function (e) {
    var x = 0;
    var rows = e.target.result.split("\n");
    for (var i = 0; i < rows.length; i++) {
     var cells = rows[ i ].split( "," );
     var obj = {};
     var have = 0;
     for( var j = 0; j < cells.length; j ++ ){
      if( cells[ j ].length == 0 )break;
      have = 1;
      if( i == 0 ){
       obj[ 'field_' + j ] = ( cells[ j ].trim() ).toUpperCase();
      }else{
       var field =  rtn.encabezado[0]['field_' + j ] ;
       obj[ field ] = cells[ j ];
      }
     }
     if( i == 0 ){
      rtn.encabezado.push( obj );
     }else{
      if( have == 1 )
       rtn.data.push( obj );
     }
     x++;
    }
    rtn.total = x ;
    callBack( rtn );
   }
   reader.readAsText(fileUpload);//.files[0]);
  } else {
   callBack( "Este navegador no soporta html5" );
  }
 } else {
  callBack( "El archivo no es csv");
 }
}

---

Ahora solo falta el mostrar el contenido de nuestro archivo, y para ello nos creamos la funcion createTable con lo siguiente,


---

function createTable(datos) {
 var table = document.createElement("table");
 var rows = datos.data;
 var cells = Object.keys( datos.encabezado[ 0 ] );
 for (var i = 0; i < rows.length; i++) {
  var row = table.insertRow(-1);
  for (var j = 0; j < cells.length; j++) {
   var cell = row.insertCell(-1);
   cell.innerHTML = datos.data[i][ datos.encabezado[ 0 ][ cells[ j ] ] ];
  }
 }
 var head = table.createTHead( -1 );
 var row = head.insertRow( -1 );
 for( var j = 0; j < cells.length; j ++ ){
  var th = document.createElement( 'TH' );
  th.innerHTML = datos.encabezado[ 0 ][ cells[ j ] ];
  row.appendChild( th );
 }
 var caption = table.createCaption();
 caption.innerHTML = "
" + datos.name + "";

 var dvCSV = document.getElementById("dvCSV");
 dvCSV.append( table );
}

---

Y así de simple es como queda esto. no sin antes darle un mejor estilo a nuestra tabla creada a partir del contenido del archivo csv.


----

table{
 width: 100%;
 border: 1px;
 border-collapse: collapse;
}
table caption {
 border: solid 1px;
 font-size: larger;
 padding: 0.5em;
}
table thead tr th {
 padding: 0.75em;
 border: solid 1px;
 border-top: none;
 font-size: larger;
}
table tr td {
 border: solid 1px;
 padding: 0.5em;
 font-size: small;
}

----
dejando al final un resultado como el siguiente.

Espero les sirva de apoyo para su desarrollo, sin mas.. me despido por el momento, espero sus comentarios.