成人亚洲精品久久久久,欧美牲交a欧美牲交aⅴ

PHP與Ajax：實(shí)現(xiàn)表格長(zhǎng)文本截?cái)囡@示與模態(tài)編輯教程

碧海醫(yī)心

發(fā)布： 2025-10-16 11:51:32

原創(chuàng)

479人瀏覽過

PHP與Ajax：實(shí)現(xiàn)表格長(zhǎng)文本截?cái)囡@示與模態(tài)編輯教程

本教程詳細(xì)介紹了如何使用php和ajax技術(shù)，優(yōu)雅地處理表格中過長(zhǎng)的文本內(nèi)容。通過php的字符串截?cái)喙δ茉诒砀裰姓故揪?jiǎn)數(shù)據(jù)，同時(shí)結(jié)合ajax實(shí)現(xiàn)模態(tài)框（modal）的無刷新編輯，確保用戶在需要時(shí)能查看并修改完整內(nèi)容，從而提升數(shù)據(jù)表格的可讀性和用戶體驗(yàn)。

引言：優(yōu)化表格長(zhǎng)文本顯示的需求

在Web應(yīng)用中，數(shù)據(jù)表格是展示信息的重要方式。然而，當(dāng)表格中的某些字段（如“案例描述”、“備注”等）包含大量文本內(nèi)容時(shí)，直接顯示完整內(nèi)容會(huì)導(dǎo)致表格行高不一、布局混亂，嚴(yán)重影響用戶體驗(yàn)和數(shù)據(jù)可讀性。為了解決這一問題，我們通常需要一種機(jī)制：在表格中僅顯示文本的摘要或截?cái)嗖糠?，同時(shí)提供一個(gè)入口（例如“編輯”按鈕），允許用戶通過模態(tài)框（Modal）查看和編輯完整的文本內(nèi)容。本教程將結(jié)合PHP后端處理和前端Ajax技術(shù)，實(shí)現(xiàn)這一功能。

解決方案概述

核心思路是：

后端PHP處理： 在從數(shù)據(jù)庫獲取數(shù)據(jù)后，針對(duì)需要截?cái)嗟奈谋咀侄危蓛煞輸?shù)據(jù)：一份是用于表格顯示的截?cái)辔谋?，另一份是完整的原始文本。完整的原始文本將通過HTML的 data-* 屬性存儲(chǔ)在對(duì)應(yīng)的表格單元格中。
前端HTML渲染： 表格 <td> 元素顯示截?cái)辔谋尽?/li>
前端JavaScript (Ajax) 交互：
- 當(dāng)用戶點(diǎn)擊“編輯”按鈕時(shí)，通過jQuery/Ajax從 <td> 元素的 data-* 屬性中讀取完整的文本內(nèi)容，并填充到模態(tài)框的 textarea 中。
- 用戶在模態(tài)框中修改并保存后，通過Ajax將完整的新數(shù)據(jù)發(fā)送到PHP后端進(jìn)行更新。
- 更新成功后，前端再次截?cái)嘈聰?shù)據(jù)以更新表格中的顯示文本，并同步更新 <td> 元素的 data-* 屬性。

后端PHP數(shù)據(jù)處理：實(shí)現(xiàn)文本截?cái)嗯c完整數(shù)據(jù)傳遞

PHP負(fù)責(zé)從數(shù)據(jù)庫查詢數(shù)據(jù)，并為前端準(zhǔn)備好截?cái)嗪屯暾奈谋緝?nèi)容。

1. 數(shù)據(jù)庫查詢

首先，確保你的PHP代碼能夠正確連接數(shù)據(jù)庫并查詢到所需的所有字段，包括那些可能包含長(zhǎng)文本的字段。原始代碼中的 SELECT * FROM cases_reports 已經(jīng)滿足此要求。

立即學(xué)習(xí)“PHP免費(fèi)學(xué)習(xí)筆記（深入）”；

AI圖像編輯器

使用文本提示編輯、變換和增強(qiáng)照片

查看詳情

<?php
// ... 數(shù)據(jù)庫連接代碼 ...

$selectquery = "SELECT * FROM cases_reports";
$table = mysqli_query($mysqli, $selectquery);

// ...
?>

登錄后復(fù)制

2. 表格顯示層截?cái)嗯c完整數(shù)據(jù)存儲(chǔ)

在PHP的 while 循環(huán)中，當(dāng)渲染每個(gè)表格行 <tr> 時(shí)，我們需要對(duì)長(zhǎng)文本字段進(jìn)行處理。使用 mb_strimwidth() 函數(shù)進(jìn)行多字節(jié)字符串截?cái)?，以適應(yīng)UTF-8等字符編碼。同時(shí)，為了讓前端Ajax能夠獲取到完整的原始文本，我們將完整文本存儲(chǔ)在 <td> 元素的 data-* 屬性中。

以下是 edit-report.php 中相關(guān) <td> 元素的修改示例。我們假設(shè)需要對(duì) caseDesc, actionsTaken, caseDetails, caseNotes, caseRecommendation 進(jìn)行截?cái)唷?/p>

<!-- Start PHP While -->
<?php
// ... 數(shù)據(jù)庫連接和數(shù)據(jù)更新邏輯（保持不變） ...

$selectquery = "SELECT * FROM cases_reports";
$table = mysqli_query($mysqli, $selectquery);

while($res = mysqli_fetch_array($table)) {
    // 定義截?cái)嚅L(zhǎng)度和省略符
    $truncateLength = 100; // 例如，截?cái)嗟?00個(gè)字符
    $ellipsis = "...";

    // 對(duì)長(zhǎng)文本字段進(jìn)行截?cái)啵⒋鎯?chǔ)完整內(nèi)容到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>
    <!-- 截?cái)囡@示，并用data-full-desc存儲(chǔ)完整內(nèi)容 -->
    <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>

登錄后復(fù)制

以上就是PHP與Ajax：實(shí)現(xiàn)表格長(zhǎng)文本截?cái)囡@示與模態(tài)編輯教程的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：