Google Sheets 多项选择菜单显示持久复选框？

问题描述 投票：0回答：1

我正在尝试修改此处另一个SO答案中给出的代码（https://stackoverflow.com/a/72411940/8236733），它允许谷歌表格进行多项选择菜单选择。转载如下，方便参考：

Code.js
：

/**
 * Changes the variable validation if needed
 */

var validation = {
    sheet: 'VALIDATION',
    range: 'A2:A'
}

/**
 * Creates a menu entry in the Google Docs UI when the document is opened.
 *
 * @param {object} e The event parameter for a simple onOpen trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode.
 */
function onOpen(e) {
    SpreadsheetApp.getUi().createMenu('Sidebar')
        .addItem('Show Sidebar', 'showSidebar')
        .addToUi();
        showSidebar();
}


/**
 * Opens a sidebar in the document containing the add-on's user interface.
 */

function showSidebar() {
    SpreadsheetApp.getUi()
        .showSidebar(HtmlService.createTemplateFromFile('SIDEBAR')
            .evaluate()
            .setSandboxMode(HtmlService.SandboxMode.IFRAME)
            .setTitle('Multiple selector'));
}

function getOptions() {
    return SpreadsheetApp.getActive().getSheetByName(validation.sheet).getRange(validation.range).getDisplayValues()
        .filter(String)
        .reduce(function(a, b) {
            return a.concat(b)
        })
}

function process(arr) {
    arr.length > 0 ? SpreadsheetApp.getActiveRange().clearContent().setValue(arr.join(", ")) :
        SpreadsheetApp.getUi().alert('No options selected')
}


SIDEBAR.html
：

<!DOCTYPE html>
<html>
<style>
    .container,
    .buttons {
        margin: 5px;
        width: 95%;
        padding: 2px;
        font-size: 13px;
    }
</style>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
    <div class="container"></div>
    <div class="buttons">
        <p>
            <button class="action" id="action">Fill active cell</button>
            <button id="btn">Rebuild options</button>
        </p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js" --></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
    <script>
        $(document).ready(function() {
            createList();
            var selected = [];
            $('.ui.checkbox').checkbox();
            $("#action").click(function() {
                $("input:checkbox[name=sel]:checked").each(function() {
                    selected.push($(this).val());
                    $(this).prop( "checked", false ); 
                });
                google.script.run.process(selected)
                selected.length = 0;
            });
            $("#btn").click(function() {
                createList();
            });
        });

        function options(arr) {
            $(".container").empty();
            $(arr).each(function(i, el) {
                $(".container").append('<div class="field"><div class="ui checkbox"><input type="checkbox" name="sel" value="' + el + '"><label>' + el + '</label></div></div>')
            });
        }

        function createList() {
            google.script.run.withSuccessHandler(options).getOptions()
        }
    </script>
</body>

</html>

我正在尝试将代码添加到 HTML 的脚本部分，以便它检查工作表中活动单元格的文本值并将其解析为 CSV 列表。然后，它应该遍历创建的选项清单侧边栏，如果该值已存在于解析的活动单元格中，则自动检查侧边栏中的相应选项。

目前，当我单击一个单元格，用选项侧栏中的值填充它，选择另一个单元格，然后重新选择我填充的单元格时，我看到： ...重新选择该单元格时我想看到的是： （其中“a”和“b”选项将被自动选中，因为它们已经存在于单元格中）。 这些选项来自另一张工作表的列（如 

Code.js
应用程序脚本中引用的那样，名为“VALIDATION”），如下所示...

我该怎么做？ （对 HTML、应用程序脚本、jQuery 和语义的经验很少）

也就是说，如果工作表中活动单元格的值（当分解为 CSV 列表时）包含现有代码生成的选项菜单侧栏中的任何值，则这些值会自动显示在相应的复选框中侧边栏已被选中。我这样做是为了一目了然地看到检查了哪些选项，而不必读取电子表格上部公式/显示栏中的长 CSV 字符串。

谢谢。

jquery google-apps-script google-sheets semantic-ui
1个回答
0
投票

从您的以下回复来看，

单击单元格时，我希望多项选择侧边栏选项自动显示为已选中（如果它们存在/已存在于活动单元格中）（我们可以假设该单元格将具有逗号分隔的文本值列表）。

下面的答案怎么样？

问题和解决方法：

我了解到，通过单击 Google 电子表格上的单元格，您想要更新侧边栏上的复选框。有一个简单的触发器 (

onSelectionChange(e)
)，用于通过单击单元格来执行脚本。 Ref 但是，我认为在现阶段，侧边栏不能通过简单的触发器来使用。从这个情况来看，我担心你的目标无法直接运行。

那么，作为一种解决方法，通过单击侧边栏上的按钮来更新复选框怎么样？在这种情况下，我认为这是可以实现的。当这反映在您的放映脚本中时，以下修改如何？

修改后的脚本：

Google Apps 脚本：

在此修改中，添加了功能

getValues
。

/**
 * Changes the variable validation if needed
 */

var validation = {
  sheet: 'VALIDATION',
  range: 'A2:A'
}

/**
 * Creates a menu entry in the Google Docs UI when the document is opened.
 *
 * @param {object} e The event parameter for a simple onOpen trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode.
 */
function onOpen(e) {
  SpreadsheetApp.getUi().createMenu('Sidebar')
    .addItem('Show Sidebar', 'showSidebar')
    .addToUi();
  showSidebar();
}

/**
 * Opens a sidebar in the document containing the add-on's user interface.
 */
function showSidebar() {
  SpreadsheetApp.getUi()
    .showSidebar(HtmlService.createTemplateFromFile('SIDEBAR')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Multiple selector'));
}

function getOptions() {
  return SpreadsheetApp.getActive().getSheetByName(validation.sheet).getRange(validation.range).getDisplayValues()
    .filter(String)
    .reduce(function (a, b) {
      return a.concat(b)
    })
}

function process(arr) {
  arr.length > 0 ? SpreadsheetApp.getActiveRange().clearContent().setValue(arr.join(", ")) :
    SpreadsheetApp.getUi().alert('No options selected')
}

// I added the below script.
function getValues() {
  return SpreadsheetApp.getActiveRange().getValue().split(",").map(e => e.trim()).filter(String);
}

HTML 和 JavaScript：

在这里，我添加了一个“样本”按钮。单击此按钮时，当前单元格值将反映在复选框中。

<!DOCTYPE html>
<html>
<style>
  .container,
  .buttons {
    margin: 5px;
    width: 95%;
    padding: 2px;
    font-size: 13px;
  }
</style>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
  <div class="container"></div>
  <div class="buttons">
    <p>
      <button id="sample">sample</button>
      <button class="action" id="action">Fill active cell</button>
      <button id="btn">Rebuild options</button>
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
  <script>
  $(document).ready(function () {
    createList();
    var selected = [];
    $('.ui.checkbox').checkbox();
    $("#action").click(function () {
      $("input:checkbox[name=sel]:checked").each(function () {
        selected.push($(this).val());
        $(this).prop("checked", false);
      });
      google.script.run.process(selected)
      selected.length = 0;
    });
    $("#btn").click(function () {
      createList();
    });

    // I added the below script.
    $("#sample").click(function () {
      google.script.run.withSuccessHandler(ar => {
        $("input:checkbox[name=sel]").each(function () {
          if (ar.includes($(this).val())) {
            $(this).prop("checked", true);
          }
        });
      }).getValues();
    });

  });

  function options(arr) {
    $(".container").empty();
    $(arr).each(function (i, el) {
      $(".container").append('<div class="field"><div class="ui checkbox"><input type="checkbox" name="sel" value="' + el + '"><label>' + el + '</label></div></div>')
    });
  }

  function createList() {
    google.script.run.withSuccessHandler(options).getOptions()
  }
  </script>
</body>

</html>

测试：

使用该脚本时，得到以下结果。

注：

  • 例如，当Javascript上的计时器检查活动单元格时，您的目标也许能够实现。 参考（作者：我）但是，在这种情况下，我担心这可能不是您期望的方向。因此，我提出了上述解决方法。

  • 顺便说一句，当您单击“填充活动单元格”按钮时，您想保留选中的复选框，请删除

    $(this).prop("checked", false);
    。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.