2

ユーザーが一連のリソース、ポータルのようなもの、または JSTOR のようなデータベースを探しに来ることができる Web サイトを作成しようとしています。Weebly を使用しています。このウェブサイトは最終的にコンピュータをよく知らない人に引き継がれるので、私は物事をシンプルに保つようにしています(可能な場合は無料で) .

私の考えは、Google スプレッドシート/フォームを使用して、個々のリソース(タイトル、作成者、タイプ、トピック、国など)ごとにデータの入力と保存を処理し、検索機能を作成する方法を見つけることでした。ウェブサイトに掲載。任意のユーザーがサイトにアクセスし、探したい条件を入力すると、データベース内のリソースが一覧表示され、ユーザーがさらに調査できるようになります。ユーザーはスプレッドシートにデータを追加しません。データを照会するだけです。

私の最初の質問は、そのようなスクリプト/配置が可能で、ウェブサイトのページに埋め込むことができるか? 私の2番目の質問は、最善のアプローチは何ですか?

4

1 に答える 1

4

はい、これは確かに可能ですが、さまざまな方法で実現できます。

これを使用して実行できる 1 つのアプローチは、スプレッドシートからすべてのデータを 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 に答える