本教程详细介绍了如何使用php和ajax技术，优雅地处理表格中过长的文本内容。通过php的字符串截断功能在表格中展示精简数据，同时结合ajax实现模态框（modal）的无刷新编辑，确保用户在需要时能查看并修改完整内容，从而提升数据表格的可读性和用户体验。
引言：优化表格长文本显示的需求
在Web应用中，数据表格是展示信息的重要方式。然而，当表格中的某些字段（如“案例描述”、“备注”等）包含大量文本内容时，直接显示完整内容会导致表格行高不一、布局混乱，严重影响用户体验和数据可读性。为了解决这一问题，我们通常需要一种机制：在表格中仅显示文本的摘要或截断部分，同时提供一个入口（例如“编辑”按钮），允许用户通过模态框（Modal）查看和编辑完整的文本内容。本教程将结合PHP后端处理和前端Ajax技术，实现这一功能。
解决方案概述
核心思路是：
- 后端PHP处理： 在从数据库获取数据后，针对需要截断的文本字段，生成两份数据：一份是用于表格显示的截断文本，另一份是完整的原始文本。完整的原始文本将通过HTML的 data-* 属性存储在对应的表格单元格中。
- 前端HTML渲染： 表格 <td> 元素显示截断文本。
-
前端JavaScript (Ajax) 交互：
- 当用户点击“编辑”按钮时，通过jQuery/Ajax从 <td> 元素的 data-* 属性中读取完整的文本内容，并填充到模态框的 textarea 中。
- 用户在模态框中修改并保存后，通过Ajax将完整的新数据发送到PHP后端进行更新。
- 更新成功后，前端再次截断新数据以更新表格中的显示文本，并同步更新 <td> 元素的 data-* 属性。
后端PHP数据处理：实现文本截断与完整数据传递
PHP负责从数据库查询数据，并为前端准备好截断和完整的文本内容。
1. 数据库查询
首先，确保你的PHP代码能够正确连接数据库并查询到所需的所有字段，包括那些可能包含长文本的字段。原始代码中的 SELECT * FROM cases_reports 已经满足此要求。
立即学习“PHP免费学习笔记（深入）”；
<?php // ... 数据库连接代码 ... $selectquery = "SELECT * FROM cases_reports"; $table = mysqli_query($mysqli, $selectquery); // ... ?>
2. 表格显示层截断与完整数据存储
在PHP的 while 循环中，当渲染每个表格行 <tr> 时，我们需要对长文本字段进行处理。使用 mb_strimwidth() 函数进行多字节字符串截断，以适应UTF-8等字符编码。同时，为了让前端Ajax能够获取到完整的原始文本，我们将完整文本存储在 <td> 元素的 data-* 属性中。
以下是 edit-report.php 中相关 <td> 元素的修改示例。我们假设需要对 caseDesc, actionsTaken, caseDetails, caseNotes, caseRecommendation 进行截断。
<!-- Start PHP While -->
<?php
// ... 数据库连接和数据更新逻辑（保持不变） ...
$selectquery = "SELECT * FROM cases_reports";
$table = mysqli_query($mysqli, $selectquery);
while($res = mysqli_fetch_array($table)) {
// 定义截断长度和省略符
$truncateLength = 100; // 例如，截断到100个字符
$ellipsis = "...";
// 对长文本字段进行截断，并存储完整内容到data-*属性
$fullCaseDesc = htmlspecialchars($res['caseDesc']);
$truncatedCaseDesc = mb_strimwidth($res['caseDesc'], 0, $truncateLength, $ellipsis, 'UTF-8');
$fullActionsTaken = htmlspecialchars($res['actionsTaken']);
$truncatedActionsTaken = mb_strimwidth($res['actionsTaken'], 0, $truncateLength, $ellipsis, 'UTF-8');
$fullCaseDetails = htmlspecialchars($res['caseDetails']);
$truncatedCaseDetails = mb_strimwidth($res['caseDetails'], 0, $truncateLength, $ellipsis, 'UTF-8');
$fullCaseNotes = htmlspecialchars($res['caseNotes']);
$truncatedCaseNotes = mb_strimwidth($res['caseNotes'], 0, $truncateLength, $ellipsis, 'UTF-8');
$fullCaseRecommendation = htmlspecialchars($res['caseRecommendation']);
$truncatedCaseRecommendation = mb_strimwidth($res['caseRecommendation'], 0, $truncateLength, $ellipsis, 'UTF-8');
?>
<tr id="<?php echo $res['id']?>">
<td data-target="cccEmployee"><?php echo htmlspecialchars($res['cccEmployee']);?></td>
<td data-target="IR_number"><?php echo htmlspecialchars($res['irNumber']);?></td>
<td data-target="case_type"><?php echo htmlspecialchars($res['caseType']);?></td>
<td data-target="case_location"><?php echo htmlspecialchars($res['caseLocation']);?></td>
<td data-target="startDateTime"><?php echo htmlspecialchars($res['startDateTime']);?></td>
<td data-target="endDateTime"><?php echo htmlspecialchars($res['endDateTime']);?></td>
<!-- 截断显示，并用data-full-desc存储完整内容 -->
<td data-target="case_description" data-full-desc="<?php echo $fullCaseDesc; ?>"><?php echo $truncatedCaseDesc;?></td>
<td data-target="actions_taken" data-full-actions="<?php echo $fullActionsTaken; ?>"><?php echo $truncatedActionsTaken;?></td>
<td data-target="case_details" data-full-details="<?php echo $fullCaseDetails; ?>"><?php echo $truncatedCaseDetails;?></td>
<td data-target="case_notes" data-full-notes="<?php echo $fullCaseNotes; ?>"><?php echo $truncatedCaseNotes;?></td>
<td data-target="case_recommendation" data-full-recommendation="<?php echo $fullCaseRecommendation; ?>"><?php echo $truncatedCaseRecommendation;?></td>
<td class="table-actions">
<a href="#" data-role="update" data-id="<?php echo $res['id']; ?>">
<i class="fas fa-edit"></i>
</a>
</td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a> 
