当前位置：首页 > PHP

php实现datagrid

2026-02-14 10:44:54PHP

PHP 实现 DataGrid

使用 PHP 实现 DataGrid 可以通过多种方式完成，包括使用原生 PHP 或结合前端库（如 jQuery、React 等）。以下是几种常见的方法：

原生 PHP 实现

通过原生 PHP 和 HTML 表格可以快速构建一个简单的 DataGrid。

php实现datagrid

<?php
// 假设从数据库获取数据
$data = [
    ['id' => 1, 'name' => 'John', 'email' => 'john@example.com'],
    ['id' => 2, 'name' => 'Jane', 'email' => 'jane@example.com'],
    ['id' => 3, 'name' => 'Doe', 'email' => 'doe@example.com']
];
?>

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($data as $row): ?>
            <tr>
                <td><?php echo $row['id']; ?></td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['email']; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

使用 jQuery DataTables

结合 jQuery DataTables 可以实现功能更丰富的 DataGrid，包括排序、分页和搜索功能。

<?php
$data = [
    ['id' => 1, 'name' => 'John', 'email' => 'john@example.com'],
    ['id' => 2, 'name' => 'Jane', 'email' => 'jane@example.com'],
    ['id' => 3, 'name' => 'Doe', 'email' => 'doe@example.com']
];
?>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

<table id="dataGrid">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($data as $row): ?>
            <tr>
                <td><?php echo $row['id']; ?></td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['email']; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#dataGrid').DataTable();
});
</script>

使用 PHP 框架（如 Laravel）

在 Laravel 中，可以使用 Blade 模板和 Eloquent 快速实现 DataGrid。

php实现datagrid

// 在控制器中获取数据
public function index()
{
    $users = User::all();
    return view('users.index', ['users' => $users]);
}

在 Blade 模板中：

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
            </tr>
        @endforeach
    </tbody>
</table>

使用第三方库（如 AG Grid）

AG Grid 是一个功能强大的 DataGrid 库，支持服务器端分页和过滤。

<?php
$data = [
    ['id' => 1, 'name' => 'John', 'email' => 'john@example.com'],
    ['id' => 2, 'name' => 'Jane', 'email' => 'jane@example.com'],
    ['id' => 3, 'name' => 'Doe', 'email' => 'doe@example.com']
];
?>

<div id="myGrid" style="height: 500px; width:100%;" class="ag-theme-alpine"></div>

<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>

<script>
    const gridOptions = {
        columnDefs: [
            { field: 'id' },
            { field: 'name' },
            { field: 'email' }
        ],
        rowData: <?php echo json_encode($data); ?>
    };

    document.addEventListener('DOMContentLoaded', () => {
        const gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);
    });
</script>