2

我正在尝试创建一个网站，用户可以在其中查找一组资源，例如门户网站或 JSTOR 等数据库。我正在使用 Weebly；这个网站最终会被交给不太懂电脑的人，所以我试图让事情变得简单（并且免费，在可行的情况下）。

我的想法是使用 Google 电子表格/表格来处理每个单独资源（标题、作者、类型、主题、国家等）的数据的输入和存储，然后找到一些创建搜索功能的方法，可以放置在网站上。任何用户都可以到达该站点，输入他们想要查找的任何标准，并且将列出数据库中的任何资源以供用户进一步调查。用户不会向电子表格添加数据；只查询它的数据。

我的第一个问题是这样的脚本/安排是可能的，它可以嵌入到网站页面中吗？我的第二个问题是最好的方法是什么？

4

1 回答 1

4

是的，这当然是可能的，但可以通过多种方式实现。

您可以采用的一种方法是将电子表格中的所有数据以 JSON 格式检索，并将其作为 HTML 表添加到 DOM。然后你可以使用一个不错的插件，比如dataTables，它有一个很好的原生搜索功能。我将在下面给出一个基本示例。

要检索数据，您可以使用Google 的电子表格 JSON API。下面是一个基本示例。

<script src="http://spreadsheets.google.com/feeds/cells/*ID*/*WS*/public/values?alt=json-in-script&amp;callback=*FN*"></script>
  • 其中ID是电子表格的长 ID。
  • 其中WS是工作表编号，例如 1、2、3 等。
  • 其中FN是您要调用的函数。在我下面的函数中，我使用 importGSS

然后我编写了以下脚本，将数据添加到 HTML 表中。它首先将第一行添加到一个<thead>部分，然后将其余部分添加到该<tbody>部分。

function cellEntries(json, dest) {
    var table = document.createElement('table');
    var thead = document.createElement('thead');
    var tbody = document.createElement('tbody');
    var thr;
    var tr;
    var entries = json.feed.entry;
    var cols = json.feed.gs$colCount.$t;

    for (var i=0; i <cols; i++) {
        var entry = json.feed.entry[i];
        if (entry.gs$cell.col == '1') {
            if (thr != null) {
                tbody.appendChild(thr);
            }
            thr = document.createElement('tr');
        }
        var th = document.createElement('th');
        th.appendChild(document.createTextNode(entry.content.$t));
        thr.appendChild(th);
    } 
    for (var i=cols; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];
        if (entry.gs$cell.col == '1') {
            if (tr != null) {
                tbody.appendChild(tr);
            }
            tr = document.createElement('tr');
        }
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(entry.content.$t));
        tr.appendChild(td);
    } 
    $(thead).append(thr);
    $(tbody).append(tr);
    $(table).append(thead);
    $(table).append(tbody);
    $(dest).append(table);
    $(dest + ' table').dataTable();
}

然后，您可以使用 ... 回调函数，#Destination您<div>要将 HTML 表添加到哪里。 

function importGSS(json){
   cellEntries(json, '#Destination');
};

全部完成后，您将看到类似于以下屏幕截图的内容，顶部是最终结果，底部是原始电子表格。我已经编辑了一些信息。我希望这对您有所帮助。

在此处输入图像描述

于 2013-04-15T20:18:22.823 回答