El desarrollo de interfaces de usuario web modernas a menudo requiere funcionalidades avanzadas para una mejor interacción del usuario. Entre estas, la capacidad de acceder a opciones específicas a través de menús contextuales (clic derecho) en componentes de visualización de datos es altamente valorada. Esto incluye menús para filas de datos y, crucialmente, menús para los encabezados de columna que permiten, por ejemplo, ajustar la visibilidad de las columnas. Este documento detalla cómo habilitar estas capacidades en los controles datagrid y treegrid de EasyUI.

Menús Contextuales para Filas y Encabezados de Columna

Los controles datagrid y treegrid de EasyUI proporcionan puntos de extensión para integrar menús contextuales personalizados. Al configurar las propiedades adecuadas, se puede ofrecer una experiencia de usuario rica, permitiendo acciones rápidas sobre los datos o la estructura de la tabla.

Para el componente datagrid, la propiedad onRowContextMenu es la clave para asociar una función que se ejecutará cuando el usuario haga clic derecho sobre una fila. Esta función puede entonces generar y mostrar un menú contextual relevante para la fila seleccionada.

De manera similar, para el componente treegrid, la propiedad onContextMenu cumple una función análoga, activándose con el clic derecho sobre un nodo del árbol o una fila.

Es común que las implementaciones de estos menús incluyan, además de opciones específicas de la fila o nodo, funcionalidades para gestionar la visualización de columnas directamente desde el encabezado de la tabla. Aunque EasyUI maneja los menús de encabezado de columna de forma nativa o a través de extensiones, la integración con los menús de fila mejora la coherencia de la UI.

A continuación, se presentan ejemplos de configuración de estos componentes en JavaScript.

Configuración de DataGrid con Menú Contextual

El siguiente fragmento de código JavaScript demuestra cómo inicializar un datagrid de EasyUI e integrar un menú contextual para las filas. Se asume la existencia de una función customContextMenuHandler.createGridMenu que se encarga de generar y mostrar el menú.

$(document).ready(function() {
    $('#productListingGrid').datagrid({
        url: '/api/products/list',
        toolbar: '#gridToolbar',
        title: 'Catálogo de Productos',
        iconCls: 'icon-catalog',
        width: $(window).width() * 0.95,
        height: $(window).height() * 0.7,
        nowrap: false,
        rownumbers: true,
        striped: true,
        idField: 'productId',
        singleSelect: true,
        sortName: 'creationDate',
        sortOrder: 'DESC',
        // Integración del menú contextual para las filas
        onRowContextMenu: function(e, rowIndex, rowData) {
            e.preventDefault(); // Previene el menú contextual del navegador
            // Asumiendo que customContextMenuHandler.createGridMenu es una función existente
            // que crea y muestra un menú contextual específico para el datagrid.
            customContextMenuHandler.createGridMenu(e, rowIndex, rowData);
        },
        onDblClickRow: function(rowIndex, rowData) {
            // Acción al doble clic, por ejemplo, editar el producto
            console.log('Edit product:', rowData.productName);
        },
        frozenColumns: [[
            { field: 'select', checkbox: true },
            { title: 'Código', field: 'productCode', width: 120 },
            { title: 'Denominación', field: 'productName', width: 280 }
        ]],
        columns: [[
            { title: 'ID Interno', field: 'internalId', width: 100, hidden: true },
            { title: 'Modelo', field: 'modelType', width: 150 },
            { title: 'Especificación', field: 'specs', width: 90 },
            { title: 'Categoría', field: 'category', width: 100 },
            { title: 'Unidad', field: 'unitOfMeasure', width: 70 },
            { title: 'Precio Base', field: 'basePrice', width: 80, align: 'right' },
            { title: 'Factor', field: 'factor', width: 60, align: 'right' },
            { title: 'PVP', field: 'retailPrice', width: 80, align: 'right' },
            { title: 'Mayorista', field: 'wholesalePrice', width: 80, align: 'right' },
            { title: 'Promoción', field: 'promoPrice', width: 80, align: 'right' },
            { title: 'Interno', field: 'internalCost', width: 80, align: 'right' },
            { title: 'Especial', field: 'specialPrice', width: 80, align: 'right' },
            {
                title: 'Activo', field: 'isActive', width: 60, align: 'center',
                formatter: function (val, row, idx) {
                    return '<img src="/assets/icons/' + (val ? 'check.png' : 'cancel.png') + '" alt="' + (val ? 'Activo' : 'Inactivo') + '"/>';
                }
            },
            { title: 'Observaciones', field: 'notes', width: 200 }
        ]],
        pagination: true,
        pageSize: 25,
        pageList: [10, 25, 50, 100],
        onLoadSuccess: function(data) {
            // Ajustes de estilo o post-procesamiento tras la carga de datos
            console.log('DataGrid loaded successfully.');
            // Ejemplo: Ajustar el tamaño de fuente en los encabezados
            $(this).datagrid('getPanel').find('div.datagrid-header tr').find('span, div').css({ "font-size": "13px" });
        }
    });
});

Configuración de TreeGrid con Menú Contextual

El siguiente ejemplo ilustra la configuración de un treegrid de EasyUI, incluyendo la activación de un menú contextual para sus nodos. En este caso, la función customContextMenuHandler.createTreeMenu se encarga de la lógica de creación y visualización del menú.

$(document).ready(function() {
    $('#organizationalTree').treegrid({
        toolbar: '#treeToolbar',
        width: $(window).width() * 0.9,
        height: $(window).height() * 0.75,
        nowrap: true,
        rownumbers: true,
        animate: true,
        resizable: true,
        collapsible: false,
        // Integración del menú contextual para los nodos del árbol
        onContextMenu: function(e, node) {
            e.preventDefault(); // Evita el menú contextual del navegador
            // Asumiendo que customContextMenuHandler.createTreeMenu es una función existente
            // que crea y muestra un menú contextual específico para el treegrid.
            customContextMenuHandler.createTreeMenu(e, node);
        },
        url: '/api/organization/treeData',
        idField: 'nodeId',
        treeField: 'nodeName',
        onDblClickRow: function(row) {
            // Acción al doble clic, por ejemplo, ver detalles del nodo
            console.log('View details for node:', row.nodeName);
        },
        frozenColumns: [[
            { title: 'Estructura', field: 'nodeName', width: 250 },
            { title: 'Identificador', field: 'nodeCode', width: 120 }
        ]],
        columns: [[
            { title: 'Nombre Corto', field: 'shortName', width: 150 },
            { title: 'Responsable', field: 'managerName', width: 90, align: 'center' },
            { title: 'Teléfono', field: 'contactPhone', width: 120, align: 'center' },
            { title: 'Fax', field: 'contactFax', width: 120, align: 'center' },
            {
                title: 'Habilitado', field: 'isEnabled', width: 70, align: 'center',
                formatter: function(val, row, idx) {
                    return val ? 'Sí' : 'No'; // Simplemente mostrar Sí/No en lugar de una imagen.
                }
            },
            { title: 'Orden', field: 'sortOrder', width: 90, align: 'center' },
            { title: 'Comentarios', field: 'description', width: 350 }
        ]]
    });
});