Question

我正在尝试嵌套表格。一个表，当单击特定表行时，另一个表将在该表下方展开（与主表有明显区别），并且与该特定行相关的数据将显示在该子表中。每行都应该能够呈现子表。我正在尝试遵循他们的官方文档，但没有这样做。以下是我从他们的文档中复制的代码示例。

var settingsArray = [
                      {
                       name : "My Account",
                       additionalText : nil
                      }
                      {
                       name : "My Info",
                       additionalText : nil
                      }
                      {
                       name : "Units",
                       additionalText :"Imperial(Pounds)" 
                      }
                    ]

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "settingsCell") as! CustomTableViewCell

    if let dictionary = settingsArray[indexPath.row] as? NSMutableDictionary {
      if let name = dictionary["name"] as? String {
         cell.nameLabel.text = name
      }
      if let addText = dictionary["additionalText"] as? String {
         cell.rightlabel.text = addText
         cell.rightlabel.addImageWith(name : "arrow-sign", behindText : true)
      }
    }


    cell.nameLabel.font = UIFont(name: "Avenir-Medium", size: 17.0)

    return cell
}


extension UILabel {

func addImageWith(name: String, behindText: Bool) {

    let attachment = NSTextAttachment()
    attachment.image = UIImage(named: name)
    let attachmentString = NSAttributedString(attachment: attachment)

    guard let text = self.text else {
        return
    }

    if (text.isEmpty) {
        return
    }

    if behindText {
        let labelText = NSMutableAttributedString(string: text + " ")
        labelText.append(attachmentString)
        self.attributedText = labelText
    } else {
        let labelText = NSAttributedString(string: " " + text)
        let mutableAttachmentString = NSMutableAttributedString(attributedString: attachmentString)
        mutableAttachmentString.append(labelText)
        self.attributedText = mutableAttachmentString
    }
}

func removeImage() {
    let text = self.text
    self.attributedText = nil
    self.text = text
}

}

任何帮助将不胜感激。

Answer 1

您是否尝试过添加expandableRows选项？

const options = {
  filterType: "dropdown",
  responsive: "scroll",
  selectableRows : true,
  expandableRows: true // Try Adding This
  renderExpandableRow: (rowData, rowMeta) => {
    console.log(rowData, rowMeta);
    return (
      <TableRow>
        <TableCell colSpan={rowData.length}>
          Custom expandable row option. Data: {JSON.stringify(rowData)}
        </TableCell>
      </TableRow>
    );
  }
};

MUI-Datatable可扩展行

1 个答案: