在 Tabolator Javascript lib 中的一列中放置两个或多个按钮

Question

作为标题我想制作一个这样的专栏

如果我按 editBt， editBt和delBt将更改为同一列中的updateBt和cancelBt 并且该行将是可编辑的

如果按或updateBt或cancelBt， updateBt和cancelBt将变回editBt和delBt 该行将是只读的

有人告诉我要这样做：

{
    title : "",
    field : "functionButton",
    width : 100,
    visible : true,
    formatter : function(cell) {
            return '<button type="button" class="btn-edit" onclick="editRow(this); return false;">editBt</button>'
                 + '<button type="button" class="btn-del" onclick="delRow(this); return false;">delBt</button>' 
                 + '<button type="button" class="btn-update" onclick="updateRow(this); return false;">updateBt</button>'
                 + '<button type="button" class="btn-cancel" onclick="cancelRow(this); return false;">cancelBt</button>'
    }
},

但是我无法使用提供的函数库（可编辑行）

有什么方法可以做到这一点或替代方法吗？

Answer 1

首先，我假设示例中概述的 editRow、delRow、updateRow 和 cancelRow 函数是您已经按原样编码的外部函数不是制表器的一部分。

与其从格式化程序返回静态 HTML，不如使用

document.createElement()

创建按钮元素，然后将事件侦听器绑定到它们，然后您可以将 Cell Component 或 Row Component 传递到其他函数中，这将使您完全控制该行，将

this

传递到您的函数中将传递整个表对象，这不会帮助您知道正在编辑哪一行。

function(cell) {

    //create edit button
    var editBt = document.createElement("button");
    editBt.type = "button";
    editBt.textContent = "editBt";
    editBt.classList.add("btn-edit");
    editBt.addEventListener("click", function(){
       editRow(cell);
    });
    
    //create delete button
    var delBt= document.createElement("button");
    delBt.type = "button";
    delBt.textContent = "delBt";
    delBt.classList.add("btn-del");
    delBt.addEventListener("click", function(){
       delRow(cell);
    });
   
    //create update button
    var updateBt = document.createElement("button");
    updateBt.type = "button";
    updateBt.textContent = "updateBt";
    updateBt.classList.add("btn-update");
    updateBt.addEventListener("click", function(){
       updateRow(cell);
    });

    //create cancel button
    var cancelBt = document.createElement("button");
    cancelBt.type = "button";
    cancelBt.textContent = "editBt";
    cancelBt.classList.add("btn-cancel");
    cancelBt.addEventListener("click", function(){
       cancelRow(cell);
    });
 
    //add buttons to cell (just the edit and delete buttons to start with)
    var buttonHolder = document.createElement("span");
    buttonHolder.appendChild(editBt); 
    buttonHolder.appendChild(delBt); 
 
    return buttonHolder;
}

在每个按钮的

addEventListener

函数内，您可以添加逻辑以根据需要添加和删除其他按钮。例如，单击编辑但显示更新和取消按钮：

editBt.addEventListener("click", function(){

    //hide edit and delete buttons
    editBt.parentNode.removeChild(editBt);
    updateBt.parentNode.removeChild(updateBt);

    //add update and cancel buttons
    buttonHolder.appendChild(updateBt);
    buttonHolder.appendChild(cancelBt);

    editRow(cell); //call your original function
});

Answer 2

这是一篇旧文章，但对于那些想要在模式窗口（或弹出窗口）中编辑制表符行的人，这里我用实际工作代码添加了一种可能性：

我正在使用 Tabulator 5.5

import axios from "axios";
import { Notify, Confirms } from "./notify";
import { Tabulator, AjaxModule, FormatModule } from 'tabulator-tables'
import '../../node_modules/tabulator-tables/dist/css/tabulator.min.css'

document.addEventListener('DOMContentLoaded', () => {
   let dataRow = {}

   Tabulator.registerModule([AjaxModule, FormatModule])
   var table = new Tabulator("#grid", {
      ajaxURL: "/dashboard/getProducts",
      index: "productId",
      height: "308px",
      placeholder: "No data available",
      autoResize: true,
      columns: [
         { title: "pId", field: "productId", visible: false },
         { title: "Code", field: "productCode", width: 90 },
         { title: "Description", field: "description", width: 450 },
         { title: "Category", field: "categoryId" },
         { title: "Price", field: "price", width: 90 },
         { title: "Brand", field: "brandId" },
         {
            title: "Actions", formatter: function(cell, formatterParams) {
               return "<button class='editBtn btn btn-sm btn-outline-success'>Edit</button>&nbsp;<button class='delBtn btn btn-sm btn-outline-danger'>Delete</button>";
            }
         }
      ],
      footerElement: "<button id='addProduct' class='btn btn-sm btn-outline-primary' data-bs-toggle='modal' data-bs-target='#myModal'>Add product</button>",
   })

   
   // Edit and delete buttons event handlers.
   document.getElementById('grid').addEventListener('click', e => {
      const editBtn = e.target.closest('.editBtn')
      const delBtn = e.target.closest('.delBtn')

      // Find the clicked row.
      let selectedRow = e.target.closest('div.tabulator-row')

      // Get the clicked row and its key.
      var row = table.getRow(selectedRow.children[0].innerText)
      dataRow = row.getData()

      if (editBtn !== null) {
         // Open the modal window
         var myModal = new bootstrap.Modal(document.getElementById('myModal'))
         myModal.show()

         // Change modal title.
         document.getElementById('staticBackdropLabel').innerText = 'Update product'

         // Load modal inputs with dataRow values.
         document.getElementById('productCode').value = dataRow.productCode
         document.getElementById('description').value = dataRow.description
         document.getElementById('categoryId').value = dataRow.categoryId
         document.getElementById('price').value = dataRow.price
         document.getElementById('brandId').value = dataRow.brandId
      }

      if (delBtn !== null) {
         Confirms('Do you want to delete this product?').then(res => {
            if (res) {
               axios.delete(`/dashboard/product/${dataRow.productId}`)
                  .then(res => {
                     // Delete the table row.
                     table.deleteRow(dataRow.productId);

                     // Update the rows count.
                     document.getElementById('qty').innerText = document.querySelector('table tbody').rows.length
                     Notify('success', `Product ${dataRow.productId} was deleted.`)
                  })
                  .catch(error => {
                     if (error.response) {
                        Notify('error', `Deletion problem: ${error.response.data}`)
                     }
                  })
            }
         })
      }
   })
   
})

模态是在 HTML + Bootstrap 5.3 中创建的。

notify.js

是我创建的一个小模块，用于替换内置的confirm() javascript方法和其他方法。

在此网格的每一行内，有两个按钮用于编辑/删除单击的行。 使用其关键字段 (productId) 加载行，并通过调用

dataRow

方法从网格检索数据并将其存储在

row.getData()

记录中。

通过向网格容器（div 标签）添加点击事件监听器，可以捕获其中发生的任何点击，然后询问接收该事件的子元素。 通过这种方式，我们不需要为网格内的每个单独按钮创建事件侦听器。

事件处理程序还将向我们显示所单击的按钮属于网格中的哪一行。