はじめに

HandsontableというJavaScriptライブラリを使うと、WEBでExcelのようなスプレッドシートライクな入力が可能になります。が、更新方法が分からなかったので、いろいろ調べてみました。

なお、JavaScriptについては全くの初学者なので、おかしいところも多々あると思いますが、ご笑覧いただければ幸いです。

できたもの

データベース管理システム（PostgreSQL）からデータを取得し、Handsontableを使ってテーブルを表示。

ブラウザ上でデータを更新し(garlicをAPPLEへ)、上書きボタンをクリックすると…

Ajax（非同期通信）を使って、ポスグレ上のデータを更新します。

念のため、管理サイトでも更新を確認。

準備

概要は以下の通りです。

django admin startproject conf .
タイムゾーン、言語の設定
STATICFILES_DIRSの設定
TEMPLATESの設定
DATABASE(PostgreSQL)の設定

アプリケーション作成

$ python manage.py startapp hot

アプリケーションを作成します。

conf/settings.py

INSTALLED_APPS = [
    'hot.apps.HotConfig',
    # 以下省略
]

次にsettings.pyにアプリを登録します。

conf/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('hot/', include('hot.urls')
    # 以下省略
]

confフォルダのurls.pyを修正します。

hot/urls.py

from django.urls import path
from  . import views


app_name = 'hot'

urlpatterns = [
    path('', views.Top.as_view(), name='top'),
    # path('ajax_update/', views.ajax_update, name='ajax_update')
]

hotフォルダ内にurls.pyを作成し、上記のように書きますクラスベースビューのTopはテーブルを表示するページで、関数ビューのajax_updateはデータを上書きするためのページです。Ajaxなので、ページ遷移はしません。

モデルを作成

hot/models.py

from django.db import models


class Merchandise(models.Model):
    merchandise = models.CharField('merchandise', max_length=255)
    price = models.IntegerField('price')
    origin = models.CharField('origin', max_length=255)

    def __str__(self):
        return self.merchandise

hot/admin.py

from django.contrib import admin
from .models import Merchandise

admin.site.register(Merchandise)

$ python manage.py makemigrations hot
$ python manage.py migrate
$ python manage.py createsuperuser

モデルを作成します。商品名と価格と生産地をデータとしました。管理サイトへの登録、マイグレーション、スーパーユーザーの作成を忘れずに。

適当に三つほどデータを入れておきます。

テーブルを表示するページ(Top)を作成

hot/views.py

import psycopg2
from django.http.response import JsonResponse
from django.shortcuts import render
from django.views import generic
from .models import Merchandise


class Top(generic.TemplateView):
    template_name = 'table/top.html'

    # contextをテンプレートファイルに渡す。
    def get_context_data(self, **kwargs):
        # はじめに継承元のメソッドを呼び出す
        context = super().get_context_data(**kwargs) 
        
        # データベースに接続→データ取得→切断
        connect_str  = ''
        connect_str += "dbname=test1 "
        connect_str += "user=postgres "
        connect_str += "password=password"
        conn = psycopg2.connect(connect_str)
        cur = conn.cursor()
        cur.execute('select * from hot_merchandise order by id')
        table = cur.fetchall()
        cur.close()
        conn.close()

        # handsontable用のデータを作成
        key = ('id', 'marchandise', 'price', 'origin')
        data = []
        for record in table:
            data.append(dict(zip(key, record)))
        columns = []
        for k in key:
            columns.append(dict(data=k))
        colHeaders = list(key)

        context['data'] = data
        context['columns'] = columns
        context['colHeaders'] = colHeaders
        return context

Topページのビューを作成します。データベースからデータを取得し、Handsontable用にかたちを整えて、テンプレートファイルに渡します。テーブルの名称はhot_merchandiseとなっています。アプリ名小文字_モデル名小文字になるみたいです。

参考

# table(整形前のデータ）
[(1, 'carrot', 150, 'kanagawa'), (2, 'garlic', 200, 'aomori'), (3, 'onion', 300, 'hyogo')]

# data
[
    {'id': 1, 'merchandise': 'carrot', 'price': 150, 'origin': 'kanagawa'}, 
    {'id': 2, 'merchandise': 'garlic', 'price': 200, 'origin': 'aomori'}, 
    {'id': 3, 'merchandise': 'onion', 'price': 300, 'origin': 'hyogo'}
]

# columns
[
    {'data': 'id'}, 
    {'data': 'merchandise'}, 
    {'data': 'price'}, 
    {'data': 'origin'}
]

# colHeaders
['id', 'merchandise', 'price', 'origin']

ちなみに、handsontableに渡すデータの形状は上記のような感じです。

base.html

{% load static %}
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- handsontable -->
    <script src="{% static 'hot/jquery.min.js' %}"></script>
    <script src="{% static 'hot/handsontable.full.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'hot/handsontable.full.min.css' %}">

    <title>HandsontableでAjax</title>
  </head>
  <body>
    <!--  ナビゲーションバー -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="{% url 'home:top' %}">Test</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'home:top' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'table:top' %}">Table</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'hot:top' %}">HOT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container">
        {% block content %}{% endblock %}
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- jQueryはslim版じゃないやつを使う。slimはajaxに対応していないため。 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    {% block extrajs %}{% endblock %}
  </body>
</html>

ベースとなるテンプレートファイルを作成します。handsontableのjsやcssはCDNも公開されています。この記事では触れていないアプリ(home, table)へのリンクもありますが、そちらは無視してください。

hot/top.html

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <h3 class="mt-3">Table</h3>
    <div id="grid"></div>
    <div class="mt-1">
        <button type="button" id="btn_update_data" class="btn btn-primary">上書き</button>
    </div>
{% endblock %}

{% block extrajs %}
    <script>
        'use strict';

        // 変数の定義
        var data = {{ data | safe }};
        var columns = {{ columns | safe }};
        var colHeaders = {{ colHeaders | safe }};

        // テーブルを表示
        var container = document.getElementById('grid');
        var hot = new Handsontable(container, {
            data: data,
            columns: columns,
            columnSorting: true,
            rowHeaders: true,
            colHeaders: colHeaders,
            filters: true,
            dropdownMenu: true
        });
    </script>
{% endblock %}

top.htmlはbase.htmlをextendsします。block contentには見出しとテーブルと上書きボタンを設置しています。テーブルを書き込むdiv要素のid属性を'grid'としています。それを受けてextrajsブロックでgetElementById('grid')としています。

ブラウザ上ではこのような画面が表示されます。この時点でブラウザ上でデータは編集可能ですが、データベースの更新はできないので、リロードすると元に戻ります。

↑ブラウザ上では編集できますが、更新はできません↓

↑リロードすると元に戻ってしまいます。

データを上書きする

データを上書き更新できるようにしたいと思います。おおまかな手順としては、テーブルの下に設置した上書きボタンを押下すると、その時点のデータを取得し、データベースを更新するようにしたいと思います。

hot/top.html

{% block extrajs %}
    <script>
        // 省略

        // Ajaxでデータベースを更新
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        // ↑　ここまではおまじない

        $('#btn_update_data').on('click', function(event){
            event.preventDefault();

            // ボタンをクリックした時点のデータを取得
            var data_hot = hot.getData();
            console.log(data_hot);

            // Ajax実行
            $.ajax({
                'url': '{% url "hot:ajax_update" %}',
                'type': 'POST',
                'data': {
                    'temp_data': 'aaa',
                    'str_hot': JSON.stringify(data_hot),
                    'str_col': JSON.stringify(columns)
                },
                'dataType': 'json'
            })
            .done(function(data) {
                window.alert("done!!");
            })
            .fail(function(){
                window.alert("error!!");
            });
        });
    </script>
{% endblock %}

hot/top.htmlのextrajsブロックにスクリプトを追記します。前半はおまじないらしく、よくわかりません…。

$('#btn_update_data').on('click', function(event)以降がデータの上書きです。上書きボタンがクリックされたら、データを取得します。次にhot:ajax_upで指定した関数を実行するのですが、その時にdataを渡します。dataの中身は'temp_data'と'str_hot'と'str_col'です。'temp_data'は適当なデータです。'str_hot'はテーブルのデータをJSON形式に変換したものです。今回はJavaScript(Handsontable)からPythonへデータを渡すのですが、いろいろ調べてなんとかこの形にたどり着きました。（もっと良い方法があったら知りたい…）

hot/urls.py

app_name = 'hot'

urlpatterns = [
    path('', views.Top.as_view(), name='top'),
    path('ajax_update/', views.ajax_update, name='ajax_update')  # 追加
]

top.htmlにhot:ajax_updateというURLを指定しましたが、その様なURLは無いので作ります。次にviews.pyにajax_updateという関数ビューを作ります。

hot/views.py

def ajax_update(request):
    # POSTされたデータを受け取る。この時点では文字列。
    str_hot = request.POST.get('str_hot')  # リストっぽい文字列[[1, "apple", 200, "aomori"], ...]
    str_col = request.POST.get('str_col')  # リストっぽい文字列[{'data':'id'}, {'data':'merchandise}, ...]
    
    # 文字列をリストに変換
    exec('data_hot={}'.format(str_hot), globals())
    exec('data_col={}'.format(str_col), globals())
    lis_col = []
    for elm in data_col:
        lis_col.append(elm['data'])

    # 辞書を作成
    # [{'id':1, 'marchandise'='apple', 'price':100, 'origin':"aomori"}, {...}, ...]
    lis_dic = []
    for row in data_hot:
        lis_dic.append(dict(zip(lis_col, row)))


    # データベースに接続
    connect_str  = ''
    connect_str += "dbname=test1 "
    connect_str += "user=postgres "
    connect_str += "password=password"
    conn = psycopg2.connect(connect_str)
    cur = conn.cursor()

    # データ更新
    for dic in lis_dic:
        id = dic['id']
        sql = 'UPDATE hot_merchandise SET'
        for k,v in dic.items():
            if k != 'id':
                if type(v) is str:
                    sql += f" {k}='{v}',"
                elif type(v) is int or type(v) is float:
                    sql += f" {k}={v},"
        sql = sql[:-1]  # 末尾のカンマを削除
        sql += f" where id={id};"
        print(sql)
        # 参考: "UPDATE hot_merchandise SET marchandise='orange', price=200, origin='aomori' WHERE id=1"
        cur.execute(sql)
        conn.commit()

    # データベース切断
    cur.close()
    conn.close()

    # レスポンスを返さないといけないらしいので、適当に…
    return JsonResponse({'ret': 'return'})

いよいよデータベースの更新です。いろいろ書いてありますが、やっていることはデータを受け取り、形を整えて、SQL文を生成し、実行の繰り返しです。ポイントは、ajaxで送られてきたデータは一見リストの様な形式をしていますが文字列です。なので、それをリストに戻してやる必要があります。いろいろ試した結果exec関数を使うことになりました。（もっと良い方法があったら知りたい…切実に…）

実行してみる

ブラウザ上でデータを更新し、上書きボタンをクリックします。

データの更新がうまくいけば、このようなウィンドウが開きます。ページ遷移はしません。

前回はリロードすると元に戻ってしまいましたが、今回は大丈夫です。

管理サイト上でもデータベースが更新されています！

おわりに

なんとか動いてよかった…。あやふやなところがたくさんあるので、少しずつ勉強していきたいと思います。