Question

是否可以将行的位置更改为表格的顶部（第一行）

我正在使用firebase作为表的数据源，我无法弄清楚如何在单击或更新数据时将其作为第一行。

我已经在编辑行的数据时设置了时间戳，所以也许有办法从firebase中获取按时间戳排序的行

这是该表的代码以及如何向其分配数据

    <div class="tableDiv" align="left">
      <table id="example" class="display" align="center">
        <thead>
          <tr style="color: #c00; background: #FFCC01;">
            <td onclick="sortTable(0)">Date</td>
            <td onclick="sortTable(1)">RR</td>
            <td onclick="sortTable(2)">Origin</td>
            <td onclick="sortTable(3)">Destination</td>
            <td onclick="sortTable(4)">CNEE</td>
            <td onclick="sortTable(5)">Status</td>
            <td>Details</td>
          </tr>
        </thead>
        <tbody id="table_body"></tbody>
      </table>
    </div>

var rootRef = firebase.database().ref().child("Requests");


rootRef.on("child_added", snap => {


  var DateValue = snap.child("Date").val();
  var RRValue = snap.child("RR").val();
  var OrgValue = snap.child("Origin").val();
  var DestValue = snap.child("Destination").val();
  var CustNameValue = snap.child("Customer Name").val();
  var StatusValue = snap.child("Status").val();

  //table data fetched from firebase
  if (StatusValue == "Pending") {
    $("#table_body").append("<tr><td>" + DateValue +
      "</td><td class=\"valueRRField\">" + RRValue +
      "</td><td>" + OrgValue +
      "</td><td>" + DestValue + "</td><td>" + CustNameValue
      + "</td><td>" + StatusValue + "</td><td><Button class=\"lisnClick\">" + "Expand" + "</Button></td></tr>");
  }
});

请至少至少说明如何实现

Answer 1

您可以使用Firebase SDK .orderByChild（https://firebase.google.com/docs/reference/js/firebase.database.Reference.html#orderbychild）从按时间戳排序的firebase中获取数据。确保日期以自Unix纪元以来的单位（例如毫秒）为单位，以便对排序进行数字处理（例如，不要按“ Sunday May 12 2019”之类的日期）。您甚至可以让Firebase为您生成时间戳记（https://firebase.google.com/docs/reference/js/firebase.database.ServerValue#.TIMESTAMP）

它看起来像：

firebase
  .database()
  .ref('/Requests')
  .orderByChild('timestamp')

您当然可以操纵DOM并将一行从一个位置移到顶部，但是我认为使用更新后的数据重新呈现将产生更好的代码，并且您可以从Firebase实时更新中受益。要移动一行，您只需要获得对父元素的引用，该元素一旦移动就将位于其前面，并且它（例如，使用querySelector）然后可以使用insertBefore {{3 }}。 IE不支持Prepend，否则我建议这样做。

是否可以更改表格的行位置

1 个答案: