过滤后保持行值相同。（谷歌应用脚本，电子表格）答案

【问题标题】：Keep The Row Value Same After Filtering. (Google App script, Spreadsheet)过滤后保持行值相同。（谷歌应用脚本，电子表格）
【发布时间】：2020-09-05 03:12:22
【问题描述】：

（情况）

我的表中有一堆数据，每行的列末尾都有一个按钮。数据来自电子表格表格，我在模态对话框中显示表格。因此，每当我单击表格中的按钮时，程序都会根据该行在 Google 电子表格中运行该行/.setValue()。因此，如果按钮在第 1 行，它也会在电子表格中运行/.setValue() 第 1 行。

（问题）

现在，如果我在模态对话中创建过滤器功能并根据名称进行过滤，例如，很少有行会丢失。过滤表格后（假设第 3 行变为第 1 行），每当我单击按钮时，它将运行电子表格中的第一行，但它假设运行第 3 行。

（问题）

所以问题是即使在我过滤后如何保持行值不变？

（我的代码 GS 获取表）

function getTable(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Query_Script");
  var data = sheet.getDataRange().getDisplayValues();
  Logger.log(data);
  return {'success': true,'data':data};
}


function getRow(row,column){
  var ss = SpreadsheetApp.getActiveSpreadsheet();

  var sheet = ss.getSheetByName("Query_Script");
  var dataRange = sheet.getDataRange();
  var dataValue = dataRange.getDisplayValues();

  //Execute when clicked approved button.
  var value = sheet.getRange(row+1,10).setValue("Approved");

    var scriptLastRow = sheet.getLastRow();
      for(var j=1; j<scriptLastRow; j++){
        var applyLdap = sheet.getRange(j+1,3).getValue();
      }
    //Sheet ROTA :
        var ssRota = ss.getSheetByName("ROTA");
        var rotaLastRow = ssRota.getLastRow();

        var getLdap = sheet.getRange(row + 1 , 3).getValue();

          for(var x=11; x<sheet.getLastColumn(); x++){
            //Changing col to row:
            var ldapIndex = ssRota.getRange(1,4,rotaLastRow,1).getValues();//highlight ldap column
            var ldapRow = ldapIndex.map(function(row){return row[0];});//changing from column to row
            var ldap = ldapRow.indexOf(getLdap)+1;//find ldap
            var getCol = sheet.getRange(row+1,x).getValue();//value=6,7
            
            Logger.log(ldap);
            Logger.log(getCol);
      //stop execute if no value:
        if(getCol === ""){
          false;

        }else if(getCol === 9 || getCol === 10){
          ssRota.getRange(ldap,getCol).setValue("L");

        }else if(getCol % 7 === 2 || getCol % 7 === 3){
          ssRota.getRange(ldap,getCol).setValue("L");
          
        }
        else{
          ssRota.getRange(ldap,getCol).setValue("V");
        }
    }
}

（表格的我的代码 HTML）

window.onload = function (){
        google.script.run.withSuccessHandler(onSuccess).getTable();
      }

      function onSuccess(data){
        if(data.success){
        //console.log(data.data);//{application array(4), success:true}&&[array(27),Array(27)]
        var html = '<table>';
        var row;
        for(var i=0; i<data.data.length; i++){
          html += '<tr>';
          row = i;
          console.log(row);//[0,1,2,3,]
            for (var j=0; j<9; j++){
              html += '<td>'+ data.data[i][j]+'</td>';
            }
            html += '<td>'+ '<button data-row="'+i+'" data-column="'+j+'" id="btn">Approved</button>'+'</td>';
            html += '</tr>';
          }
          html += '</table>';
          output.innerHTML = html;
          //console.log(data);//{data:Array(4), success:true}
          const table = document.querySelector("table");
          table.addEventListener('click',approve);
        }
      }

      function approve(e){
        const td = e.target;
        const [row, column] = [parseInt(td.dataset.row),parseInt(td.dataset.column)];
        console.log(td);
        console.log([row,column]);
        google.script.run.getRow(row,column);
        
        const table = document.querySelectorAll("button");
        table[row].style.backgroundColor = "red";
      }

（GS 代码过滤器）

function myFilter(ldap) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Query_Script");
  var originalData = sheet.getRange(2,1,sheet.getLastRow(),10).getValues();
  var testData = sheet.getDataRange().getDisplayValues();
  var getLdap = ldap;

  var dataAgent = testData.filter(function(info){return info[0] === "Email Address" || info[2] === ldap;});

  return dataAgent;

}

ldap.onchange = function(){
          console.log(this.value);
          google.script.run.withSuccessHandler(showFilter).myFilter(this.value);
        }
      
        function showFilter(dataAgent){
          console.log(dataAgent);

          var html = '<table>';
          var row;
            for(var i=0; i<dataAgent.length; i++){
          html += '<tr>';
          row = i;
          console.log(row);//[0,1,2,3,]
            for (var j=0; j<9; j++){
              html += '<td>'+ dataAgent[i][j]+'</td>';
            }
            html += '<td>'+ '<button data-row="'+i+'" data-column="'+j+'" id="btn">Approved</button>'+'</td>';
            html += '</tr>';
          }
          html += '</table>';
          output.innerHTML = html;
          
          const table = document.querySelector("table");
          table.addEventListener('click',approve);
        }

【问题讨论】：

我必须为我糟糕的英语水平道歉。不幸的是，我无法理解Now if I make filter function in modal dialogue and filter it based in name for example, few row will missing right. After filtering the table(let's say row 3 become row number 1), whenever I clicked the button, it will run the first row in Spreadsheet but it suppose to run row 3.。我可以问一下您当前问题的详细信息和您的目标吗？
@Tanaike 是的，对不起我的解释。我的意思是我在模态对话框中创建一个表格，以及我从谷歌电子表格中获取的数据。我在每一行的最后一列添加了一个按钮，因此每次单击按钮时，数据都会发回信息并告诉我按钮在哪一行。例如，我单击第 1 行的按钮，它将 console.log 第 1 行。现在，如果我向其中添加过滤功能，并过滤数据，假设第 1 行有 John Doe，第 2 行有史密斯先生，如果我过滤到 Mr.Smith，表格只会显示 Mr.smith 的数据，对吗？
所以现在 Mr.Smith 数据将成为该过滤表中的第一行。现在，当我单击史密斯先生行的按钮时，它会以第 1 行而不是第 2 行的形式返回给我。我想要的是，每当我单击按钮时，该按钮应返回为确切的前一行，在这种情况下，它应返回第 2 行. 我认为问题出在我的代码上，因为我从 Google 电子表格中过滤了数据，这很有意义，为什么我会返回为第 1 行，但我不知道该怎么做。
@Tanaike 实际上我正在制作休假申请系统。因此，如果我单击该按钮，它将批准并更新系统中的某些内容。使用将在电子表格中传输的 Google 表单的代理。如果申请太多，我需要过滤它，以便我知道我应该先批准哪一个。这就是我想要做的。
我不得不再次为我糟糕的英语水平道歉。很遗憾，从您的回复中，我仍然无法理解您当前的问题和目标。

标签： javascript google-apps-script google-sheets

【解决方案1】：

这是我的解决方案。基本上，我没有在谷歌电子表格中过滤数据并将数据提取回模态对话框，而是直接在模态对话框中创建新表并为每个按钮分配值。

document.addEventListener("DOMContentLoaded",function(){

    google.script.run.withSuccessHandler(generateTable).getTableData();

});

function generateTable(dataArray){

  dataArray.forEach(function(r){

    var row = document.createElement("tr");


    var col1 = document.createElement("td");
      col1.textContent = r[1];
    var col2 = document.createElement("td");
      col2.textContent = r[2];
    var col7 = document.createElement("button");
      const getRow = table.rows.length;
      col7.innerHTML = "Approve";
      col7.setAttribute("class",getRow)

    row.appendChild(col1);
    row.appendChild(col2);
    row.appendChild(col3);

    tbody.appendChild(row);

getTableData() 只是从电子表格中获取数据的 GS 代码。然后我开始过滤它：

name.onchange = function(){
        
     for(var i=1; i<table.rows.length; i++){
          if(table.rows[i].cells[0].textContent === this.value){
            console.log(table.rows[i].cells[0].textContent);
            table.rows[i].style.display = "";

          }else{
            table.rows[i].style.display = "none";
          }
      }
  }

所以现在每当我过滤它并单击按钮时，该按钮将返回行索引并更新电子表格中的特定行。

【讨论】：