Question

我有一个dart代码，用于填充List中的表格。在解释我的问题之前，这是代码：

import 'dart:html';
import 'dart:convert';
import 'dart:async';

class RowData {
  //Class for the values to be stored in each row
  int studentId;
  String name;
  int math;
  int science;
}

class Table {
  static StreamController<int> controller =
      new StreamController<int>.broadcast();
  Stream<int> updateStream = controller.stream;

  List<RowData> rows = new List<RowData>(); //contains the default rows
  List<String> downloadIds =
      new List<String>(); //should contain the id's of the selected rows

  TableElement table;
  var tBody;

  /* Takes in a List<Rows> of rows, draws a
   * html Table, and returns it as a Table Element.
   */
  TableElement drawTable() {
    this.table = new TableElement();
    this.table.classes.add("events_table");
    this.tBody = this.table.createTBody();
    Element head = this.table.createTHead();
    head.style.backgroundColor = "#003B70";

    this.table.tHead.addRow()
      ..insertCell(0).nodes.add(new Element.tag("div")..text = "Student ID")
      ..insertCell(1).nodes.add(new Element.tag("div")..text = "Student Name")
      ..insertCell(2).nodes.add(new Element.tag("div")..text = "Maths Score")
      ..insertCell(3).nodes.add(new Element.tag("div")..text = "Science Score");

    for (int i = 0; i < rows.length; i++) {
      this.tBody.insertRow(i)
        ..insertCell(0).text = rows[i].studentId.toString()
        ..insertCell(1).text = rows[i].name.toString()
        ..insertCell(2).text = rows[i].math.toString()
        ..insertCell(3).text = rows[i].science.toString()
        ..onClick.listen((e) => downloadTrigger(e));
    }
    return (this.table);
  }

  void decodeJson(String input) {
    List decoded = JSON.decode(input);

    for (int i = 0; i < decoded["ScoreReport"].length; i++) {
      rows.add(new Row()
        ..studentId = decoded["ScoreReport"][i]["studentId"]
        ..name = decoded["ScoreReport"][i]["name"]
        ..math = decoded["ScoreReport"][i]["math"]
        ..science = decoded["ScoreReport"][i]["science"]);
    }
  }

  downloadTrigger(Event e) {
    var download_id =
        ((e.target as Element).parent as TableRowElement).rowIndex;
    print(download_id);
    this.table.tBodies[0].rows[download_id].style.backgroundColor = "#4caf50";
    var test = this.table.tBodies[0].rows[download_id].nodes.toString();
    print(test);
  }
}

此类由另一个类调用，该类将在JSON文件中发送以首先填充Rows，然后调用表函数来绘制函数。

现在，我正在尝试下载学生报告，当点击相应的行时，例如，如果有人点击了第三行，我需要能够在第三行获得学生ID，一旦我获取id，我知道如何触发下载。

我很高兴获得学生ID，我可以获得用户点击的节点，但是我无法继续使用该节点，因为两个学生可以使用相同的名称或相同的分数，但Id的不同。我知道我有一个简单的Id的打印声明，当我尝试打印时，控制台会显示一个对我来说有意义的“td”。我是dart的新手，希望得到一些帮助。

简单地说，当用户点击特定行的任意位置时，我需要该行中的学生ID。

提前致谢，对于长篇描述感到抱歉。

Answer 1

在将表添加到DOM之后，这样的东西应该可以工作：

ElementList rows = table.querySelectorAll('tr');
rows.onClick.listen((event) {
  print(event.target.children[0].text);
})

Dartlang：如何在表中拥有可点击的行并访问表中的特定单元格？

1 个答案: