Question

我正在使用google-sheets-to-html（https://github.com/crunchprank/google-sheets-to-html）将公共Google表格显示为html。

google.load('visualization', '1', {
    packages: ['table']
});
var visualization;

function drawVisualization() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1O-cLiR1B4-pvDmPN4QSqdxgOo6XjfmNps97E0-4Os5I/edit?usp=sharing');
    query.setQuery('SELECT A, B, C, D, E, F, G order by A asc label A "Date de parution", B "Stage ou emploi", C "Description", D "Employeur", E "Lieu", F "URL ou contact", G "Date limite"');
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    visualization = new google.visualization.Table(document.getElementById('table'));
    visualization.draw(data, {
        allowHtml: true,
        legend: 'bottom'
    });
}
google.setOnLoadCallback(drawVisualization);

/***************************
    Site Design CSS
***************************/

#box {
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
  width: auto;
  padding: 2em;
  color: #333;
  text-align: center;
  overflow: visible;
}

h1 {
/*  font-family: 'Open Sans', sans-serif;*/
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
/*  text-transform: uppercase;*/
  font-size: 2.8em;
  line-height: 1em;
  letter-spacing: 0px;
  margin: 1rem 0 0 10;
  padding-bottom: 5px;
}

p {
/*  font-family: 'Open Sans', sans-serif;*/
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 1em;
  line-height: 1.65em;
  margin: 1em auto 1em auto;
  padding: 0;
/*  width: 23em;*/
}

p.small {
  font-size: .7em;
  letter-spacing: 0.1em;
}

a,
a:visited,
a:hover {
  color: #333;
  font-weight: 600;
}


/***************************
    Google Table CSS
***************************/

.google-visualization-table-tr-even,
.google-visualization-table-tr-even td,
.google-visualization-table-tr-even-nonstrict {
  background-color: #f2f1ef !important;
  color: #000 !important;
}

.google-visualization-table-tr-odd,
.google-visualization-table-tr-odd td,
.google-visualization-table-tr-odd-nonstrict {
  background-color: #e9e8e6 !important;
  color: #000 !important;
}

/*.google-visualization-table-tr-sel,*/
/*.google-visualization-table-tr-sel td,*/
/*.google-visualization-table-tr-sel-nonstrict {*/
/*  background-color: #7f7a70 !important;*/
/*  color: #fff !important;*/
/*}*/

.google-visualization-table-tr-over,
.google-visualization-table-tr-over td,
.google-visualization-table-tr-over-nonstrict {
  background-color: #76b564 !important;
  color: #fff !important;
}

.google-visualization-table-td,
.google-visualization-table-th {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  border: 1px solid #FFF !important;
  color: #fff !important;
  height: 50px;
  padding: 50px;
  text-align:left;
  margin-left:10px; 
  margin-right:10px; 
  margin-top: 10px;
  font-size: 1.05em;
/*  letter-spacing: 0.1em;*/
}

.google-visualization-table-tr-head,
.google-visualization-table-tr-head td,
.google-visualization-table-tr-head-nonstrict {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  background-color: #3f3c36 !important;
  background-image: none !important;
  color: #fff !important;
}

.google-visualization-table .gradient {
  background-image: none !important;
}


/***************************
    Text Selection CSS
***************************/

::-moz-selection {
  color: #fff;
  background: #333;
}

::selection {
  color: #fff;
  background: #333;
}

<!DOCTYPE html>

<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <title>...</title>
  <meta content="Online song request list for {{STREAMER}}" name="description">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="favicon.ico" rel="shortcut icon">
<!--   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500,700,900,900i" rel="stylesheet">

  <link href="css/normalize.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <script src="https://www.google.com/jsapi" type="text/javascript"></script>
</head>

<body id="background">
  <div id="box">
    <script src="js/google-sheets-html.js" type="text/javascript"></script>
    <div id="table">
    </div>
  </div>
</body>
</html>

在原始Google表格（https://docs.google.com/spreadsheets/d/1O-cLiR1B4-pvDmPN4QSqdxgOo6XjfmNps97E0-4Os5I/edit#gid=0）中，列A和G应该是日期，但仅在JS导入后才显示为字符串。

如何在html表中将这些列显示为日期，以便它们按时间顺序排列（而不是按字母数字顺序排列）？

应该将其作为“ query.setQuery（...）”中的sone参数来完成还是应该在html文档中处理的html问题？

HTML表格中显示的Google表格单元格的格式

0 个答案: