JavaScript中Table类方法绑定点击事件及按钮按需显示问题

核心修改说明 #

• 修正类内部generer方法的实例指向问题：提前保存类实例_this = this，解决$.each遍历回调中this指向变化导致无法读取类属性的问题
• 增加按钮渲染判断逻辑：仅当对应处理函数非初始空函数时才渲染操作按钮，满足「用户传入处理函数才展示按钮」的需求
• 增加事件委托绑定：表格渲染完成后统一绑定按钮点击事件，触发对应传入的处理方法，完全不改动原有fonction_modif = modifRegion这类赋值逻辑

完整修改后JS代码 #

class Table {
  id_zone = "";
  class_table = "";
  data = "";
  header = "";
  class_modif = "";
  class_supp = "";
  class_vue = "";
  icone_modif = "";
  icone_supp = "";
  icone_vue = "";

  constructor(
    id_zone = "",
    class_table = "",
    data = "",
    header = "",
    class_modif = "",
    class_supp = "",
    class_vue = "",
    icone_modif = "",
    icone_supp = "",
    icone_vue = ""
  ) {
    this.id_zone = id_zone;
    this.class_table = class_table;
    this.data = data;
    this.header = header;
    this.class_modif = class_modif;
    this.class_supp = class_supp;
    this.class_vue = class_vue;
    this.icone_modif = icone_modif;
    this.icone_supp = icone_supp;
    this.icone_vue = icone_vue;
  }
  generer = () => {
    if (this.id_zone == "") {
      throw new Error(
        "Pour générer une table, il faut préciser la proprieté id_zone."
      );
    } else {
      const _this = this; // 保存类实例指向，解决each内部this指向变化问题
      var table =
        "<table class='" +
        this.class_table +
        "'>" +
        "<tbody>" +
        "<tr>" +
        "<th>" +
        donneesHeader[0] +
        "</th>" +
        "<th>" +
        donneesHeader[1] +
        "</th>" +
        "<th>" +
        donneesHeader[2] +
        "</th>" +
        "</tr>";
      $(this.data).each(function () {
        const rowValue = $(this)[0] + "*" + $(this)[1];
        table +=
          "<tr>" +
          "<td>" +
          $(this)[0] +
          "</td>" +
          "<td>" +
          $(this)[1] +
          "</td>" +
          "<td>";
        // 仅当传入对应处理函数时才渲染按钮
        if (_this.fonction_vue.toString() !== "() => {}") {
          table += `<button type='button' class='${_this.class_vue} ${_this.icone_vue}' value='${rowValue}'></button>`
        }
        if (_this.fonction_modif.toString() !== "() => {}") {
          table += `<button type='button' class='${_this.class_modif} ${_this.icone_modif}' value='${rowValue}'></button>`
        }
        if (_this.fonction_supp.toString() !== "() => {}") {
          table += `<button type='button' class='${_this.class_supp} ${_this.icone_supp}' value='${rowValue}'></button>`
        }
        table += "</td></tr>";
      });
      table += "</tbody></table>";
      $("#zoneTable").html(table);

      // 绑定按钮点击事件
      $(document).off('click', `.${this.class_vue}`).on('click', `.${this.class_vue}`, () => this.fonction_vue())
      $(document).off('click', `.${this.class_modif}`).on('click', `.${this.class_modif}`, () => this.fonction_modif())
      $(document).off('click', `.${this.class_supp}`).on('click', `.${this.class_supp}`, () => this.fonction_supp())
    }
  };

  fonction_modif = () => {};
  fonction_supp = () => {};
  fonction_vue = () => {};
}

function supprRegion() {
  alert("hello world 1");
}

function modifRegion() {
  alert("hello world 2");
}

function vueRegion() {
  alert("hello world 3");
}

let donnees = [
  [1, "Ain"],
  [2, "Aisne"],
  [3, "Allier"],
  [4, "Alpes-de-Haute-Provence"],
  [5, "Hautes-Alpes"],
  [6, "Alpes-Maritimes"],
  [7, "Ardèche"],
  [8, "Ardennes"],
  [9, "Ariège"],
  [10, "Aube"],
  [11, "Aude"],
  [12, "Aveyron"],
];

let donneesHeader = ["Code", "Nom du département", "Actions"];

let tableFils = new Table();
$(document).ready(function () {
  tableFils.id_zone = $("#zoneTable");
  tableFils.class_table = "table table-dark table-hover";
  tableFils.data = donnees;
  tableFils.class_modif = "mod_region";
  tableFils.class_supp = "supp_region";
  tableFils.class_vue = "vueRegion";
  tableFils.icone_modif = "btn btn-info btn-sm fas fa-pencil-alt fa-sm";
  tableFils.icone_supp = "btn btn-danger btn-sm fas fa-trash-alt fa-sm";
  tableFils.icone_vue = "btn btn-success btn-sm fas fa-eye fa-sm";
  tableFils.fonction_modif = modifRegion;
  tableFils.fonction_supp = supprRegion;
  tableFils.fonction_vue = vueRegion;

  tableFils.generer();
});

内容的提问来源于stack exchange，提问作者Ruan