Arrastrar y soltar rejilla de datos a rejilla de datos
Este ejemplo muestra cómo crear un carrito de compras utilizando objetos desde 4D Ajax Framework. Esta página utiliza tres rejillas de datos: una para mostrar una lista de productos, una para nuestro icono de carrito de compras y una para mostrar la lista actual del carrito de compras. Los objetos pueden ser arrastrados desde la rejilla de datos de lista de productos y soltados en la rejilla de datos del icono del carrito de compras. Cuando esto ocurre, el contenido de la rejilla de datos del carrito de compras se actualizará de acuerdo a las pocas reglas que definimos.
Lista de productos
La lista de productos tendrá contenido de texto y una imagen. El objeto rejilla de datos no soporta imágenes nativamente, pero acepta el contenido html, que podemos utilizar para insertar imágenes.
Llenar datos
Se define una tabla con toda la información de los productos, incluyendo imágenes. Esta tabla se utiliza para cerrar el DCS para la rejilla de datos, con la excepción del campo imagen. Para añadir la imagen como contenido html, simplemnete creamos la llamada al url la cual obtiene la imagen de la tabla 4D y este url se añade al DCS. Este es la sintaxis del url
para obtener una imagen de una tabla 4D.
Sintaxis: /DAX/GetImage/x.y.z?sessionId=sID)
donde:
x = el número de la tabla
y = el número del campo
z = el número del registro
sID = identificador de la sesión (DAX_Dev_Session_SessionID devolverá este valor)
Ahora, para mostrar la rejilla como una celda que puede arrastrarse, se crea contenido html y los otros valores de rejilla de datos son incorporados en el contenido de html. Las otras celdas se ocultan, dejando sólo una celda para ser mostrada y arrastrada.
Sintaxis: var myContent = ' ... html ... + myGrid.getCellValue(row,column) + ... html ...';
myGrid.setCellValue (row, column, myContent);
Activar Opción arrastrable
Para activar la opción arrastrable en una rejilla de datos, el comando setDragCells debe ejecutarse en el objeto rejilla. Este comando también debe ejecutarse después la construcción del objeto rejilla (dragGrid.go();)
Sintaxis: dragGrid.setDragCells(row, column, isDroppable);
Icono de carrito de compras
Una rejilla de datos se utiliza para representar nuestro icono de carrito de compras porque puede definirse para permite soltar. El icono de carrito de compras es una rejilla de datos de 1x1 que no contiene datos y la imagen mostrada se controla vía CSS.
Activar Opción soltable
1) Para especificar cuáles celdas son áreas de soltar, llame la función 'setDropCells'. Esta función se utiliza para activar y desactivar las áreas de soltar. Por defecto, todas las celdas de una rejilla de datos son definidas como áreas de soltar.
Sintaxis: myGrid.setDropCells(row, column, isDroppable);
2) Para activar la opción soltable en una rejilla de datos, el evento 'ondragrelease' debe ser activado para el objeto rejilla, en este caso, la celda 1 en la rejilla de datos.
Sintaxis: myGrid.ondragrelease = YourFunction;
3) Para ofrecer un indicador visual de que una celda está siendo arrastrada, el evento 'ondragover' se activa para el objeto rejilla. Definimos la función javascript
para este evento que devuelve la hoja de estilos que queremos ver, la cual en este ejemplo es una imagen de un carrito de compras lleno.
Sintaxis: myGrid.ondragover = YourFunction;
//javascript
function onDragOverEvent(cellRef, event) {
return 'carthover_style';
}
//CSS
.dax_datagrid .carthover_style {
background-image: url('/dax/images/sc_full.jpg');
border:2px solid #FFFFFF;
}
Carrito de compras
Se utiliza una rejilla de datos para mostrar los contenidos del carrito de compras. Cada vez que un objeto de una rejilla de datos se suelta en la rejilla de datos del carrito de compras, la rejilla de datos del carrito de compras de actualiza. Para este ejemplo, eso significa que el elemento se inserta en el carro o si el elemento ya ha sido añadido al carrito, entonces se actualizan la cantidad y el precio. Igualmente, a medida que los elementos se añaden al carrito, se ordenan alfabéticamente por nombre de elemento.
Creación de la rejilla de datos
Para crear la rejilla de datos del carrito de compras utilizamos la función 'dax_dataGrid'. Utilizamos un DCS como la selección que contiene los campos que necesitamos y especificamos una línea de encabezado.
Sintaxis: myGrid = new dax_dataGrid(selection, location, headerRows, lockedLeftColumns, useControlColumn);
Configuración del pie de página de la rejilla de datos
Para crear las líneas de pie de página para nuestra rejilla de datos y llenarlas con la información que necesitamos, necesitamos ejecutar 3 comandos.
1) Crear la líneas de pie de página.
Sintaxis: displayGrid.setFooterRows(número de líneas de página);
2) Una por una, obtener la línea actual de cada número de línea de pie de página (la cual es diferente del número de fila de pie).
Sintaxis: myRowNumber = myGrid.getFooterRowNumber(footerRowNumber);
3) Llene las celdas de pie de página individuales con la información que queremos, utilizando la función 'setCellValue'.
Sintaxis: myGrid.setCellValue(myRowNumber, column, content);
Manejo de soltar
Después de que se suelta un objeto en la rejilla de datos del icono de compras, se llama la función de evento 'ondragrelease' que asignamos anteriormente y manejaremos lo que sucede en este momento. Llamamos nuestra función onDragReleaseEvent que contiene 3 funciones que utilizamos para llevar a cabo los pasos que queremos.
1) Nuestra primera llamada es para una función llamada getCurrentRow, la cual extrae la información que necesitamos del objeto soltado. Primero, necesitamos obtener la celda que se soltó utilizando la función 'dragObjectSource'. Luego utilizamos este número de línea de objeto para extraer los valores de sus celdas de rejilla correspondientes.
//obtener celda objeto soltada
Sintaxis: var originCell = dax_bridge.hoverDragging.dragObjectSource;
//guardar los contenidos del campo especificado
Sintaxis: field_value1 = myGrid.getCellValue(originCell.row, column);
2) En este punto tenemos los valores del objeto soltado y podemos proceder como queramos. De manera que la próxima llamada será a la función 'UpdateCart', la cual inserta o actualiza los contenidos de la rejilla de datos del carrito de compras. La función contiene lógica sobre dónde y cuándo insertar o actualizar una fila, pero por último sólo hacemos diferentes llamadas de la función 'setCellValue'.
Sintaxis: myGrid.setCellValue(row, col, content);
3) La última llamada es a una función llamada 'updateFooters', la cual actualiza los valores de las líneas de pie de página (Subtotal, Impuesto y Total). Para hacer esto utilizamos 'setCellValue' junto con la función 'getFooterRowNumber'.
Sintaxis: myGrid.setCellValue(myGrid.getFooterRowNumber(footerRowNumber), col, content);