jquery 谷歌表单多项选择菜单与持久复选框显示？

kknvjkwl 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(106)

我试图修改代码中给出的另一个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

来源：https://stackoverflow.com/questions/77298926/google-sheets-multiple-choice-selection-menu-with-persistent-checked-boxes-displ

1条答案

按热度按时间

tjrkku2a1#

从你下面的回复来看，
当点击一个单元格时，我希望多项选择边栏选项自动显示为被选中，如果它们存在/已经存在于活动单元格中（我们可以假设它将有一个逗号分隔的文本值列表）。
下面的答案怎么样？

问题和解决方法：

我知道通过点击Google电子表格上的一个单元格，你想更新侧边栏上的复选框。有一个简单的触发器（onSelectionChange(e)），用于通过单击单元格来执行脚本。但是，我认为在目前阶段，侧边栏不能被简单的触发器使用。从这个情况来看，我担心你的目标不能直接运行。
那么，作为一种变通方法，通过单击侧边栏上的按钮来更新复选框如何？在这种情况下，我认为这是可以实现的。当这一点反映在您的演示脚本中时，如何进行以下修改？

修改脚本：

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上的计时器检查活动单元格时，您的目标可能会实现。Ref (Author: me)但是，在这种情况下，我担心这可能不是你预期的方向。因此，我提出了上述解决方案。
顺便说一句，当你点击“填充活动单元格”按钮，你想保留选中的复选框，请删除$(this).prop("checked", false);。

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 谷歌表单多项选择菜单与持久复选框显示？

1条答案

问题和解决方法：

修改脚本：

Google Apps脚本：

HTML和JavaScript：

测试：

注意：

相关问题

热门标签

最新问答