domingo, 1 de abril de 2012

Componente Tabla, segunda parte insertando datos

El plugin requiere que se obtenga id del último registro que se insertó en la tabla, y se lo regrese por medio de ajax para que este lo pueda mostrar visualmente los datos , es una manera de comprobar que se realizó la inserción correctamente.
Para esto en una parte del controller tuve que obtener el ultimo id insertado usando la función $this->db->insert_id(), investigando un poco encontre que insert_id() usa la función de php mysql_insert_id() que requiere que la tabla tenga un campo autoincrement (ver aqui), por lo tanto de ahora en adelante todas las tablas creadas deben tener un campo autoincrement para que se pueda hacer la inserción. Aquí pongo un el SQL de la tabla usuario con este requerimiento.

1
2
3
4
5
6
CREATE TABLE `usuario` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(10) NOT NULL,
  `password` varchar(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

La vista es la misma de los ejemplos anteriores con el tag jtabla:
1
2
3
  <jtabla id="invtabla" tabla="usuario" permisos="CR" titulo="Los usuarios">
         <campo nombre="id" titulo="El id dek item" autoinc="true"></campo>
   </jtabla>

ahora en permisos hemos añadido la letra C que representa la creación o inserción de registros, se ha incluido un <campo> donde nombre es el nombre del campo de la tabla, titulo es el título que aparecerá visualmente, creo que se explican por si solos y autoinc determina que este campo es autoincrement, realmente solo necesitamos uno, todos estos atributos son necesarios para la configuración del objeto jtable.



A continuación en el javascript jtable.js, en la linea 15 $("campo[autoinc=true]").attr("nombre") se obtiene el nombre del campo que tiene el atributo autoinc con jquery, se añade al objeto config_jtable en la linea 24, y dentro de la función jtable se envia al controller a la función crear linea 43, luego se reciben los nuevos datos por medio de ajax lineas 58-80, dentro de la función ajax en el metodo success linea 62 recibimos la nueva lista de los datos con los id autoincrementales de la tabla en la bd, el resto es igual a la inserción de los datos.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/* 
 * La lógica por parte del cliente usando jquery
 */

jQuery(document).ready(function(){
    // datepicker("#datepicker");
    html_jtabla();
    function html_jtabla(){
        var arr_jtabla = $("jtabla");
        $.each(arr_jtabla, function(key, value) {
            var id_jtabla = $(this).attr("id");
            var nombre_tabla = $(this).attr("tabla");
            var permisos = $(this).attr("permisos");
            var titulo = $(this).attr("titulo");
            var campo_id = $("campo[autoinc=true]").attr("nombre");
           
            var string_div = '<div id="'+ id_jtabla + '" ></div>';
            $(this).replaceWith(string_div);
            var config_jtable = {
                "id":id_jtabla,
                "tabla":nombre_tabla,
                "permisos":permisos,
                "titulo":titulo,
                "campo_id": campo_id  // el campo id(autoincrement de la tabla en la bd
            }
            jtable(config_jtable);
        });
    }

    function jtable(config_jtable){
        // crea las acciones
        var acciones = {};
        var campos ={};
            // NOTA se tuvo que cambiar en el config de codeigniter a $config['uri_protocol']    = "PATH_INFO";
        var $config_urlencoded = $.param(config_jtable);//codifica la url
        $.each(config_jtable.permisos, function(key, value) {
            if(value=="R"){
                acciones.listAction = "componentes/listar/"+config_jtable.tabla;
            }
            if(value=="C"){
               
                //console.log($config_json);
                acciones.createAction = "componentes/crear?"+$config_urlencoded;
            }
            if(value=="U"){
                console.log("Actualizar activado")
                acciones.updateAction = "componentes/actualizar?"+$config_urlencoded;
            }
            if(value=="D"){
                //console.log("Borrar activado")
                acciones.deleteAction = "componentes/borrar?"+$config_urlencoded;
            }
            if(value==null){
                console.log("Defina las acciones");
            }
        });
        //esta parte obtiene los campos de la tabla automaticamente
        $.ajax({
            type: "POST",
            url: "componentes/listar_campos/"+config_jtable.tabla,
            async:false,
            success: function(msg){
                var datos = $.evalJSON(msg);// se convierte de json a un objeto javascript
                $.each(datos, function(key, value) {
                    campos[value] = {
                        title:value
                    };
                   
                    // se añade el campo autoincrement de la tabla a la configuracion
                    if(config_jtable.campo_id == value){
                   
                        campos[value].key= true;//es el campo id
                        campos[value].edit=false;//no se puede editar
                        campos[value].list=false;//no se muestra
                    }

                });
   
            }
        },config_jtable);
    // se crea el objeto jtable
        $('#'+config_jtable.id).jtable({
            title: config_jtable.titulo,
            actions: acciones,
            fields:  campos
        });
//se cargan los datos
        $('#'+config_jtable.id).jtable('load');
    }

});// fin de ready function


En  el  controller el metodo crear recibe los datos del cliente descritos anteriormente  lineas 50-52 , la linea 55 inserta los datos a la tabla, en la linea 57 se arma el array como se describe en la documentación del plugin jtable, la parte importante de este proceso es retornar el ultimo id insertado linea 59   $datos['Record'] = $this->Generic_model->ultimo_record_insertado($tabla, $campo_id, $id);    e incluirselo al array, la linea 60 simplemente retorna los datos hacia el cliente para que lo reciba la función de ajax.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?php

class Componentes extends CI_Controller {

    public function __construct() {
        parent::__construct();
        // cargamos nuestro base de datos ahora lo hacemos por defecto
        $this->load->database();
        // $this->load->library("firephp");
        $this->load->model("Generic_model");
    }

    public function datos_dp() {

//        var $json_conf_dp = [{
//        tabla:'historial',
//        campo:'fecha'
//        }];
        $tabla = $this->input->post('tabla');
        $campo = $this->input->post('campo');
        $this->load->model("Generic_model");
        $datos['query'] = $this->Generic_model->get_datos($tabla, $campo);
        // codificamos el array a json usando json_encode mirar manual de php
        $data_json = json_encode($datos);
        // enviamos el json a la vista
        echo $data_json;
    }

    public function listar($tabla) {

        $datos = array();
        $datos['Result'] = "OK";
        $datos['Records'] = $this->Generic_model->listar_jtable($tabla);
        // codificamos el array a json usando json_encode mirar manual de php
        $data_json = json_encode($datos);
        // enviamos el json a la vista
        echo $data_json;
    }

    public function listar_campos($tabla) {
        //$this->load->model("Generic_model");
        $datos = $this->Generic_model->listar_campos($tabla);
        $data_json = json_encode($datos);
        // enviamos el json a la vista
        echo $data_json;
    }

    public function crear() {
        //$tabla =$_GET['tabla'];
        $tabla = $this->input->get('tabla'); // se envian por querystring
        $campo_id = $this->input->get('campo_id');
        $registro = $this->input->post();

        //insertar registro y obtener id insertado
        $id = $this->Generic_model->insertar_jtable($tabla, $registro);
        $datos = array();
        $datos['Result'] = "OK";

        $datos['Record'] = $this->Generic_model->ultimo_record_insertado($tabla, $campo_id, $id);
        echo json_encode($datos);
    }

    public function borrar() {
        //Delete from database
        $tabla = $this->input->get('tabla'); // se envian por querystring
        $campo_id = $this->input->get('campo_id');
        $id_registro = $this->input->post($campo_id);
        $this->Generic_model->borra_registro($tabla, $campo_id,$id_registro);
        //$result = mysql_query("DELETE FROM people WHERE PersonId = " . $_POST["PersonId"] . ";");
        // borra el campo
        //Return result to jTable
        $jTableResult = array();
        $jTableResult['Result'] = "OK";
         $jTableResult['debug'] = $id_registro;
        echo json_encode($jTableResult);
    }
        public function actualizar() {
        //Delete from database
        $tabla = $this->input->get('tabla'); // se envian por querystring
        $campo_id = $this->input->get('campo_id');
        $id_registro = $this->input->post($campo_id);
        $registro = $this->input->post();
        $this->Generic_model->actualiza_registro($tabla, $campo_id,$id_registro,$registro);
       
        //Return result to jTable
        $jTableResult = array();
        $jTableResult['Result'] = "OK";
        // $jTableResult['debug'] = $id_registro;
        echo json_encode($jTableResult);
    }

}

En el modelo el único cambio que se hizo fue la función  ultimo_record_insertado en la linea 54 ya que es requerido por el plugin, creo que no es requerida una explicación extensa en esta parte :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php

class Generic_model extends CI_Model {

    function __construct() {
        // Call the Model constructor
        parent::__construct();
    }

    function get_datos($nombre_tabla, $nombre_campo) {
        // SQL equivalente a SELECT $nombrecampo FROM $nombre_tabla;
        $this->db->select($nombre_campo);
        $this->db->from($nombre_tabla);
        $query = $this->db->get();
        return $query->result();
    }

    function listar_jtable($tabla) {

        $query = $this->db->get($tabla);
        return $query->result();
    }

    function listar_campos($tabla) {
        $campos = $this->db->list_fields($tabla);
        return $campos;
    }

    function insertar_jtable($tabla, $datos) {
        $this->db->insert($tabla, $datos);
        return $this->db->insert_id(); //regresa el id insertado
    }

    function ultimo_record_insertado($tabla, $campo_id, $id) {
        // el id proviene del controller de la funcion $this->db->insert_id()
        $query = $this->db->get_where($tabla, array($campo_id => $id));

        return $query->row(); 
    }

    function borra_registro($tabla, $campo_id, $id_registro) {

        $this->db->delete($tabla, array($campo_id => $id_registro));
    }

    function actualiza_registro($tabla, $campo_id, $id_registro, $registro) {
        $this->db->where($campo_id, $id_registro);
        $this->db->update($tabla, $registro);
    }

}

El resultado es satisfactorio se insertan datos al hacer click en add new record y se actualiza la tabla automáticamente como se puede ver a continuación el plugin jtable se encarga de crear automáticamente los formularios correspondientes http://localhost/blog/index.php/tabla

No hay comentarios:

Publicar un comentario