JavaScript スプレッドシートを使うには？

/ PHP / By
ショコラ
ショコラ

JavaScript スプレッドシートを使うには？

無料なのでjexcelV4を使ってみる。

もっさん先輩
もっさん先輩

①HTML の head に JavaScript と css を含める。

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css">
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css">

②スプレッドシートを配置する位置を決める。私の場合は livewire で使用するので wire:ignore をつけました。

<div id="spreadsheet" wire:ignore></div>

③JavaScript部分は↓これです。これだけでスプレッドシートが表示できます。

var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
  data:[
    ['もっさんの剣','1000',2000,1,'切れ味ヤバイ'],
    ],
  columns: [
    { type: 'text', title:'商品名', width:200 },
    { type: 'numeric', title:'買取金額（税込み）', width:100 },
    { type: 'numeric', title:'販売金額（税抜き）', width:100 },
    { type: 'numeric', title:'数量', width:100 },
    { type: 'text', title:'販売コメント', width:300 },
  ],
  tableOverflow: true,      // スクロールバー表示
  tableHeight: '300px',     // 縦
  tableWidth: '800px',      // 横
  allowInsertColumn: false, // 列の追加
  allowDeleteColumn: false, // 列の削除
  minDimensions: [5,100],   // 列、行
  defaultRowHeight: 20,     // 行の高さ
})

Livewireでボタンをクリックしたときにデータを送るなら、↓こちらです。

<button type="button" class="ui button" wire:click="soushin_btn(spreadsheet.getData())">
  送信
</button>

以上

関連記事

Scroll to Top