Question

我有一个 Google 网络应用程序，它根据下拉选项从电子表格访问文本。我希望“成绩”下拉列表根据在“角色”下拉菜单中选择的内容来更新其选项。我考虑这样做的方法是使用 indexOf 在电子表格中搜索在“角色”下拉列表中选择的值，然后从具有该“标题”的列中返回值。

如果我手动设置 indexOf 会起作用，像这样：columnNeeded = data.indexOf('Senior') + 1; 但当然我希望它自动完成，像这样：columnNeeded = data.indexOf(rolesTest) + 1;

问题似乎在于将“角色”下拉列表中的选定值传递给 valuesForGradesList 函数。

有人知道如何解决这个问题吗？ :)

提前致谢！

天然气：

var url = "URL";

function doGet(e) {
  
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
}

//get the data for the "Domain" dropdown list
function valuesForList(list) {
  
  //define the data
  var ss = SpreadsheetApp.openByUrl(url)
  var subProjectsSheet = ss.getSheetByName('Data');
  
  subProjectsSheet.getRange('C1').activate();
  subProjectsSheet.getCurrentCell().getNextDataCell(SpreadsheetApp.Direction.DOWN).activate();
  var lastRow = subProjectsSheet.getCurrentCell().getRowIndex();
  var subProjectsRange = subProjectsSheet.getRange(1, 3, lastRow, 1);
  
  //create a named range
  ss.setNamedRange('subProjectsList', subProjectsRange);
  
  //get the values from the range
  var listValues = ss.getRangeByName(list).getValues();
  
  return listValues;
   
}

//get the data for the "Role" dropdown list
function valuesForRolesList(roles) {
  
  //define the data
  var ss = SpreadsheetApp.openByUrl(url)
  var rolesSheet = ss.getSheetByName('Data');
  rolesSheet.getRange('D1').activate();
  rolesSheet.getCurrentCell().getNextDataCell(SpreadsheetApp.Direction.DOWN).activate();
  var lastRow = rolesSheet.getCurrentCell().getRowIndex();
  var rolesRange = rolesSheet.getRange(1, 4, lastRow, 1);
  
  //create a named range
  ss.setNamedRange('rolesList', rolesRange);
  
  //get the values from the range
  var rolesValues = ss.getRangeByName(roles).getValues();
  
  return rolesValues;
   
}

//get the data for the "Grade" dropdown list
function valuesForGradesList(grades, rolesTest) {
  
 //define the data
  var ss = SpreadsheetApp.openByUrl(url)
  var gradeSheet = ss.getSheetByName('Data');
  gradeSheet.getRange('E1').activate();
  gradeSheet.getCurrentCell().getNextDataCell(SpreadsheetApp.Direction.DOWN).activate();
  var lastRow = gradeSheet.getCurrentCell().getRowIndex();

  var columnNeeded;
  var data;
   
  lastColumn = gradeSheet.getLastColumn;

  data = gradeSheet.getRange(1,1,1,11).getValues();

  data = data[0];

  columnNeeded = data.indexOf(rolesTest) + 1;

  console.log(rolesTest);

  var gradeRange = gradeSheet.getRange(1, columnNeeded, lastRow, 1);
  
  //create a named range
  ss.setNamedRange('gradesList', gradeRange);
  
  //get the values from the range
  var gradesValues = ss.getRangeByName(grades).getValues();
  
  return gradesValues;
 
   
}

//the function to show the "Team" data on the index.html
function PostInfo (userInfo){
  
  //load the data
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Domain specific"); 
  var data = ws.getRange(2,1,ws.getLastRow(),2).getValues();
  
  var domainList = data.map(function(r){ return r[0]});
  var domainDesc = data.map(function(r){ return r[1]});
  
  var position = domainList.indexOf(userInfo.subprojects);
  if(position > -1){
    
    return domainDesc[position]; 
  }   
}

//the function to show the "Role" data on the index.html
function PostRoles (rolesInfo, userInfo){
  
  //load the data
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Role specific"); 
  var data = ws.getRange(4,1,ws.getLastRow(),8).getDisplayValues();
    
  var roleList = data.map(function(r){ return r[0]});

  var roleSummary = data.map(function(r){return r[1].replace(/{craftname}/g, userInfo.subprojects);});  
  var roleBullets = data.map(function(r){return r[2].replace(/{craftname}/g, userInfo.subprojects);});  
  var roleTasks = data.map(function(r){return r[3].replace(/{craftname}/g, userInfo.subprojects);});  
  var roleQualificationsSummary = data.map(function(r){return r[4].replace(/{craftname}/g, userInfo.subprojects);});  
  var roleQualificationsBullets = data.map(function(r){return r[5].replace(/{craftname}/g, userInfo.subprojects);});  
  var roleMandateSummary = data.map(function(r){return r[6].replace(/{craftname}/g, userInfo.subprojects);});  
  var roleMandateBullets = data.map(function(r){return r[7].replace(/{craftname}/g, userInfo.subprojects);});  
  
  var position = roleList.indexOf(rolesInfo.roles);
  var results = [roleSummary[position], roleBullets[position], roleTasks[position], roleQualificationsSummary[position], roleQualificationsBullets[position], roleMandateSummary[position], roleMandateBullets[position]];
  
  if(position > -1){
    
    return results; 
           
  }   
}

//function to load external Javascript page
function include(filename){

return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <div id="main">
    <table>
    <tr>
    <th>
      <label for="subprojects"><b>Domain:</b></label>
    </th>
    <th>
      <label for="role"><b>Role:</b></label>
    </th>
    <th>
      <label for="grade"><b>Grade:</b></label>
    </th>
    </tr>
    <tr>
    <th>
      <select name="subprojects" id="subprojects" tabindex="2"></select>
    </th>
    <th>
      <select name="role" id="role" tabindex="2"></select>
    </th>
    <th>
      <select name="grade" id="grade" tabindex="2"></select>
    </th>
    </tr>
    <p id="test" name="test"></p>
    </table>
    <br><br>
    <div>
        <button id="btn">Generate</button>
    </div>
    <div>
        <button id="btn_pdf">Save as PDF</button>
    </div>
    <br>
    <div class="canvas_div_pdf">   
       <p id="title" class="title" name="title"></p>
       
       <label for="est"><b><span id="name" name="name"></span></b></label>
       <p id="est" name="est"></p>
       
       <label for="respons"><b><span id="responsTag" name="responsTag"></span></b></label>
       <p id="respons" name="respons"></p>
      
       <label for="responsBullets"><span id="responsBulletsTag" name="responsBulletsTag"></span></label>
       <p id="responsBullets" name="responsBullets"></p>
       
       <label for="responsTasks"><span id="responsTasksTag" name="responsTasksTag"></span></label>
       <p id="responsTasks" name="responsTasks"></p>
       
       <label for="qualSummary"><b><span id="qualSummaryTag" name="qualSummaryTag"></span></b></label>
       <p id="qualSummary" name="qualSummary"></p>
       
       <label for="qualBullets"><span id="qualBulletsTag" name="qualBulletsTag"></span></label>
       <p id="qualBullets" name="qualBullets"></p>
       
       <label for="mandateSummary"><b><span id="mandateSummaryTag" name="mandateSummaryTag"></span></b></label>
       <p id="mandateSummary" name="mandateSummary"></p>
       
       <label for="mandateBullets"><span id="mandateBulletsTag" name="mandateBulletsTag"></span></label>
       <p id="mandateBullets" name="mandateBullets"></p>
    </div>
    </div>
    <?!= include("javascript"); ?>
  </body>
</html>

Javascript：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
    
    function onListSuccess(list) {
    
      var listLength = list.length;
      
      for (i=0; i<listLength;i++) {
        var dropdown = document.getElementById("subprojects");
        
        var opt = document.createElement("option");
        
        dropdown.options.add(opt);
        
        opt.text = list[i][0];
        opt.value = list[i][0];
              
      }
    }   
    
    function onRolesListSuccess(roles) {
    
      var rolesLength = roles.length;
      
      for (i=0; i<rolesLength;i++) {
        var dropdown = document.getElementById("role");
        
        var opt = document.createElement("option");
        
        dropdown.options.add(opt);
        
        opt.text = roles[i][0];
        opt.value = roles[i][0];
              
      }
    } 
    
    function onGradesListSuccess(grades) {
    
      var gradesLength = grades.length;
      
      for (i=0; i<gradesLength;i++) {
        var dropdown = document.getElementById("grade");
        
        var opt = document.createElement("option");
        
        dropdown.options.add(opt);
        
        opt.text = grades[i][0];
        opt.value = grades[i][0];
              
      }
    } 
       
    function onListSelect(domainDesc){
    
    var name2 = document.getElementById("subprojects").value;
    
    document.getElementById('est').innerHTML = domainDesc;
    document.getElementById('name').innerHTML = 'About the ' + name2 + ' team';  
    }
    
    function onRolesListSelect(results){

    var roleText = document.getElementById("role").value;
    var teamText = document.getElementById("subprojects").value;

    document.getElementById('title').innerHTML = roleText + " " + teamText;

    document.getElementById('respons').innerHTML = results[0];
    document.getElementById('responsTag').innerHTML = 'Responsibilities';  
    
    document.getElementById('responsBullets').innerHTML = results[1];
    document.getElementById('responsBulletsTag').innerHTML = 'You are also:';  
    
    document.getElementById('responsTasks').innerHTML = results[2];
    document.getElementById('responsTasksTag').innerHTML = 'Example work tasks:';  
    
    document.getElementById('qualSummary').innerHTML = results[3];
    document.getElementById('qualSummaryTag').innerHTML = 'Qualifications';  
    
    document.getElementById('qualBullets').innerHTML = results[4];
    document.getElementById('qualBulletsTag').innerHTML = 'You are also:';  
    
    document.getElementById('mandateSummary').innerHTML = results[5];
    document.getElementById('mandateSummaryTag').innerHTML = 'Mandate';  
    
    if (roleSummary[6] == "") {} else {
    document.getElementById('mandateBullets').innerHTML = results[6];
    document.getElementById('mandateBulletsTag').innerHTML = 'You are also:';  
    }
    }

  
  
  document.getElementById("role").addEventListener("change", gradeUpdate); 
  document.getElementById("btn").addEventListener("click", doStuff);
  document.getElementById("btn_pdf").addEventListener("click", getPDF);
  
  function gradeUpdate(){
  
   var rolesTest = {};
   
   rolesTest = document.getElementById("role").value;
   google.script.run.withSuccessHandler(onGradesListSuccess).valuesForGradesList(rolesTest);
   document.getElementById('test').innerHTML = rolesTest; 
  
  }

  function doStuff(){
  var userInfo = {};
  var rolesInfo = {};
  
  userInfo.subprojects = document.getElementById("subprojects").value;
  rolesInfo.roles = document.getElementById("role").value;
 
  google.script.run.withSuccessHandler(onListSelect).PostInfo(userInfo);
  google.script.run.withSuccessHandler(onRolesListSelect).PostRoles(rolesInfo, userInfo);
  
  
  }

 function getPDF(){

        var HTML_Width = $(".canvas_div_pdf").width();
        var HTML_Height = $(".canvas_div_pdf").height();
        var top_left_margin = 15;
        var PDF_Width = HTML_Width+(top_left_margin*2);
        var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;
    var roleText = document.getElementById("role").value;
    var teamText = document.getElementById("subprojects").value;
        
        var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
        
        html2canvas($(".canvas_div_pdf")[0],{allowTaint:true}).then(function(canvas) {
            canvas.getContext('2d');
            
            console.log(canvas.height+"  "+canvas.width);
                        
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
            pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
                        
            for (var i = 1; i <= totalPDFPages; i++) { 
                pdf.addPage(PDF_Width, PDF_Height);
                pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
            }
            
            pdf.save(teamText + " " + roleText);
        });
    };

  function populateList(){
    google.script.run.withSuccessHandler(onListSuccess).valuesForList('subProjectsList');
    google.script.run.withSuccessHandler(onRolesListSuccess).valuesForRolesList('rolesList');
    google.script.run.withSuccessHandler(onGradesListSuccess).valuesForGradesList('gradesList');

  }  
  window.addEventListener('load', populateList);
</script>

Answer 1

修改点：

在您的 Javascript 中，在 google.script.run.withSuccessHandler(onGradesListSuccess).valuesForGradesList('gradesList') 和 google.script.run.withSuccessHandler(onGradesListSuccess).valuesForGradesList(rolesTest) 处使用了一个参数。但在 Google Apps Script 中，使用了 function valuesForGradesList(grades, rolesTest) {}。在这种情况下，使用了 2 个参数。并且，这里没有声明 rolesTest。我认为这可能是您出现问题的原因。
而且，我认为当我看到 Google Apps 脚本方面的 valuesForGradesList 时，grades 可能是 'gradesList'。我认为这也可能是您出现问题的原因。关于这个，如果你想使用其他命名范围，请修改它。
顺便说一下，在您的脚本中，当 Role 表中不存在所选的 Data 值时，我认为发生了错误。

当以上几点反映到你的脚本中时，它变成如下。

修改后的脚本：

Google Apps 脚本方面：

请修改valuesForGradesList如下。

function valuesForGradesList(rolesTest) {  // <--- Modified

 //define the data
  var ss = SpreadsheetApp.openByUrl(url)
  var gradeSheet = ss.getSheetByName('Data');
  gradeSheet.getRange('E1').activate();
  gradeSheet.getCurrentCell().getNextDataCell(SpreadsheetApp.Direction.DOWN).activate();
  var lastRow = gradeSheet.getCurrentCell().getRowIndex();

  var columnNeeded;
  var data;
   
  lastColumn = gradeSheet.getLastColumn;

  data = gradeSheet.getRange(1,1,1,11).getValues();

  data = data[0];

  columnNeeded = data.indexOf(rolesTest) + 1;

  console.log(rolesTest);

  if (columnNeeded == 0) return;  // <--- Added

  var gradeRange = gradeSheet.getRange(1, columnNeeded, lastRow, 1);
  
  //create a named range
  var grades = 'gradesList';  // <--- Added
  ss.setNamedRange(grades, gradeRange);  // <--- Modified
  
  //get the values from the range
  var gradesValues = ss.getRangeByName(grades).getValues();
  
  return gradesValues;
 
   
}

Javascript 端：

请修改onGradesListSuccess如下。

function onGradesListSuccess(grades) {

  if (!grades) return;  // <--- Added

  var gradesLength = grades.length;
  
  for (i=0; i<gradesLength;i++) {
    var dropdown = document.getElementById("grade");
    
    var opt = document.createElement("option");
    
    dropdown.options.add(opt);
    
    opt.text = grades[i][0];
    opt.value = grades[i][0];
          
  }
}

添加：

选择Role时，如果要更新下拉列表而不是添加，那么下面的修改如何？在这种情况下，请在 Javascript 中修改 onGradesListSuccess 如下。

修改后的脚本：

function onGradesListSuccess(grades) {

  if (!grades) return;  // <--- Added

  var gradesLength = grades.length;
  
  var dropdown = document.getElementById("grade");  // <--- Added
  dropdown.innerHTML = "";  // <--- Added

  for (i=0; i<gradesLength;i++) {
    
    var opt = document.createElement("option");
    
    dropdown.options.add(opt);
    
    opt.text = grades[i][0];
    opt.value = grades[i][0];
          
  }
}

将值从 HTML 下拉菜单传递给 GAS 函数并更新另一个 HTML 下拉菜单

1 个答案:

修改点：

修改后的脚本：

Google Apps 脚本方面：

Javascript 端：

添加：

修改后的脚本：