Создать телефонный справочник с возможностью поиска с помощью Google Sheets и Apps Script? - PullRequest
Новая
       0

Создать телефонный справочник с возможностью поиска с помощью Google Sheets и Apps Script?

2 голосов
/ 29 февраля 2020

Я работаю на благотворительную организацию, основанную на облаке Google. У них ограниченные ресурсы и нет базы данных SQL, меня попросили разработать телефонный справочник с возможностью поиска, который находится в нашем интре anet.

Пожалуйста, смотрите code.gs ниже: 

function doGet(e){
  var ss = SpreadsheetApp.openById('sheetId');
  var sheet = ss.getSheetByName('Staff');
  var range = sheet.getDataRange();
  var values = range.getValues();
  var holderArray = [];
  var HTMLTemp = HtmlService.createTemplateFromFile('index');

  Logger.log(values);
  var holder = '';
  for(x=1; x<values.length; x++){
    holderArray.push({
      "firstname" : values[x][0],
      "lastname" : values[x][1],
      "service" : values[x][2],
      "role" : values[x][3],
      "location" : values[x][4],
      "deskphone" : values[x][5],
      "mobilephone" : values[x][6],
      "email" : values[x][7]
    });
  }
  HTMLTemp.data = holderArray;
  var html = HTMLTemp.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}

function myFunction1(){
  var ss = SpreadsheetApp.openById('sheetid');
  var sheet = ss.getSheetByName('Staff');
  var range = sheet.getDataRange();
  var values = range.getValues();
  var holderArray = [];
  var HTMLTemp = HtmlService.createTemplateFromFile('index');

  Logger.log(values);
  var holder = '';
  for(x=1; x<values.length; x++){
    holderArray.push({
      "firstname" : values[x][0],
      "lastname" : values[x][1],
      "service" : values[x][2],
      "role" : values[x][3],
      "location" : values[x][4],
      "deskphone" : values[x][5],
      "mobilephone" : values[x][6],
      "email" : values[x][7]
     });
  }
  HTMLTemp.data = holderArray;
  var html = HTMLTemp.evaluate().setWidth(1020).setHeight(800);
  SpreadsheetApp.getUi().showModalDialog(html, 'Title');

Я буду развертывать это как веб-приложение и включу индекс. html ниже тоже: 

<script>
  var datags = <?!= JSON.stringify(data) ?>;
</script>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous">
  </head>
  <body>
     <div style="padding: 5px 20px; width: 50%;">
        <header class="text-center" style="padding: 15px;">
          <h1>Age UK Essex Staff Directory</h1>
        </header>
        <input type="text" id="filter"/>
        <input type="button" id="btnFilter" value="Filter" />
        <table id="myTable" class="table table-striped" style="margin-top: 10px;">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Service</th>
            <th>Role</th>
            <th>Location</th>
            <th>Desk Phone</th>
            <th>Mobile Phone</th>
            <th>Email</th>
          </tr>
        </table>
      </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(function(){
        console.log(datags);
          jQuery.each(datags, function() {
              console.log(this);
            $('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>'+this.firstname+'</td><td>'+this.lastname+'</td><td>'+this.service+'</td><td>'+this.role+'</td><td>'+this.location+'</td><td>'+this.deskphone+'</td><td>'+this.mobilephone+'</td><td>'+this.email+'</td></tr>')
          })
        });
     </script>
     <script>
       $(document).ready(function() {
         $("#btnFilter").click(function() {
         $("#myTable tr").show();
          if($("#filter").val.length > 0) {
             $("#myTable tr").filter(function(index, elm) {
                return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
            }).hide();
        }
    });
});
    </script>
  </body>
</html>

Это работает по большей части, хотя при удалении критерия seacrh я бы предпочел, чтобы содержимое возвращалось к нормальному, а не оставалось на результатах предыдущего поиска.

Ответы [ 2 ]

2 голосов
/ 24 марта 2020

Вы можете использовать setInterval для запуска функции фильтра каждые X миллисекунд.

Измените свой HTML, например, на следующее: 

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <div style="padding: 5px 20px; width: 50%;">
        <header class="text-center" style="padding: 15px;">
            <h1>Age UK Essex Staff Directory</h1>
        </header>
        <input type="text" placeholder="Filter directory..." id="filter" />
        <input type="button" id="btnFilter" value="Filter" />
        <table id="myTable" class="table table-striped" style="margin-top: 10px;">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Service</th>
                <th>Role</th>
                <th>Location</th>
                <th>Desk Phone</th>
                <th>Mobile Phone</th>
                <th>Email</th>
            </tr>
        </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var datags = <?!= JSON.stringify(data) ?> ;
        console.log(datags);

        function initialize() {
            jQuery.each(datags, function() {
                $('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>' 
                + this.firstname + '</td><td>' 
                + this.lastname + '</td><td>' 
                + this.service + '</td><td>' 
                + this.role + '</td><td>' 
                + this.location + '</td><td>' 
                + this.deskphone + '</td><td>' 
                + this.mobilephone + '</td><td>' 
                + this.email + '</td></tr>'
                )
            });
        }

        function filter() {
            $("#myTable tr").show();
            if ($("#filter").val.length > 0) {
                $("#myTable tr").filter(function(index, elm) {
                    return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
                }).hide();
            }
        }

        $(document).ready(
            function() {
                initialize();
                $("#btnFilter").click(filter);
                setInterval(filter, 1000);
            }
        );
    </script>
</body>

</html>

Ссылки:

0 голосов
/ 29 февраля 2020

Вы можете создать фильтр на своей таблице:

click on the filter icon on a column head

Просто отметьте область, в которой находятся ваши данные, и go в поле «Данные» - > «Фильтр»

Но я не знаю, есть ли лучшее решение с облаком Google.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...