如何从按钮单击中展开Datagrid详细信息部分？

要在单击按钮时展开 DataGrid 的详细信息部分，您可以使用 JavaScript 和 HTML 来实现。以下是一个简单的示例，说明如何实现此功能：

首先，创建一个包含 DataGrid 的 HTML 页面。在这个例子中，我们将使用一个简单的表格作为 DataGrid：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DataGrid Example</title>
   <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
   <table id="dataGrid">
       <thead>
            <tr>
                <th>Name</th>
                <th>Details</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>Item 1</td>
                <td class="hidden">This is the details for Item 1.</td>
            </tr>
            <tr>
                <td>Item 2</td>
                <td class="hidden">This is the details for Item 2.</td>
            </tr>
        </tbody>
    </table>
   <button onclick="expandDetails()">Expand Details</button>
   <script>
        function expandDetails() {
            const rows = document.querySelectorAll("#dataGrid tbody tr");
            rows.forEach(row => {
                const details = row.querySelector("td.hidden");
                if (details) {
                    details.classList.remove("hidden");
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们使用了一个简单的表格作为 DataGrid，并将详细信息部分放在一个单独的单元格中。我们使用 CSS 类名 "hidden" 来隐藏这些单元格。