Question

我想知道您是否可以在我认为非常简单的事情上有所帮助。使用制表器嵌套表示例（非树），如何使子表在单击时显示/隐藏？我希望用户能够像树示例一样扩展它们以获取更多信息。

我已经看到了一些答案，但是它们似乎对我没有用。

What went wrong:
A problem occurred evaluating project ':expo-react-native-adapter'.
Project with path ':expo-core' could not be found in project ':expo-react-native-adapter'.

Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/4.10.1/userguide/command_line_interface.html#sec:command_line_warnings

Answer 1

选中此jsfiddle

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

  },

Answer 2

结合使用@ 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 个答案: