Manuales de TuGa Página Principal

CAMPOS MAESTRO DETALLE (DBGRID)

Este tipo de campo tiene como objetivo enviar mucha información clasificada de la misma forma. En el grafico vemos que se puede enviar los siguientes datos: Nombre, Tipo de Pasajero, Identificación, Dirección, Teléfono y Fecha de Nacimiento.

Si se desea agregar otra línea para ingresar la misma información lo único que el usuario debe hacer es hacer clic en el icono. Si se desea eliminar una línea, se debe hacer clic en el icono.

Cada columna puede ser de tipo texto, entero, fecha o una colección de datos. El control hace la validación necesaria del tipo de información contenida en el campo.

Cada columna se envía como un vector de información, para ingresar dicha información a la base de datos se debe utilizar la acción “Ejecutar UPDATE con los datos de un VECTOR”.

¿Cómo hacer un maestro detalle?

1. En JS/CSS de inicio declare el objeto, ejemplo (1):

var prueba = new tuga_dbgrid('detalle', 'Nombre de la persona:TEXTO:nombre:false');

El anterior ejemplo declararía un dbgrid con una única columna con etiqueta ‘Nombre de la Persona’.

El objeto tuga_dbgrid recibe 2 parámetros: el nombre del control y una cadena que define las columnas, cada columna se separa por ;

Cada columna se define de la siguiente forma: Etiqueta:TIPO DE CAMPO:variable:Obligatorio

Ejemplo: (2) Nombre de la Persona:TEXTO:nombre:false;Tipo de Pasajero:COMBO_3:tipopas;true

En el ejemplo anterior estaríamos definiendo dos columnas, Nombre de la Persona y Tipo de Pasajero.

Los tipos de campo son los siguientes: TEXTO, ENTERO, FECHA y COMO_X donde X corresponde al código de la colección de datos que se va a utilizar para la lista desplegable.

Un ejemplo más completo (3):

var pasajeros = new tuga_dbgrid('pasajeros','Nombre:TEXTO:nombrepasajero:true;Tipo de Pasajero:COMBO_56:tipopasajero:true;Identificacion:TEXTO:identificacion:true;Direccion:TEXTO:direccion:true;Telefono:TEXTO:telefono:true;Fecha Nacimiento:FECHA:fechanacimiento:true');

Por cada columna del control debe haber un campo oculto dentro del formulario de la pantalla, el cual recibirá el valor de dicha columna, de acuerdo al ejemplo numero 2 donde definimos 2 columnas (Nombre de la Persona y Tipo de Pasajero) se crearían dos campos ocultos no obligatorios donde se guardarían el contenido de dichas columnas (por ejemplo, nombre y tipo).

2. Declare un tipo de campo de tipo “Definido por el usuario” y ejecute en él las siguientes instrucciones:

3. Programe el botón que envía los datos de la siguiente manera :

Si quiere validar la información del dbgrid, entonces ponga el siguiente bloque dentro del javascript del botón:

if(!tuga_dbgrid_validaEnviar('detalle')){return false;}

Donde ‘detalle’ es el nombre del dbgrid

Para enviar la información contenida en el dbgrid, el valor de cada columna debe asignarse a un campo dentro del formulario. Cree una función que haga esta tarea y prográmela dentro del javascript del botón. El siguiente ejemplo hace la validación del dbgrid y luego la asignación de valores por medio de la función enviarInfo();

if(!tuga_dbgrid_validaEnviar('detalle')){return false;}enviarInfo();

Donde enviarInfo está programada en la opción JS/CSS de inicio de la pantalla:

function enviarInfo(){

document.FormXX.nombre.value = prueba.getData('nombre');

document.FormXX.tipo.value = prueba.getData('tipopas');

}

Tenga en cuenta que FormXX hace referencia al nombre del formulario y que la función getData obtiene el valor de la variable especificada dentro del dbgrid.

Para insertar la información utilice la acción dentro del botón correspondiente “Ejecuta UPDATE con los datos de un VECTOR” y programe el SQL de la siguiente forma:

En el SQL:

INSERT INTO detalle (maestro,nombre,tipo) VALUES (<<secmaestro>>, VECTOR1, VECTOR2)

Y en la opción “campo que contiene el vector”

<<nombre>>, <<tipo>>

Esto quiere decir que el contenido de VECTOR1 será reemplazado por el valor de la variable <<nombre>> (la cual contiene todos los valores de la columna nombre) y la variable VECTOR2 será reemplazada por el contenido de la variable tipo (la cual contiene todos los valores de la columna <<tipo>>).

Tenga en cuenta el tipo de dato que se está insertando, por ejemplo si VECTOR1 se trata de una cadena, el SQL sería:

INSERT INTO detalle (maestro,nombre,tipo) VALUES (<<secmaestro>>, 'VECTOR1', VECTOR2)

Programar eventos en los campos de un dbgrid.

Para programar eventos en los campos de un dbgrid se debe programar la siguiente función usando javascript: function tuga_campo_user_function(textbox){} donde textbox hace referencia al campo actual dentro del dbgrid donde está ubicado el usuario. Utilice las siguientes funciones de acuerdo a sus necesidades:

· tdbg_esObj (objeto, nombrecampo): Compara si el objeto es el indicado por el nombre, retorna true o false.

· tdbg_esGrid(objeto, nombregrid) : Compara si el objeto hace parte del dbgrid con el nombre indicado, retorna true o false

· tdbg_getCellValue(campoactual,nombrecampo) : retorna el valor del campo nombrecampo. campoactual es el campo donde está ubicado el usuario dentro del dbgrid.

· tdbg_setCellValue(campoactual, nombrecampo, valor) : Establece el valor del campo nombrecampo. campoactual es el campo donde está ubicado el usuario dentro del dbgrid.

· tuga_dbgrid_sub_validaForma(obj) : Ejecuta la validación de los campos del dbgrid, se utiliza antes de crear una nueva línea para comprobar la consistencia de los datos. Si se programa la función tuga_campo_user_function(textbox) es necesario finalizar con esta instrucción para la creación de una nueva línea.

· tuga_dbgrid_currentRow(obj) : Obtiene el numero de la línea actual dentro del dbgrid (la primer línea es la 0)

Ejemplo: Supongamos el siguiente dbgrid

var prueba = new tuga_dbgrid('midbgrid','Codigo:ENTERO:codigo:true;Fecha de Nacimiento:FECHA:fecha:true;Nombre:TEXTO:nombre:true');

prueba.render();

La función valida si se trata del dbgrid con nombre midbgrid y si se está ubicado en el campo nombre. Se mostrará por pantalla la fila actual, el valor del campo fecha y se reemplazará el valor del campo código por 33 y el de fecha por 01-01-2010. Luego se creará una nueva línea.

function tuga_campo_user_function(textbox){

var obj = textbox;

if(tdbg_esGrid(obj,'midbgrid') && tdbg_esObj(obj,'nombre')){

alert("Fila es " + tuga_dbgrid_currentRow(obj));

alert("El valor del campo fecha es : " + tdbg_getCellValue(obj,'fecha'));

tdbg_setCellValue(obj, 'codigo', 33);

tdbg_setCellValue(obj, 'fecha', '01-01-2010');

tuga_dbgrid_sub_validaForma(obj);

}