javascript - 在 Google-App 脚本中对表数据 onclick <th> 进行排序

Question

我正在尝试对表中的数据进行排序(升序或降序)。对于这个，每当我单击每个标题时，我都想对 VL 日期和申请日期/时间进行排序。但是，我当前的代码每次单击它时都不会执行任何操作。但是当我在静态数据上尝试它时，它起作用了。

下面是我的代码:

    <? var data = SpreadsheetApp
        .openById('sheet ID')
        .getSheetByName("VL Request")
        .getDataRange()
        .getValues(); 
   var timeStamp = [0];      
   var rid = [1];     
   var ldap = [2];
   var aname = [7];
   var lob = [9];
   var dovl = [5];
   var rol = [6];
   var tlapprov = [12];
   var tlrem = [14];
   var stat = [13];
   var schedrem = [11];
   var tl = [3];
   var pocldap = [15];
   var omldap = [16];
   var userName = Session.getEffectiveUser().getUsername();
  ?>
     <table id="vllist" class="vllist2">

       <tr>
           <th colspan=11>POC VIEW</th>    
       </tr> 
    <tr>
           <th colspan=11>Application for Date Range: <?= [formattedStart] ?> - <?= [formattedEnd] ?></th>    
       </tr>   
      <tr>
        <th style="display:none;">Request ID</th>   
        <th>LDAP</th>
        <th>Agent Name</th>
        <th>Lane</th>  
        <th onclick="sortTable(4)">Date of VL</th>
        <th>Reason of Leave</th>
        <th>POC Approval</th>
        <th>POC Remarks</th>
        <th>Scheduler's Approval</th>
        <th>Scheduler's Remarks</th>
        <th onclick="sortTable(10)">Date/Time of Application</th>
      </tr>

     <? for (var i = 1; i < data.length; i++) { ?>
            <tr> 
            <? if ((data[i][tlapprov] === "Pending") && ((data[i][pocldap] === userName) || (data[i][omldap] === userName)) && (data[i][dovl] >= startDate) && (data[i][dovl] <= endDate)) { ?>

            <?
            var vldate = data[i][dovl];
            var formattedDateVL = (vldate.getMonth()+1) + '/' + vldate.getDate() + '/' + vldate.getYear();
            ?>

              <td class="hide">
                <?= data[i][rid] ?>
                </td>
                <td>
                <?= data[i][ldap] ?>
                </td>
                <td>
                <?= data[i][aname] ?>
                </td>
                <td>
                <?= data[i][lob] ?>
                </td>
                <td>
                <?= [formattedDateVL] ?>
                </td>
                <td>
                <?= data[i][rol] ?>
                </td>
                <td>
                <?= data[i][tlapprov] ?>
                </td>
                <td>
                <?= data[i][tlrem] ?>
                </td>
                <td>
                <?= data[i][stat] ?>
                </td>
                <td>
                <?= data[i][schedrem] ?>
                </td>
                <td class="lefttext">
                <?= data[i][timeStamp] ?>
                </td>

                <? } ?>
            </tr>
            <? } ?>

    </table> 

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("vllist");
  switching = true;
  dir = "asc";

  while (switching) {

    switching = false;
    rows = table.rows;

    for (i = 1; i < (rows.length - 1); i++) {

      shouldSwitch = false;

      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];

      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {

          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {

      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;

      switchcount ++;
    } else {

      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Answer 1

我要做的就是像平常一样将DATA调用到表中...然后使用JS对HTML表中的记录进行排序。

我认为您想要做的是首先按字母顺序对数据进行排序，然后将数据显示到表中。因此，最好将数据按原样放入表中，然后使用排序表函数..

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>

<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Country</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>