Menggunakan JavaScript untuk melaksanakan penyuntingan dalam talian data jadual

Dalam aplikasi web moden, jadual ialah komponen UI biasa yang digunakan untuk memaparkan dan mengedit data. Dalam sesetengah kes, pengguna mungkin perlu mengedit terus dalam jadual untuk mengubah suai data dengan cepat tanpa perlu pergi ke halaman lain atau menggunakan alat luaran untuk membuat pengubahsuaian. Oleh itu, ia sangat berguna untuk melaksanakan fungsi penyuntingan jadual dalam talian. Dalam artikel ini, saya akan memperkenalkan cara menggunakan JavaScript dan beberapa perpustakaan sumber terbuka untuk melaksanakan penyuntingan dalam talian data jadual.

1. Penciptaan jadual HTML

Sebelum anda mula menggunakan JavaScript, sila buat jadual HTML terlebih dahulu. Berikut ialah contoh mudah:

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>1.99</td>
      <td>100</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>0.99</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

2. Tambah butang edit dan pengendali acara

Tambahkan butang "Edit" pada setiap sel jadual yang boleh diedit dan apabila butang itu diklik Mulakan mod pengeditan. Begini cara untuk melakukannya:

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">苹果</span>
          <input type="text" class="editor" value="苹果">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">1.99</span>
          <input type="text" class="editor" value="1.99">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">100</span>
          <input type="number" class="editor" value="100">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">橙子</span>
          <input type="text" class="editor" value="橙子">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">0.99</span>
          <input type="text" class="editor" value="0.99">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">50</span>
          <input type="number" class="editor" value="50">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Dalam contoh berikut, saya akan menggunakan perpustakaan jQuery untuk mencari dan memanipulasi elemen DOM:

$(document).ready(function() {
  // 查找所有编辑按钮和可编辑单元格
  var editBtns = $('.edit-btn');
  var cells = $('.editable-cell');

  // 添加事件处理程序
  editBtns.click(function() {
    var cell = $(this).closest('.editable-cell');
    var valueSpan = cell.find('.value');
    var editor = cell.find('.editor');

    // 切换编辑模式
    valueSpan.hide();
    editor.show().focus();

    // 提交修改
    editor.blur(function() {
      valueSpan.text(editor.val());
      editor.hide();
      valueSpan.show();
    });
  });
});

Kod ini mula-mula mencari semua butang "Edit" dan boleh diedit grid sel dan melancarkan pengendali klik pada butang. Dalam pengendali, ia mencari elemen yang diperlukan (nod teks nilai, editor dan sel), menukar mod penyuntingan dan menetapkan fokus pada editor. Apabila pengguna selesai mengedit dan editor kehilangan fokus, pengendali melakukan pengubahsuaian, memaparkan nilai yang dikemas kini dalam nod teks.

3. Tambah butang simpan dan batal

Dalam mod edit, pengguna perlu mempunyai cara untuk menyimpan atau membatalkan perubahan. Kami boleh menambah dua butang untuk mencapai ini:

<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>

Sila ambil perhatian bahawa butang ini harus disertakan dalam mod edit setiap sel boleh diedit supaya pengguna boleh menyimpan atau membatalkan sel individu jika perlu. Begini cara untuk melakukannya:

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">苹果</span>
          <input type="text" class="editor" value="苹果">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">1.99</span>
          <input type="text" class="editor" value="1.99">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">100</span>
          <input type="number" class="editor" value="100">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">橙子</span>
          <input type="text" class="editor" value="橙子">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">0.99</span>
          <input type="text" class="editor" value="0.99">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">50</span>
          <input type="number" class="editor" value="50">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Sama seperti butang Edit, kami perlu menambah pengendali acara untuk mengendalikan acara klik untuk kedua-dua butang dan menyerahkan data borang ke pelayan. Begini cara untuk melakukannya:

$(document).ready(function() {
  // 查找所有编辑按钮、保存按钮和取消按钮
  var editBtns = $('.edit-btn');
  var saveBtns = $('.save-btn');
  var cancelBtns = $('.cancel-btn');

  // 添加事件处理程序
  editBtns.click(function() {
    var cell = $(this).closest('.editable-cell');
    var valueSpan = cell.find('.value');
    var editor = cell.find('.editor');
    var saveBtn = cell.find('.save-btn');
    var cancelBtn = cell.find('.cancel-btn');

    // 切换编辑模式
    valueSpan.hide();
    editor.show().focus();
    saveBtn.show();
    cancelBtn.show();

    // 提交修改
    saveBtn.click(function() {
      valueSpan.text(editor.val());
      editor.hide();
      valueSpan.show();
      saveBtn.hide();
      cancelBtn.hide();

      // 向服务器提交表格数据
      var rowData = {
        name: cell.closest('tr').find('td').eq(0).text(),
        price: cell.closest('tr').find('td').eq(1).text(),
        stock: cell.closest('tr').find('td').eq(2).text()
      };
      $.ajax({
        url: '/api/updateRow',
        method: 'POST',
        data: rowData,
        success: function(response) {
          console.log('行更新成功');
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    });

    // 取消修改
    cancelBtn.click(function() {
      editor.val(valueSpan.text());
      editor.hide();
      valueSpan.show();
      saveBtn.hide();
      cancelBtn.hide();
    });
  });
});

Kod ini mula-mula mencari semua butang Edit, Simpan dan Batal dan menambah pendengar acara dalam pengendali klik setiap butang Edit. Dalam pengendali, ia menemui elemen yang diperlukan (nod teks nilai, editor, butang simpan dan butang batal), menunjukkan mod pengeditan dan menetapkan fokus pada editor. Apabila pengguna mengklik butang simpan, pengendali melakukan pengubahsuaian, memaparkan nilai yang dikemas kini dalam nod teks dan menghantar permintaan kemas kini kepada pelayan. Apabila pengguna mengklik butang batal, pengendali membatalkan pengubahsuaian dan memulihkan nilai awal.

4. Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan JavaScript dan beberapa perpustakaan sumber terbuka untuk melaksanakan penyuntingan dalam talian data jadual. Kami menambah butang Edit dan butang Simpan/Batal untuk membolehkan pengguna mengubah suai data dengan mudah dalam jadual dan menyerahkan kemas kini kepada pelayan menggunakan jQuery dan Ajax. Ini adalah contoh yang bagus untuk mempamerkan JavaScript dan cara anda boleh meningkatkan pengalaman pengguna aplikasi web anda dengan menggunakan perpustakaannya.

Atas ialah kandungan terperinci Menggunakan JavaScript untuk melaksanakan penyuntingan dalam talian data jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!