Comunidad de diseño web y desarrollo en internet online

Inserción, edición y eliminación de registros en un Datagrid

Objetivo: Crear un catalogo de clientes en donde se pueda dar de alta, editar y eliminar. Usando el Datagrid para mostrar los datos y los demás componentes para editarlos y eliminarlos.

1.- Insertar los componentes para el manejo de datos.


Vista Previa de nuestra interfaz
2.- Crear las capas de codigo:

3.- Source de las Funciones Generales (Layer Func. Gral):

// Añadimos el tema de color azul a los componentes
GridClientes.setStyle("themeColor", "haloOrange");
TxtNom.setStyle("themeColor", "haloOrange");
TxtEdad.setStyle("themeColor", "haloOrange");
CmbSexo.setStyle("themeColor", "haloOrange");
BtnNuevo.setStyle("themeColor", "haloOrange");
BtnEditar.setStyle("themeColor", "haloOrange");
BtnEliminar.setStyle("themeColor", "haloOrange");
BtnGuardar.setStyle("themeColor", "haloOrange");
BtnCancelar.setStyle("themeColor", "haloOrange");
// Ponemos no disponibles los sigu. componentes
TxtNom.enabled = false;
TxtEdad.enabled = false;
CmbSexo.enabled = false;
BtnEditar.enabled = false;
BtnEliminar.enabled = false;
// no visibles los sigu. botones
BtnGuardar.visible = false;
BtnCancelar.visible = false;
//Propiedad de la casilla de texto edad para solo numeros
TxtEdad.restrict = "0-9";
TxtEdad.maxChars = 2;
// Creamos propiedades del Datagrid
GridClientes.editable = false;
//Editable o no
GridClientes.headerHeight = 20;
//Tamaño del encbzd
GridClientes.showHeaders = true;
//Mostrar encbzds
GridClientes.sortableColumns = false;
//Ordenar columnas
GridClientes.setStyle("color", "black");
//Color Letra
// Inserta las columnas..

GridClientes.addColumn("Nombre");
GridClientes.addColumn("Edad");
GridClientes.addColumn("Sexo");
// Asigna tamaños de ancho a las columnas..
GridClientes.getColumnAt(0).width = 280;
GridClientes.getColumnAt(1).width = 40;
GridClientes.getColumnAt(2).width = 50;
//Creamos arreglo en donde guardar los datos de los clientes
ArregloClientes = new Array({Nombre:"Tomas", Edad:"35", Sexo:"Masculino"}, {Nombre:"Kitty", Edad:"2", Sexo:"Femenino"});
//Añadimos los campos al Datagrid
GridClientes.dataProvider = ArregloClientes;
stop();
4.- Source de las Funciones Botones (Layer Func. Btns):
//Añade el evento de click a los botones y llama la funcion
BtnNuevo.addEventListener("click", ActivaCamposNew);
BtnEditar.addEventListener("click", ActivaCamposEdit);
BtnEliminar.addEventListener("click", BorraLinia);
BtnCancelar.addEventListener("click", DesactivaCampos);
BtnGuardar.addEventListener("click", AgregaDatos);
// Variable para detectar si el campo jue editado o no...
Editado = false;
// Añade nueva linea al datagrid
function AgregaDatos() {
if (Editado) {
LiniaGrid = GridClientes.selectedIndex;
ArregloClientes.editField(LiniaGrid, "Nombre", TxtNom.text);
ArregloClientes.editField(LiniaGrid, "Edad", TxtEdad.text);
ArregloClientes.editField(LiniaGrid, "Sexo", CmbSexo.value);
} else {
//Inserta los datos capturados al registro que alimenta al Grid..
ArregloClientes.addItem({Nombre:TxtNom.text, Edad:TxtEdad.text, Sexo:CmbSexo.value});
// GridClientes.addItem(ObjNew); Tambien asi se puede... solo se asignan los valores a la variable
}
DesactivaCampos();
}
function BorraLinia() {
//Obtiene el indice del Grid (Linea seleccionada)...
LiniaGrid = GridClientes.selectedIndex;
ArregloClientes.removeItemAt(LiniaGrid);
// Limpia los campos de captura...
TxtNom.text = "";
TxtEdad.text = "";
CmbSexo.selectedIndex = 0;
}
// Activa los campos de captura para insertar nuevo elemento
function ActivaCamposNew() {
Editado = false;
GridClientes.enabled = false;
TxtNom.enabled = true;
TxtEdad.enabled = true;
CmbSexo.enabled = true;
BtnGuardar.visible = true;
BtnCancelar.visible = true;
BtnNuevo.enabled = false;
BtnEditar.enabled = false;
BtnEliminar.enabled = false;
//Limpia los campos de captura
TxtNom.text = "";
TxtEdad.text = "";
CmbSexo.selectedIndex = 0;
}
// Activa los campos de captura para editar los datos..
function ActivaCamposEdit() {
Editado = true;
GridClientes.enabled = false;
TxtNom.enabled = true;
TxtEdad.enabled = true;
CmbSexo.enabled = true;
BtnGuardar.visible = true;
BtnCancelar.visible = true;
BtnNuevo.enabled = false;
BtnEditar.enabled = false;
BtnEliminar.enabled = false;
}
// Desactiva los campos de captura cuando se cancela la edicion o captura
function DesactivaCampos() {
GridClientes.enabled = true;
//Limpia los campos de captura
TxtNom.text = "";
TxtEdad.text = "";
CmbSexo.selectedIndex = 0;
//Desactiva los campos de captura
TxtNom.enabled = false;
TxtEdad.enabled = false;
CmbSexo.enabled = false;
BtnGuardar.visible = false;
BtnCancelar.visible = false;
//Regresa de nuevo activo del boton nuevo..
BtnNuevo.enabled = true;
}
5.- Source de las Funciones del Datagrid (Func Grid) :
/* * * * ----  Añade los eventos del Grid y llama la funcion   ----- * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

GridClientes.addEventListener("change", MeteDatos);
// Anexa datos del grid a los campos de captura para Editar
function MeteDatos(Obj) {
ActivaBtns();
//Obtiene los datos de la linea seleccionada
DatosGrid = Obj.target.selectedItem;
//Asigna valores de los campos de texto
TxtNom.text = DatosGrid.Nombre;
TxtEdad.text = DatosGrid.Edad;
if (DatosGrid.Sexo == "Masculino") {
//Nota: Para cambiar de indice a un combo debe estar activado (enabled=true)
CmbSexo.enabled = true;
CmbSexo.selectedIndex = 1;
CmbSexo.enabled = false;
} else {
CmbSexo.enabled = true;
CmbSexo.selectedIndex = 2;
CmbSexo.enabled = false;
}
}
//Activa los botones Editar y Eliminar
function ActivaBtns() {
BtnEditar.enabled = true;
BtnEliminar.enabled = true;
}

Un poco complicadito el source.. pero de ustedes depende escarbarle para ver que le pueden sacar de provecho.. y sobre todo mejorarlo y reducir el source. Cualquier duda, sugerencia… ahí tienen mi correo y el fla para destrozarlo… tamos en contacto…

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate