PHP与Ajax：实现表格长文本截断显示与模态编辑教程-php教程-PHP中文网

PHP与Ajax：实现表格长文本截断显示与模态编辑教程

碧海醫心

发布： 2025-10-16 11:51:32

原创

532人浏览过

PHP与Ajax：实现表格长文本截断显示与模态编辑教程

本教程详细介绍了如何使用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 已经满足此要求。

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

立即学习“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>

登录后复制

以上就是PHP与Ajax：实现表格长文本截断显示与模态编辑教程的详细内容，更多请关注php中文网其它相关文章！