Insercin, edicin y eliminacin de registros en un Datagrid

Por Darky el 06 de Octubre de 2004 con 126,520 visitas.

Actionscript Masters Otros tutoriales por Darky.

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 dems 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):

// Aadimos 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;
//Tamao 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 tamaos 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"});
//Aadimos los campos al Datagrid
GridClientes.dataProvider = ArregloClientes;
stop();
4.- Source de las Funciones Botones (Layer Func. Btns):
//Aade 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;
// Aade 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) :
/* * * * ---- Aade 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