如何从oracle apex中的视图创建html报告？

Question

我的视图包含一些数据，如下表所示。

a	B 栏	col c	D 上校	col e
999	111	1	abc	3030
	444	10

我想用 html 创建的报告如下。

文字	999
文字	444
文字	10
文字	abc
文字	3030

Answer 1

这将比您正在寻找的内容更加扩展，但就在这里。

function hideShowColumnButtonAndSelect() {
    console.log('hideShowColumnButtonAndSelect');
    var showColumnButton = document.querySelector('.show-column-btn');
    var select = document.getElementById('column-select');

    if (!areColumnsHidden()) {
        showColumnButton.style.display = 'none';
        select.style.display = 'none';
    }
    // Read hidden columns from local storage
    var hiddenColumns = apex.item('P4_HIDDEN_COLUMNS').getValue();

    // Loop through header cells and hide columns based on hiddenColumns
    var headerCells = document.querySelectorAll('thead tr:first-child th');
    headerCells.forEach(function (headerCell, index) {
        if (hiddenColumns && hiddenColumns.includes(String(index + 1))) {
            headerCell.style.display = 'none';
        }
    });
} 
  
// Function to hide or show the "Show Column" button and select list based on column visibility
function updateShowColumnButtonAndSelectVisibility() {
    console.log('updateShowColumnButtonAndSelectVisibility');
    var showColumnButton = document.querySelector('.show-column-btn');
    var select = document.getElementById('column-select');

    if (areColumnsHidden()) {
        showColumnButton.style.display = 'inline'; // Show the button when columns are hidden
        select.style.display = 'inline'; // Show the select list when columns are hidden
    } else {
        showColumnButton.style.display = 'none'; // Hide the button when no columns are hidden
        select.style.display = 'none'; // Hide the select list when no columns are hidden
    }
}
 
 
  
function showColumn() {
    console.log('ShowColumn function');
    // Get the selected column from the column-select dropdown
    var selectedColumn = document.getElementById("column-select").value;
    console.log('Selected column value ' + selectedColumn );

    // Show the selected column
    var headers = document.querySelectorAll(".header-label[data-value='" + selectedColumn + "']");
    headers.forEach(function (header) {
        header.style.display = "inline";
    });

    // Update the hidden columns page item
    var hiddenColumnsItem = $v('P4_HIDDEN_COLUMNS');
    var hiddenColumnsArray = hiddenColumnsItem.replace(/^;+|;+$/g, '').split(';');

    // Remove the shown column index from the hidden columns
    var columnIndex = parseInt(selectedColumn.replace('HEADER', '')); // Assuming selectedColumn is like 'HEADER4'
    var index = hiddenColumnsArray.indexOf(String(columnIndex));
    if (index !== -1) {
        hiddenColumnsArray.splice(index, 1);
    }

    // Update the page item and session state
    var newValue = hiddenColumnsArray.join(';');
    apex.item('P4_HIDDEN_COLUMNS').setValue(newValue);
    apex.server.process('SET_SESSION_STATE_HIDDEN_COLS', 
        { 
            x01: newValue,
        },
        {
        dataType: 'json',
        success: function(pData) {
            apex.message.showPageSuccess('Column hidden');
            apex.item('P4_HIDDEN_COLUMNS').setValue(pData.hiddenCol); 
            refreshTableDisplay();
            populateShowColSel();
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error('Error updating session state:', error);
        }
    });

    // Update UI as needed
    // populateShowColSel();
    updateShowColumnButtonAndSelectVisibility();
}

   
// Function to check if any columns are hidden
function areColumnsHidden() {
    var table = document.getElementById('report-container').getElementsByTagName('table')[0];
    var headerCells = table.querySelectorAll('thead tr:first-child th');

    for (var i = 1; i < headerCells.length; i++) { // Start from 1 to skip the first cell
        var headerCell = headerCells[i];
        if (headerCell.style.display === 'none') {
            return true; // At least one column is hidden
        }
    }

    return false; // No columns are hidden
}
 
function populateShowColSel() {
    // Get the table element
    var table = document.getElementById('report-container').getElementsByTagName('table')[0];

    // Get all the header cells in the first row of the table (thead)
    var headerCells = table.querySelectorAll('thead tr:first-child th');

    // Get the select element
    var select = document.getElementById('column-select');

    // Clear existing options
    select.innerHTML = '';

    // Create and add the 'Show All' option as the first option
    var showAllOption = document.createElement("option");
    showAllOption.textContent = "--Show All--";
    showAllOption.value = "all"; // Or any value that signifies 'Show All' in your logic
    select.appendChild(showAllOption);

    // // Add an event listener to the select dropdown
    // select.addEventListener('change', showColumn);

    // Loop through the header cells and add options for hidden columns
    for (var i = 1; i < headerCells.length; i++) { // Start from 1 to skip the first cell
        var headerCell = headerCells[i];
        var span = headerCell.querySelector('.header-label'); // Get the span with class 'header-label'

        // Check if the header cell is hidden
        if (headerCell.style.display === 'none' && span) {
            var dataValue = span.getAttribute("data-value");
            var option = document.createElement("option");
            option.textContent = span.textContent.trim(); // Get text from the <span>
            option.value = dataValue; // Set the value attribute to match what's in the report
            option.setAttribute("data-value", dataValue); // Set the data value attribute
            select.appendChild(option);
        }
    }
}

function closeColumn(columnIndex) {
    var table = document.getElementById('report-container').getElementsByTagName('table')[0];
    var hiddenColumnsItem = $v('P4_HIDDEN_COLUMNS'); // Get the current value of the page item

    // Loop through each row of the table.
    for (var i = 0; i < table.rows.length; i++) {
        // Hide the cell at columnIndex in the current row.
        if (table.rows[i].cells[columnIndex - 1]) { // Check if the cell exists
            table.rows[i].cells[columnIndex - 1].style.display = 'none';
        }
    }

    // Remove any leading or trailing semicolons and split the current value into an array
    var hiddenColumnsArray = hiddenColumnsItem.replace(/^;+|;+$/g, '').split(';');

    // Append the columnIndex to the hiddenColumnsArray, but only if it's not already present in the array (to avoid duplicates)
    if (hiddenColumnsArray.indexOf(String(columnIndex)) === -1) {
        hiddenColumnsArray.push(String(columnIndex));
    }

    // Join the array back into a string with semicolons and set the page item's value
    var newValue = hiddenColumnsArray.join(';');
  
    apex.server.process('SET_SESSION_STATE_HIDDEN_COLS', 
        { 
            x01: newValue,
        },
        {
        dataType: 'json',
        success: function(pData) {
            apex.message.showPageSuccess('Column hidden');
            apex.item('P4_HIDDEN_COLUMNS').setValue(pData.hiddenCol); 
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error('Error fetching data:', error);
        }
    });
 
    populateShowColSel();
    updateShowColumnButtonAndSelectVisibility(); // Call the visibility update function
} 

  
 
function showAllColumns() {
    var table = document.getElementById('report-container').getElementsByTagName('table')[0];
    for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++) {
            table.rows[i].cells[j].style.display = ''; // Resets the display style
        }
    }

    populateShowColSel();
    updateShowColumnButtonAndSelectVisibility();
} // end showAllColumns
 
  
function populateSelect() {
    var select = document.getElementById('filter-select');

    // Clear existing options
    select.innerHTML = '';

    // Create and add the 'Show All' option as the first option
    var showAllOption = document.createElement("option");
    showAllOption.textContent = "--Show All--";
    showAllOption.value = "all"; // Or any value that signifies 'Show All' in your logic
    select.appendChild(showAllOption);

    // Call the APEX process
    apex.server.process('POPULATE_SEL_LIST', {}, {
        dataType: 'json',
        success: function(data) {
            // Loop through the data array and add each item as an option
            data.data.forEach(function(item) {
                var el = document.createElement("option");
                el.textContent = item.ename;
                el.value = item.ename;
                select.appendChild(el);
            });
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error('Error fetching data:', error);
        }
    });

    // Add an event listener to the filter-select dropdown
    select.addEventListener('change', filterRows);

    // Initialize the filter by calling filterRows initially
    filterRows();
}
// Call the function to populate the select
populateSelect();

function populateTable() {
    var dynamicTbody = document.getElementById('dynamic-rows');
  
    apex.server.process('GET_TABLE_DATA', {}, {
        dataType: 'json',
        success: function(data) {
            data.forEach(function(rowData) {
                var row = dynamicTbody.insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);

                cell1.innerHTML = rowData.column1;
                cell2.innerHTML = rowData.column2;
                cell3.innerHTML = rowData.column3;
                // Add additional cells as needed based on rowData
            });
            refreshTableDisplay(); // Refresh display after rows are added
        },
        error: function(xhr, status, error) {
            console.error('Error fetching data:', error);
        }
    });
}

// Call the function to populate the table
populateTable();

function filterRows() {
    // Get the selected filter option
    var selectedOption = document.getElementById("filter-select").value;

    // Get all the rows in the dynamically queried section
    var dynamicRows = document.querySelectorAll("#dynamic-rows tr");

    // Loop through each row and hide/show based on the selected option
    dynamicRows.forEach(function (row) {
        // Get the cell content by column index (e.g., index 0 for the first column)
        var cellContent = row.cells[0].textContent;

        // Check if the selected option is "All" or the cell content matches the selected filter option
        if (selectedOption === "all" || cellContent === selectedOption) {
            row.style.display = "table-row"; // Show the row
        } else {
            row.style.display = "none"; // Hide the row
        }
    });
}
 
// Add event listener to the filter-select dropdown
document.getElementById("filter-select").addEventListener("change", filterRows);

function refreshTableDisplay() {
    var table = document.getElementById('reportTable');
    var hiddenColumnsItem = apex.item('P4_HIDDEN_COLUMNS').getValue();
    var hiddenColumnsArray = hiddenColumnsItem ? hiddenColumnsItem.split(';') : [];

    var headers = table.querySelectorAll('thead tr th');

    headers.forEach((header, index) => {
        var isHidden = hiddenColumnsArray.includes(String(index + 1));
        header.style.display = isHidden ? 'none' : '';
        // Update corresponding column cells
        var rows = table.querySelectorAll('tbody tr');
        rows.forEach(row => {
            if (row.cells[index]) {
                row.cells[index].style.display = isHidden ? 'none' : '';
            }
        });
    });
}
 
// Call the function to hide elements on page load 
window.addEventListener('load', function () {
    hideShowColumnButtonAndSelect();
    updateShowColumnButtonAndSelectVisibility();
    populateShowColSel();
    refreshTableDisplay(); // Call this to update the visibility on page load
});

document.addEventListener('DOMContentLoaded', function() {
    // Attach the event listener to the Show Column button
    var showColumnButton = document.querySelector('.show-column-btn');
    if (showColumnButton) {
        showColumnButton.addEventListener('click', showColumn);
    }
});

<div class="show-all-btn-container"> 
    <div class="column-control">
        <p>This select list is dynamically set using JavaScript which makes an AJAX call and returns employee names from the employee table.</p>
        <select id="column-select"> 
            <!-- Dynamically set options using JavaScript -->
        </select>  
        <button type="button" class="show-column-btn" onclick="showColumn()">Show Column</button> 
        <button type="button" class="show-all-btn" onclick="showAllColumns()">Show All</button>
    </div> 
</div>
<div id="report-container">
    <table id="reportTable">
        <!-- Headers -->
        <thead> 
            <tr>
                <th id="filter-column-r1-c1">
                    <div class="header-title">Filter Column</div>
                    <div class="header-description">Lorem ipsum dolor sit amet</div>
                    <select id="filter-select">
                        <!-- Dynamically set options using JavaScript -->
                    </select> 
                </th>
                <th>
                    <span class="header-label" data-value="HEADER2">Header 2</span>
                    <div class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
                    <span class="close-btn" onclick="closeColumn(2)">X</span>
                </th>
                <th>
                    <span class="header-label" data-value="HEADER3">Header 3</span> 
                    <div class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
                    <span class="close-btn" onclick="closeColumn(3)">X</span>
                </th>
                <th>
                    <span class="header-label" data-value="HEADER4">Header 4</span> 
                    <div class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
                    <span class="close-btn" onclick="closeColumn(4)">X</span>
                </th> 
                <th>
                    <span class="header-label" data-value="HEADER5">Header 5</span> 
                    <div class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
                    <span class="close-btn" onclick="closeColumn(5)">X</span>
                </th> 
                <th>
                    <span class="header-label" data-value="HEADER6">Header 6</span> 
                    <div class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
                    <span class="close-btn" onclick="closeColumn(6)">X</span>
                </th> 
            </tr>
        </thead>
        <tbody id="dynamic-rows">
            <!-- Dynamic rows will be inserted here -->
        </tbody>
        <!-- report -->
        <tbody id="static-rows"> 
            <!-- New last row with dropdowns, link, and buttons -->
            <tr>
                <td colspan="1">
                    <select id="static-row-filter">
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                    </select>
                    <br>
                    <select id="static-row-filter">
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                    </select>
                    <br>
                    <a href="http://example.com" target="_blank" class="open-new-tab">
                        Open in new tab
                    </a>
                </td>
                <td>
                    <canvas id="chart1" width="200" height="200"></canvas>
                    <button type="button" class="centered-button">Title 1</button>
                </td>
                <td><button type="button" class="centered-button">Title 1</button></td>
                <td><button type="button" class="centered-button">Title 1</button></td>
                <td><button type="button" class="centered-button">Title 1</button></td>
                <td><button type="button" class="centered-button">Title 1</button></td>
            </tr>
        </tbody>
    </table>
</div>

AJAX 调用

-- NAME POPULATE_SEL_LIST
DECLARE
  v_result apex_application_global.vc_arr2;
BEGIN
  SELECT ENAME BULK COLLECT INTO v_result FROM EMP;

  apex_json.open_object;     -- Opening a JSON object
  apex_json.open_array('data'); -- Opening an array named 'data'

  FOR i IN 1 .. v_result.COUNT LOOP
    apex_json.open_object;
    apex_json.write('ename', v_result(i));
    apex_json.close_object;
  END LOOP;

  apex_json.close_array;
  apex_json.close_object;    -- Closing the JSON object
END;
-- NAME GET_TABLE_DATA
BEGIN
    apex_json.open_array; -- Open the JSON array

    FOR r IN (SELECT ename as column1,
                    job as column2,
                    hiredate column3
                FROM emp) 
    LOOP
        apex_json.open_object; -- Open a JSON object for each row

        apex_json.write('column1', r.column1); -- Write column1 value
        apex_json.write('column2', r.column2); -- Write column2 value
        apex_json.write('column3', r.column3); -- Write column3 value

        apex_json.close_object; -- Close the JSON object for the row
    END LOOP;

    apex_json.close_array; -- Close the JSON array
END;
-- SET_SESSION_STATE_HIDDEN_COLS
declare
    l_hidden_col varchar2(32000) := wwv_flow.g_x01;
begin
    apex_debug.info('L_hidden_col ' || l_hidden_col);
    APEX_UTIL.SET_SESSION_STATE('P4_HIDDEN_COLUMNS',l_hidden_col);

    apex_json.open_object; -- Open a JSON object for each row 
    apex_json.write('hiddenCol', l_hidden_col);   
    apex_json.close_object; -- Close the JSON object for the row
end;

将 HTML 放在静态区域中，源是 HTML 代码，JavaScript 可以放在函数和全局变量声明中。如果这有帮助请评论:)