Массив нельзя использовать в таблицах данных - PullRequest
Новая
       5

Массив нельзя использовать в таблицах данных

1 голос
/ 30 октября 2019

Я пытался создать таблицу, используя таблицы данных с массивом, но почему-то он не отображает таблицу в моем html-файле. Массив определен в моем файле gs, как вы можете видеть в приведенном ниже коде.

Это простая работа, но я до сих пор не уверен, что она пошла не так. 

var ssId = 'xxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);
var indexPage_sheetName = 'xxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();//array of 850rows×15cols
valuesFromIndexPage.shift();

function getData() {
  $(document).ready(function(){
    $("#foo-table").DataTable({
      data: valuesFromIndexPage
    });
  }); 
}

<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/> 
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</head>
</html>

@ ZektorH Вот консольный журнал запуска моего кода. 

userCodeAppPanel:9 Uncaught TypeError: Cannot read property 'slice' of null
    at initializeTable (userCodeAppPanel:9)
    at af (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:67)
    at 4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:10
    at ng.J (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:94)
    at Hd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:42)
    at Dd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:43)
    at Bd.b (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:39)

Я снова посмотрел свои данные и обнаружил, что данные стали нулевыми в console.log(но у меня есть данные, когда я вижу это на Logger.log). Я публикую то, что я сделал и получил ниже. 

function getData() {
  Logger.log(valuesFromIndexPage); //the array is in valuesFromIndexPage
  return valuesFromIndexPage;
}

        function initializeTable(data) {
        console.log(data); //it returns null here...
            var aDataSet = data.slice(1);
  • Журнал из Logger.log

[19-10-31 09:47: 00: 116 JST] [[ID, 案件 名, .......

@ ZektorH Это целые коды без данных.

code.gs 

var ssId = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);

var indexPage_sheetName = 'xxxxxxxxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();


function createSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('index').setTitle('My custom sidebar').setWidth(300))
}

function getData() {
  return valuesFromIndexPage;
}



function doGet(e) {
      return HtmlService.createTemplateFromFile('index').evaluate().setTitle('title');
}

index.html 

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            console.log("ready!");
            google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
        });

        function initializeTable(data) {
            console.log(data)
            var aDataSet = data.slice(1); // all except header
            var head = []; // headers
            data[0].forEach(function(e) {
                head.push({
                    'sTitle': e
                });
            });
            $('#foo-table').dataTable({
                "aaData": aDataSet,
                "aoColumns": head
            });
        }
    </script>
</head>

<body>
    <table id="foo-table" class="display" width="100%"></table>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

Предполагая, что вы используете его на боковой панели , я смог заставить его работать так:

Сценарий приложений 

function createSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('My custom sidebar').setWidth(300))
}

function getData() {
  return SpreadsheetApp.getActiveSheet().getDataRange().getValues();
}

HTML-страница 

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            console.log("ready!");
            google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
        });

        function initializeTable(data) {
            var aDataSet = data.slice(1); // all except header
            var head = []; // headers
            data[0].forEach(function(e) {
                head.push({
                    'sTitle': e
                });
            });
            $('#foo-table').dataTable({
                "aaData": aDataSet,
                "aoColumns": head
            });
        }
    </script>
</head>

<body>
    <table id="foo-table" class="display" width="100%"></table>
</body>

</html>

Надеюсь, это поможет!

0 голосов
/ 30 октября 2019

Chage с columns из ключа в dataTable для заголовков таблицы и chage $("#foo-table").DataTable в $("#foo-table").dataTable

var valuesFromIndexPage=[{"free-text-c1":"free-text-r1","c2":"r1","c3":"r1","c4":"r1","c5":"r1","c6":"r1","c7":"r1","c8":"r1","c9":"free-text-r1","c10":"free-text-r1"},{"free-text-c1":"free-text-r2","c2":"r2","c3":"r2","c4":"r2","c5":"r2","c6":"r2","c7":"r2","c8":"r2","c9":"free-text-r2","c10":"free-text-r2"}];

valuesFromIndexPage.shift();

function getData() {
  $(document).ready(function(){
    $("#foo-table").dataTable({
      destroy: true,
      scrollX: true,
      data: valuesFromIndexPage,
      columns: _.keys(valuesFromIndexPage[0]).map((key) => { return { "title": key, "data": key } })
    });
  }); 
}

getData()
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/> 
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</head>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...