WordPress表格中增加編輯按鈕編輯每一行數(shù)據(jù)的方法

來自：素雅營銷研究院

方知筆記

2025年07月05日 02:13

在WordPress網(wǎng)站開發(fā)中，經(jīng)常需要在后臺或前端展示數(shù)據(jù)表格，并允許用戶直接編輯表格中的每一行數(shù)據(jù)。本文將介紹幾種在WordPress表格中增加編輯按鈕并實(shí)現(xiàn)行數(shù)據(jù)編輯功能的方法。

方法一：使用WP_List_Table類（后臺管理界面）

對于WordPress后臺管理界面，可以使用內(nèi)置的WP_List_Table類來創(chuàng)建可編輯的表格：

class Custom_List_Table extends WP_List_Table {
// 初始化表格
function __construct() {
parent::__construct([
'singular' => 'item',
'plural'   => 'items',
'ajax'     => false
]);
}

// 添加編輯按鈕列
function column_name($item) {
$actions = [
'edit' => sprintf('<a href="?page=%s&action=%s&item=%s">編輯</a>', $_REQUEST['page'], 'edit', $item['ID']),
];
return sprintf('%s %s', $item['name'], $this->row_actions($actions));
}

// 其他必要的方法...
}

方法二：使用DataTables插件（前端界面）

對于前端表格，可以使用jQuery DataTables插件配合AJAX實(shí)現(xiàn)行內(nèi)編輯：

首先引入必要的庫：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

創(chuàng)建表格并添加編輯按鈕：

$(document).ready(function() {
$('#myTable').DataTable({
"ajax": "/wp-json/myplugin/v1/data",
"columns": [
{ "data": "id" },
{ "data": "name" },
{
"data": null,
"defaultContent": "<button class='edit-btn'>編輯</button>",
"orderable": false
}
]
});

// 編輯按鈕點(diǎn)擊事件
$('#myTable').on('click', '.edit-btn', function() {
var data = $('#myTable').DataTable().row($(this).parents('tr')).data();
// 打開編輯模態(tài)框或行內(nèi)編輯
openEditModal(data);
});
});

方法三：使用Advanced Custom Fields（ACF）插件

如果使用ACF插件管理數(shù)據(jù)，可以結(jié)合ACF的前端表單功能：

創(chuàng)建ACF字段組
在前端使用短碼或模板標(biāo)簽顯示表格：

$rows = get_field('my_repeater_field');
if($rows) {
echo '<table>';
foreach($rows as $row) {
echo '<tr>';
echo '<td>'.$row['field_1'].'</td>';
echo '<td>'.$row['field_2'].'</td>';
echo '<td><a href="'.add_query_arg(['edit_row' => $row['ID']).'">編輯</a></td>';
echo '</tr>';
}
echo '</table>';
}