首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

这个问题我已经琢磨了好几个小时了.

这就是我正在努力实现的目标. 最终目标是能够使用Google Sheets中的侧边栏修改作业(job)名称. 可以使用自定义菜单打开侧边栏. 在侧栏中，我有一个字段，它从一个特定的范围中提取所有的工作名称. 在下面的字段中，用户可以键入更新的名称.

然后，使用textFinder()函数，我希望找到原来的名称，如 Select 的字段，并替换为新的名称.

下面是我的代码:

code.gs

function onOpen() {
  var ui = SpreadsheetApp.getUi();
    ui.createMenu('Manager Menu')
      .addItem('Rename Job', 'showNewJobSidebar')
      .addToUi();
  SpreadsheetApp.getUi();
}

function showNewJobSidebar() {
  
   var html = HtmlService
      .createTemplateFromFile('sidebar');

  // Add the dropdown lists to the template

   html.dropdown = SpreadsheetApp.getActiveSheet().getRange("C6:C").getValues().filter(String);

   html = html.evaluate()
      .setTitle('Change Job Position Name')

  SpreadsheetApp.getUi().showSidebar(html);
}

function updateJobName(form) {
  let ss = SpreadsheetApp.getActiveSpreadsheet();
  let sheet = ss.getActiveSheet();
  let value1 = form.Current_Job;
  let value2 = form.New_Job;
  sheet.getRange("C6:C").createTextFinder(value1).replaceAllWith(value2);
}

html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link
    rel="stylesheet"
    href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"
    />
    <style>
      .container {
          margin: 5px 5px 5px 5px;
      }

      .input-Dropdown {

        width: 50%; 
        text-align: left; 
        float: left;
        padding: 5px 5px 5px 5px;
      }

      .input-Text {

        width: 50%; 
        text-align: left; 
        float: left;
        padding: 5px 5px 5px 5px;
      }

      .custom-heading {
        font-weight: bold;
      }

    </style>
    <script>
     function submitForm() {
       google.script.run.updateJobName(document.getElementById("jobForm"));
     }
   </script>  
  </head>
  <body>
    <div class="container">
      
    <h1 class="custom-heading"><center>Rename Job</center></h1><br><br>
    
    <form id ="jobForm " onkeydown="return event.key != 'Enter'">

    <!-- Create input fields to accept values from the user -->
    Current Job Name:<br><br>
    <select class="input-Dropdown" id="Current_Job"/>
    <? for (let i in dropdown) { ?>
    <option value="<?=dropdown[i]?>"><?=dropdown[i]?></option>
    <? } ?>
    </select>
    <br>
    <br>
    <br>

    New Job Name:<br><br>
    <input class="input-Text" type="text" id="New_Job"/>
    <br>
    <br>
    <br>

    <button class="action" onclick="submitForm();">Save</button>
    <button onclick="google.script.host.close();">Close</button>
    </form>
    </div> 
  </body> 
</html>

菜单和侧栏功能正常. 作为一个视觉效果，这里是一个示例工作表的屏幕截图，其中侧边栏处于活动状态:

Screenshot

正如您所看到的，在活动工作表中，从C6:C成功创建了NTFS. 但是，当我点击"保存"时，虽然按钮发生了变化，表示按钮已被按下，但Electron 表格不会更新，即将原始作业(job)名称更改为更新后的作业(job)名称. 有人能指出我做错了什么吗？

这是我得到的错误:

TypeError:无法读取null的属性(读取'Current_Job') at updateJobName(工作时间:27:21)

推荐答案

建议:

我对你现有的代码做了一些修改.由于你得到的错误是关于Current_job返回null，我在你的submitForm()函数中添加了几行代码，以获取表单中的值输入:

   var current_job = document.getElementById("Current_Job").value;
   var new_job = document.getElementById("New_Job").value;

然后我把current_job和new_job作为updateJobName函数的参数传递给你:

function updateJobName(current_job, new_job) {
  let value1 = current_job;
  let value2 = new_job;
sheet.getRange("C6:C").createTextFinder(value1).replaceAllWith(value2);
}

你可以试试这个:

code.gs

// Global variables
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();

// onOpen "Manager Menu" menu
function onOpen() {
  var ui = SpreadsheetApp.getUi()
    .createMenu('Manager Menu')
    .addItem('Rename Job', 'showNewJobSidebar')
    .addToUi();
}

// used to serve the HTML on the sidebar
function showNewJobSidebar() {
  var html = HtmlService.createTemplateFromFile('sidebar');

  // Add the dropdown lists to the template
  html.dropdown = SpreadsheetApp.getActiveSheet().getRange("C6:C").getValues().filter(String);
  html = html.evaluate().setTitle('Change Job Position Name')
  SpreadsheetApp.getUi().showSidebar(html);
}

function updateJobName(current_job, new_job) {
  let value1 = current_job;
  let value2 = new_job;

  sheet.getRange("C6:C").createTextFinder(value1).replaceAllWith(value2);
}

html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" />
  <style>
    .container {
      margin: 5px 5px 5px 5px;
    }

    .input-Dropdown {

      width: 50%;
      text-align: left;
      float: left;
      padding: 5px 5px 5px 5px;
    }

    .input-Text {

      width: 50%;
      text-align: left;
      float: left;
      padding: 5px 5px 5px 5px;
    }

    .custom-heading {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">

    <h1 class="custom-heading">
      <center>Rename Job</center>
    </h1><br><br>

    <form id="jobForm " onkeydown="return event.key != 'Enter'">

      <!-- Create input fields to accept values from the user -->
      Current Job Name:<br><br>
      <select class="input-Dropdown" id="Current_Job"/>
      <? for (let i in dropdown) { ?>
      <option value="<?=dropdown[i]?>">
        <?=dropdown[i]?>
      </option>
      <? } ?>
      </select>
      <br>
      <br>
      <br>

    New Job Name:<br><br>
      <input class="input-Text" type="text" id="New_Job" value="" />
      <br>
      <br>
      <br>

      <button class="action" onclick="submitForm();">Save</button>
      <button onclick="google.script.host.close();">Close</button>
    </form>
  </div>

  <script>
    function submitForm() {
       var current_job = document.getElementById("Current_Job").value;
       var new_job = document.getElementById("New_Job").value;

       //Asynchronous 
        google.script.run.withSuccessHandler(data => {
          google.script.host.close();
        }).withFailureHandler(er => {
          alert(er);
        }).updateJobName(current_job, new_job); // <-- updateJobName function exist on Code.gs, parameters are passed to that function
    }
  </script>

</body>

</html>

我把Writing改成Texting

enter image description here

References:

请随时让我知道这是否适合你！

Html相关问答推荐

窗口对象中是否有对<；html&>根元素的引用？

Angular 15 p-对话框不使用组件 Select 器呈现HTML

悬停效果在新西兰表上不起作用

如何用等宽字体固定数字在有序列表中的位置

在Firefox中，使用写入模式：Vertical-LR时，不随内容扩展的css弹性项

类型'；联系人组件'；上不存在属性'；name FormControl'；

如何将图像放在其内部按钮下方

网格中的图像zoom 不正确

如何为高度较小的块制作边框动画？

标题在实时网站上闪烁

如何在悬停时使矩形按钮上的边框变圆

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

如何使用CSS Select 同级元素的：：before伪元素？

W3Schools 幻灯片相同高度

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列？

如何从另一个 ng-template 获取输入值

使用 htmloutput 在shiny 的应用程序中呈现文本

Bootstrap Grid System col 无法正常工作

如何阻止网格项目拉伸？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630