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

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

本教程旨在解决表格中长文本（如案例描述）的显示问题，通过php的`mb_strimwidth`函数在服务器端对文本进行截断处理，优化表格的可读性。同时，结合ajax技术，在用户点击编辑按钮时，通过模态框加载并显示完整的原始文本，实现无缝的编辑体验，确保数据完整性与用户界面的平衡。

表格长文本截断显示与模态编辑实践

在Web应用开发中，尤其是在数据密集型的管理界面，表格中常常需要展示包含大量字符的文本内容，如商品描述、案例详情或用户评论等。直接将这些长文本完整地显示在表格单元格（<td>）中，会导致表格布局混乱、行高不一，严重影响用户体验和界面的可读性。本教程将详细介绍如何利用PHP在服务器端对长文本进行截断处理以优化表格显示，并通过Ajax技术在编辑模态框中加载并显示原始完整文本，确保数据编辑的便捷性。

1. 优化表格显示：PHP文本截断

为了在表格中优雅地展示长文本，我们可以在数据从数据库取出并渲染到HTML之前，使用PHP对文本进行截断。PHP提供了mb_strimwidth函数，它能够安全地处理多字节字符（如中文、日文等），并按照指定宽度截取字符串，同时在末尾添加省略号或其他标识。

mb_strimwidth函数详解

string mb_strimwidth ( string $str , int $start , int $width [, string $trimmarker = '' [, string $encoding = mb_internal_encoding() ]] )

登录后复制

$str: 待截断的字符串。
$start: 截断开始位置（通常为0）。
$width: 截断后的字符串宽度。此宽度是字符数，而非字节数，对于多字节字符非常友好。
$trimmarker: (可选) 截断后添加到字符串末尾的标记，如"..."。
$encoding: (可选) 字符串的字符编码，默认为内部编码。

在PHP代码中应用截断

假设我们有一个caseDesc字段，其中包含可能很长的案例描述。在生成表格行时，我们可以在<td>中显示截断后的文本，并将完整的文本存储在一个data-*属性中，以便后续Ajax读取。

<?php
// ... 数据库连接及查询代码 ...

while($res = mysqli_fetch_array($table)) {
?>
<tr id="<?php echo $res['id']?>">
    <!-- 其他字段 -->
    <td data-target="case_description" data-full-description="<?php echo htmlspecialchars($res['caseDesc'], ENT_QUOTES, 'UTF-8'); ?>">
        <?php
        // 设定最大显示宽度，例如100个字符
        $display_width = 100;
        $truncated_desc = mb_strimwidth($res['caseDesc'], 0, $display_width, "...", 'UTF-8');
        echo htmlspecialchars($truncated_desc, ENT_QUOTES, 'UTF-8');
        ?>
    </td>
    <!-- 其他字段 -->
    <td data-target="actions_taken" data-full-actions="<?php echo htmlspecialchars($res['actionsTaken'], ENT_QUOTES, 'UTF-8'); ?>">
        <?php
        $display_width = 100;
        $truncated_actions = mb_strimwidth($res['actionsTaken'], 0, $display_width, "...", 'UTF-8');
        echo htmlspecialchars($truncated_actions, ENT_QUOTES, 'UTF-8');
        ?>
    </td>
    <!-- 对其他长文本字段（如case_details, case_notes, case_recommendation）也进行类似处理 -->
    <td data-target="case_details" data-full-details="<?php echo htmlspecialchars($res['caseDetails'], ENT_QUOTES, 'UTF-8'); ?>">
        <?php
        $display_width = 100;
        $truncated_details = mb_strimwidth($res['caseDetails'], 0, $display_width, "...", 'UTF-8');
        echo htmlspecialchars($truncated_details, ENT_QUOTES, 'UTF-8');
        ?>
    </td>
    <td data-target="case_notes" data-full-notes="<?php echo htmlspecialchars($res['caseNotes'], ENT_QUOTES, 'UTF-8'); ?>">
        <?php
        $display_width = 100;
        $truncated_notes = mb_strimwidth($res['caseNotes'], 0, $display_width, "...", 'UTF-8');
        echo htmlspecialchars($truncated_notes, ENT_QUOTES, 'UTF-8');
        ?>
    </td>
    <td data-target="case_recommendation" data-full-recommendation="<?php echo htmlspecialchars($res['caseRecommendation'], ENT_QUOTES, 'UTF-8'); ?>">
        <?php
        $display_width = 100;
        $truncated_recommendation = mb_strimwidth($res['caseRecommendation'], 0, $display_width, "...", 'UTF-8');
        echo htmlspecialchars($truncated_recommendation, ENT_QUOTES, 'UTF-8');
        ?>
    </td>
    <!-- 编辑按钮及其他操作 -->
    <td class="table-actions">
        <a href="#" data-role="update" data-id="<?php echo $res['id']; ?>">
            <i class="fas fa-edit"></i>
        </a>
    </td>
</tr>
<?php } ?>

登录后复制

注意事项：

立即学习“PHP免费学习笔记（深入）”；

htmlspecialchars函数用于防止XSS攻击，确保输出到HTML的内容是安全的。ENT_QUOTES参数可以同时转换单引号和双引号。
data-full-description等data-*属性是HTML5的自定义数据属性，用于在HTML元素上存储额外数据，而不会影响布局或样式。

2. Ajax模态框加载完整数据

当用户点击编辑按钮时，模态框需要显示该条记录的完整数据，而不是表格中截断后的文本。由于我们在<td>元素中通过data-full-description等属性存储了完整文本，JavaScript可以通过这些属性轻松获取。

修改Ajax代码以获取完整文本

在$(document).on('click', 'a[data-role=update]', function(){...})事件处理函数中，我们需要将获取文本内容的方式从.text()改为.data('attribute-name')。

AI图像编辑器

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

查看详情

$(document).ready(function() {
    $(document).on('click', 'a[data-role=update]', function(){
        var id = $(this).data('id');
        // ... 获取其他字段 ...

        // 获取完整的案例描述文本
        var caseDesc = $("#"+id).children('td[data-target=case_description]').data('full-description');
        // 获取完整的Actions Taken文本
        var actionsTaken = $("#"+id).children('td[data-target=actions_taken]').data('full-actions');
        // 获取完整的Details文本
        var caseDetails = $("#"+id).children('td[data-target=case_details]').data('full-details');
        // 获取完整的Notes文本
        var caseNotes = $("#"+id).children('td[data-target=case_notes]').data('full-notes');
        // 获取完整的Recommendations文本
        var caseRecommendation = $("#"+id).children('td[data-target=case_recommendation]').data('full-recommendation');

        // ... 将其他字段的值赋给模态框中的输入框 ...

        // 将完整文本赋值给模态框中的textarea
        $('#case_description').val(caseDesc);
        $('#actions_taken').val(actionsTaken);
        $('#case_details').val(caseDetails);
        $('#case_notes').val(caseNotes);
        $('#case_recommendation').val(caseRecommendation);
        $('#caseId').val(id);

        $('#reportsModal').modal('toggle');
    });

    // ... 保存更改的Ajax逻辑保持不变 ...
    $('#save_report_changes').click(function() {
        var id = $('#caseId').val();
        // ... 获取模态框中所有字段的值 ...
        var cccEmployee = $('#cccEmployee').val();
        // ... 其他字段 ...
        var caseDesc = $('#case_description').val(); // 这里获取的是模态框中完整的文本
        var actionsTaken = $('#actions_taken').val();
        var caseDetails = $('#case_details').val();
        var caseNotes = $('#case_notes').val();
        var caseRecommendation = $('#case_recommendation').val();

        $.ajax({
            url: '/edit-report',
            method: 'post',
            data: {
                id: id,
                cccEmployee: cccEmployee,
                // ... 其他字段 ...
                caseDesc: caseDesc, // 提交完整的文本到服务器
                actionsTaken: actionsTaken,
                caseDetails: caseDetails,
                caseNotes: caseNotes,
                caseRecommendation: caseRecommendation
            },
            success: function(response) {
                // 更新表格显示时，需要再次截断文本
                $("#"+id).children('td[data-target=cccEmployee]').text(cccEmployee);
                // ... 更新其他字段 ...

                // 更新截断后的文本到表格中
                // 注意：这里需要重新在客户端进行截断，或者让服务器返回截断后的文本
                // 推荐在服务器端处理后返回，或者在客户端使用JS进行截断
                var display_width = 100; // 与PHP中保持一致
                var truncated_caseDesc = caseDesc.length > display_width ? caseDesc.substring(0, display_width) + "..." : caseDesc;
                var truncated_actionsTaken = actionsTaken.length > display_width ? actionsTaken.substring(0, display_width) + "..." : actionsTaken;
                var truncated_caseDetails = caseDetails.length > display_width ? caseDetails.substring(0, display_width) + "..." : caseDetails;
                var truncated_caseNotes = caseNotes.length > display_width ? caseNotes.substring(0, display_width) + "..." : caseNotes;
                var truncated_caseRecommendation = caseRecommendation.length > display_width ? caseRecommendation.substring(0, display_width) + "..." : caseRecommendation;

                $("#"+id).children('td[data-target=case_description]').text(truncated_caseDesc);
                $("#"+id).children('td[data-target=case_description]').data('full-description', caseDesc); // 更新data属性中的完整文本

                $("#"+id).children('td[data-target=actions_taken]').text(truncated_actionsTaken);
                $("#"+id).children('td[data-target=actions_taken]').data('full-actions', actionsTaken);

                $("#"+id).children('td[data-target=case_details]').text(truncated_caseDetails);
                $("#"+id).children('td[data-target=case_details]').data('full-details', caseDetails);

                $("#"+id).children('td[data-target=case_notes]').text(truncated_caseNotes);
                $("#"+id).children('td[data-target=case_notes]').data('full-notes', caseNotes);

                $("#"+id).children('td[data-target=case_recommendation]').text(truncated_caseRecommendation);
                $("#"+id).children('td[data-target=case_recommendation]').data('full-recommendation', caseRecommendation);

                $('#reportsModal').modal('toggle');
            },
        });
    });
});

登录后复制

关键点：

获取完整文本： 通过$(selector).data('attribute-name')来获取存储在data-*属性中的完整文本。
模态框填充： 将获取到的完整文本填充到模态框对应的textarea元素中。
保存后更新： 在Ajax success回调中，当数据更新成功后，需要重新更新表格中显示的内容。这意味着需要再次对文本进行截断处理，并同时更新data-*属性中的完整文本，以确保下一次编辑时仍能获取到最新、完整的文本。

3. 后端数据更新逻辑

后端PHP文件（edit-report.php）接收到Ajax请求后，其更新逻辑保持不变，因为它接收的是模态框中完整的文本内容。

<?php
// ... 数据库连接代码 ...

if( isset($_POST['id']) ) {
    $id = $_POST['id'];
    $ccc_employee = $_POST['cccEmployee'];
    $IR_number = $_POST['irNumber'];
    // ... 获取其他字段 ...
    $case_description = $_POST['caseDesc']; // 接收完整的案例描述
    $action_taken = $_POST['actionsTaken'];
    $details = $_POST['caseDetails'];
    $notes = $_POST['caseNotes'];
    $recommendation = $_POST['caseRecommendation'];

    // 使用预处理语句更新数据，防止SQL注入
    $stmt = $mysqli->prepare("UPDATE cases_reports SET
        cccEmployee=?,
        irNumber=?,
        caseType=?,
        caseLocation=?,
        startDateTime=?,
        endDateTime=?,
        caseDesc=?,
        actionsTaken=?,
        caseDetails=?,
        caseNotes=?,
        caseRecommendation=?
        WHERE id=?");

    // 绑定参数
    $stmt->bind_param("sssssssssssi", 
        $ccc_employee, 
        $IR_number, 
        $case_type, 
        $caseLocation, 
        $startDate, 
        $endDate, 
        $case_description, 
        $action_taken, 
        $details, 
        $notes, 
        $recommendation, 
        $id
    );

    $stmt->execute();
    $stmt->close();

    // 可以在这里返回一个成功状态或更新后的数据（可选）
    // echo json_encode(['status' => 'success', 'message' => 'Report updated successfully.']);
}

// ... 原始的SELECT查询和while循环用于初始页面加载，
// 在Ajax更新场景下，这部分代码通常不会在请求中被执行，或者只返回更新后的单行数据。
// 如果edit-report.php仅用于处理POST请求，则可以移除后续的SELECT和while循环。
?>

登录后复制

重要提示：

SQL注入防护： 在更新数据库时，务必使用预处理语句（Prepared Statements）来绑定参数，而不是直接将用户输入拼接到SQL查询字符串中。上述PHP代码已修改为使用mysqli::prepare和mysqli_stmt::bind_param来增强安全性。

总结

通过本教程，我们学习了如何有效地管理表格中的长文本显示与编辑。核心策略包括：

服务器端截断： 利用PHP的mb_strimwidth函数在渲染表格时对长文本进行截断，并将其完整内容存储在HTML元素的data-*属性中，以保持表格的整洁和可读性。
客户端Ajax获取完整数据： 当用户点击编辑按钮时，JavaScript通过读取data-*属性来获取原始完整文本，并填充到模态框的编辑区域。
安全高效的后端更新： 后端PHP代码接收模态框提交的完整数据，并使用预处理语句安全地更新数据库。
保存后前端同步： 在Ajax成功回调中，更新表格中的截断显示文本，并同步更新data-*属性中的完整文本，确保前端视图与后端数据一致。

这种方法在保证用户界面美观的同时，兼顾了数据编辑的完整性和便捷性，是处理类似场景的常用且推荐的实践方式。

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