在制表器中显示/隐藏或切换嵌套表子项

Posted 2023-02-22

【中文标题】在制表器中显示/隐藏或切换嵌套表子项

【英文标题】：Show/Hide or Toggle Nested Table Child In Tabulator

【发布时间】：2019-09-20 12:30:53

【问题描述】：

我想知道您是否可以提供一些我认为很简单的事情。使用 Tabulator 嵌套表示例（不是树），如何使子表在单击时显示/隐藏？如果用户需要类似于树示例，我希望他们能够展开以获取更多信息。

我已经看到了一些答案，但它们似乎对我不起作用。

//define table
var table = new Tabulator("#example-table", 
    height:"311px",
    layout:"fitColumns",
    resizableColumns:false,
    data:nestedData,
    columns:[
        title:"Make", field:"make",
        title:"Model", field:"model",
        title:"Registration", field:"reg",
        title:"Color", field:"color",
    ],
    rowFormatter:function(row)
        //create and style holder elements
       var holderEl = document.createElement("div");
       var tableEl = document.createElement("div");

       holderEl.style.boxSizing = "border-box";
       holderEl.style.padding = "10px 30px 10px 10px";
       holderEl.style.borderTop = "1px solid #333";
       holderEl.style.borderBotom = "1px solid #333";
       holderEl.style.background = "#ddd";

       tableEl.style.border = "1px solid #333";

       holderEl.appendChild(tableEl);

       row.getElement().appendChild(holderEl);

       var subTable = new Tabulator(tableEl, 
           layout:"fitColumns",
           data:row.getData().serviceHistory,
           columns:[
           title:"Date", field:"date", sorter:"date",
           title:"Engineer", field:"engineer",
           title:"Action", field:"actions",
           ]
       )
    ,
);

【问题讨论】：

谢谢，请查看更新后的jsfiddle.net/2Lnyrqg4。

【参考方案1】：

在这里混合使用@dota2pro 示例是一个不错的解决方案：

https://jsfiddle.net/ustvnz5a/2/

    var nestedData = [
    id: 1,
    make: "Ford",
    model: "focus",
    reg: "P232 NJP",
    color: "white",
    serviceHistory: [
        date: "01/02/2016",
        engineer: "Steve Boberson",
        actions: "Changed oli filter"
      ,
      
        date: "07/02/2017",
        engineer: "Martin Stevenson",
        actions: "Break light broken"
      ,
    ]
  ,
  
    id: 2,
    make: "BMW",
    model: "m3",
    reg: "W342 SEF",
    color: "red",
    serviceHistory: [
        date: "22/05/2017",
        engineer: "Jimmy Brown",
        actions: "Aligned wheels"
      ,
      
        date: "11/02/2018",
        engineer: "Lotty Ferberson",
        actions: "Changed Oil"
      ,
      
        date: "04/04/2018",
        engineer: "Franco Martinez",
        actions: "Fixed Tracking"
      ,
    ]
  ,
]

var hideIcon = function(cell, formatterParams, onRendered) //plain text value
    return "<i class='fa fa-eye-slash'></i>";
;

const table = new Tabulator("#example-table", 
  height: "311px",
  layout: "fitColumns",
  resizableColumns: false,
  data: nestedData,
  selectable: true,
  columns: [
      title: "Make",
      field: "make"
    ,
    
      title: "Model",
      field: "model"
    ,
    
      title: "Registration",
      field: "reg"
    ,
    
      title: "Color",
      field: "color"
    ,
    formatter:hideIcon, align:"center", title:"Hide Sub", headerSort:false, cellClick:function(e, row, formatterParams)
     const id = row.getData().id;
    $(".subTable" + id + "").toggle();      
    

  ],
  rowFormatter: function(row, e) 
    //create and style holder elements
    var holderEl = document.createElement("div");
    var tableEl = document.createElement("div");

    const id = row.getData().id;

    holderEl.style.boxSizing = "border-box";
    holderEl.style.padding = "10px 10px 10px 10px";
    holderEl.style.borderTop = "1px solid #333";
    holderEl.style.borderBotom = "1px solid #333";
    holderEl.style.background = "#ddd";
    holderEl.setAttribute('class', "subTable" + id + "");


    tableEl.style.border = "1px solid #333";
    tableEl.setAttribute('class', "subTable" + id + "");

    holderEl.appendChild(tableEl);

    row.getElement().appendChild(holderEl);

    var subTable = new Tabulator(tableEl, 
      layout: "fitColumns",
      data: row.getData().serviceHistory,
      columns: [
          title: "Date",
          field: "date",
          sorter: "date"
        ,
        
          title: "Engineer",
          field: "engineer"
        ,
        
          title: "Action",
          field: "actions"
        ,
      ]
    )
  ,
); 

【讨论】：

这是使用图标来取消隐藏/隐藏子表。我没有在行点击时这样做的原因是因为在我的示例中，用户需要点击来编辑字段。

这正是我正在寻找的唯一一个小细节，即隐藏嵌套表的初始状态的启动。

【参考方案2】：

查看jsfiddle

  selectable: true,
  rowClick: function(e, row) 
    const id = row.getData().id;
    $(".subTable" + id + "").toggle();

  ,

【讨论】：

这是一个开始，但最好通过单击行来显示/隐藏。我在 Github 上找到了这个，他们建议使用 rowformatter。也许你比我有更好的机会解决这个问题。 github.com/olifolkerd/tabulator/issues/175.

很好！！我将对其进行编辑，以便单独切换行。

当您点击一个单元格以关闭相应的子表时，我找到了一个可行的解决方案。此处示例：jsfiddle.net/86sdqLpa