jExcelでスプレッドシートをwebアプリに仕込む

以前チョロっと眺めていたjExcelを使ってウェブアプリに冷凍庫管理表を作ってみる。
javascriptなのでじつはあまり得意ではない。
しかし使い方は結構簡単そうだ。（実は実用するには結構ハードルが高いことは後でわかる）
設置方法は基本HTMLファイルにjavascriptを仕込むだけだ。
例によってFlaskで作っているサイトなのでtemplateファイルに書き込むことになる。
目標としてはexcelのシートがサイトに張り付いていて、項目を随時書き込んだり消したり、書き換えたり、ができるようになることなので
htmlに表を書き込まず外部のテキスト(csv)を読み込んで表示させる仕様とする。

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Freezer list{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
{% endblock %}

{% block page_top %}
<center>
<h2>-80 freezer sample list</h2>
</center>
<div class="row">
  <div class="col-xs-2">
  </div>
  <div class="col-xs-8"> 
    <div id="freezer_list"></div> 
    <form method="post">
      <button type="button" id="save" class="btn btn-primary">Save sheet</button>
  </form>
 
</div>
  <div class="col-xs-2">
  </div>
</div>

{% endblock %}
{% block scripts %}
{{ super() }}
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
 jspreadsheet(document.getElementById('freezer_list'), {
     csv: '/static/user/freezer/freezer.csv',
     tableOverflow:true,
     csvHeaders:false,
     columns:[
       {title:'Place', type:'dropdown', width:100, source:['Rack1', 'Rack2', 'Rack3', 'Drawer', 'Upper_area', 'Lower_area']},
       {title:'Position', type:'dropdown', width:150, source:['A1', 'A2', 'A3', 'A4', 'A5','B1', 'B2', 'B3', 'B4', 'B5','C1', 'C2', 'C3', 'C4', 'C5','C1', 'C2', 'C3', 'C4', 'C5', 'D1', 'D2', 'D3', 'D4', 'D5', 'Basket1','Basket2','Basket3','Basket4','Free' ]},
       {title:'User', type:'text', width:100},
       {title:'Contents', type:'text', width:300},
       {title:'Date', type:'calendar', options:{format:'YYMMDD'}, width:100}, 
       {title:'Comments', type:'text', width:300}
     ]
 });
 </script>
{% endblock %}

テンプレートはずばりこんな感じ。
そしてこれをviewsのスクリプトから読み込む。
f:id:k-kuro:20210401141432p:plain
データはcsvで/static/user/freezer/freezer.csvに置いた。
するとたしかにこんな感じに表示はできる。

ここからが問題。
これで表示できるし、たしかに編集も機能する。ただ、データをサーバにセーブするのがこのままじゃできない。
こっからはAjaxの出番なんだな。これがまだ使いこなせてなくて、今日はここまで。

追記
表示されている内容をJSON形式で読み取ることができた

      <input type="button" onclick="savedata()"
      value="save data">
      <textarea id='saveData' style='width:800px;height:100px;'></textarea>

  <script>
    function savedata(){
      document.getElementById('saveData').value =
        JSON.stringify(document.getElementById('freezer_list').jexcel.getJson());
    }
  </script>

f:id:k-kuro:20210402162642p:plain