能否使用JavaScript函数调用HTML网格实现单页CRM演示的动态布局切换？

Absolutely doable! This is a super common pattern for single-page interfaces—no need for separate pages at all. Let me walk you through a concrete, working example that matches your requirements step by step.

1. 核心思路 #

We'll build a single HTML page with three key parts:

• A dropdown menu + "Go" button for user input
• An empty container where we'll inject the selected grid dynamically
• JavaScript to listen for button clicks, read the dropdown value, and render the matching grid

2. 完整可运行代码示例 #

Here's a ready-to-use implementation you can copy-paste and tweak for your CRM demo:

<!DOCTYPE html>
<html>
<head>
    <title>CRM Demo Single Page</title>
    <style>
        /* Base grid styling for 4 columns × 2 rows */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
            grid-template-rows: repeat(2, 120px); /* 2 fixed-height rows */
            gap: 12px; /* Space between grid items */
            margin-top: 20px;
            padding: 10px;
        }

        .grid-item {
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            border-radius: 4px;
            padding: 8px;
        }

        /* Customize each grid's visual style (optional) */
        .grid-1 .grid-item { background-color: #e3f2fd; }
        .grid-2 .grid-item { background-color: #fff3e0; }
        .grid-3 .grid-item { background-color: #e8f5e9; }
        .grid-4 .grid-item { background-color: #fce4ec; }

        /* Style the input area */
        .input-area {
            padding: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;
        }

        select, button {
            padding: 8px 12px;
            font-size: 16px;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="input-area">
        <select id="gridSelector">
            <option value="">Select a grid (1-4)</option>
            <option value="1">Grid 1</option>
            <option value="2">Grid 2</option>
            <option value="3">Grid 3</option>
            <option value="4">Grid 4</option>
        </select>
        <button onclick="showSelectedGrid()">Go</button>
    </div>

    <!-- Container where grids will be rendered -->
    <div id="gridDisplayArea"></div>

    <script>
        // Main function to render the selected grid
        function showSelectedGrid() {
            const selector = document.getElementById('gridSelector');
            const selectedValue = selector.value;
            const displayArea = document.getElementById('gridDisplayArea');

            // Clear any existing grid content first
            displayArea.innerHTML = '';

            // Handle empty selection
            if (!selectedValue) {
                displayArea.innerHTML = '<p>Please pick a grid option first!</p>';
                return;
            }

            // Generate grid HTML (4×2 = 8 items total)
            let gridHTML = `<div class="grid-container grid-${selectedValue}">`;
            
            for (let i = 1; i <= 8; i++) {
                // Replace the text inside with your CRM-specific content later
                gridHTML += `<div class="grid-item">Grid ${selectedValue} - Item ${i}</div>`;
            }

            gridHTML += '</div>';

            // Inject the finished grid into the page
            displayArea.innerHTML = gridHTML;
        }

        // Optional: Allow pressing Enter to trigger the button
        document.getElementById('gridSelector').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                showSelectedGrid();
            }
        });
    </script>
</body>
</html>

3. 关键部分说明 #

HTML Structure #

• The input-area holds your dropdown and button—we added an id to the dropdown so JavaScript can easily access its value.
• The gridDisplayArea starts empty; this is where we'll inject the grid content dynamically when the user clicks "Go".

CSS Grid Setup #

• grid-template-columns: repeat(4, 1fr) creates 4 equal-width columns (adjust 1fr to fixed values like 200px if needed).
• grid-template-rows: repeat(2, 120px) sets two rows of 120px height—tweak this to match your CRM's layout needs.
• Custom background colors for each grid make them visually distinct; you can replace this with your own branding or content.

JavaScript Logic #

• showSelectedGrid() is the core function:
  1. Reads the selected value from the dropdown.
  2. Clears old grid content to avoid stacking multiple grids.
  3. Generates the full grid HTML with a loop (no need to write 8 items manually!).
  4. Injects the generated HTML into the display area.
• We added an optional Enter key listener to make the UI more intuitive for users.

4. 扩展建议 #

• If your grids have unique content (not just numbered items), store each grid's HTML in an object for cleaner code:

  const customGrids = {
    1: '<div class="grid-container grid-1"><div class="grid-item">CRM Dashboard</div>...other items...</div>',
    2: '<div class="grid-container grid-2"><div class="grid-item">Contact List</div>...other items...</div>',
    // Add grids 3 and 4 here
  };
  

• Add form validation (e.g., disable the "Go" button until an option is selected).
• For more complex CRM features later, you could fetch data from an API before rendering the grid.

This approach is lightweight, easy to maintain, and perfect for your demo. Give it a spin—you'll see it works exactly as you described!

内容的提问来源于stack exchange，提问作者Nyxerian