差分

このページの2つのバージョン間の差分を表示します。

--- javascript:handsontable [2021/06/09 00:41] – [インスタンス生成時に最低限指定しなければならない引数] ともやん
+++ javascript:handsontable [2021/10/10 04:49] (現在) – [HandsOnTable の使い方] ともやん
@@ 行 4: / 行 4: @@
 ===== インストール =====
-github より最新ソースを取得する場合。\\
+<wrap em>jsDelivr CDN を利用する場合はインストールの必要はありません🥰</wrap>\\
+github より最新ソースを取得する。\\
 <WRAP prewrap 100%>
 <code>
@@ 行 55: / 行 56: @@
 ===== HandsOnTable の使い方 =====
-<WRAP prewrap 100% #mincode_long>
+<html>
-<code html>
+<iframe width="100%" height="360" src="//jsfiddle.net/tomoyan596/af54jpzy/39/embedded/result,html,js,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <title>HandsOnTable サンプル</title>
-  <script src="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.js"></script>
-  <link href="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.css" rel="stylesheet">
-  <style>
-    #lblHOTblVer {
-      vertical-align: bottom;
-    }
-  </style>
-</head>
-<body>
-  <div id="grid">
-  </div>
-  Handsontable Version: <label id="lblHOTblVer"></label>
-  <script>
-    'use strict';
-    const grid = document.getElementById('grid');
-    const lblHOTblVer = document.getElementById('lblHOTblVer');
-    lblHOTblVer.innerText = Handsontable.version;
-    new Handsontable(grid, {
-      data: [
-        ['佐藤', 10],
-        ['斎藤', 20],
-        ['🐎の💩', 100]
-      ],
-      width: 150,
-      height: 80,
-      licenseKey: 'non-commercial-and-evaluation'
-    });
-  </script>
-</body>
 </html>
-</code>
-</WRAP>
-==== インスタンス生成時に最低限指定しなければならない引数 ====
+==== インスタンス生成時に最低限指定しなければならない項目 ====
-<WRAP prewrap 100% #mincode>
+<WRAP prewrap 100% mincode>
 <code html>
-  <div id="grid">
+<div id="hoTable">
-  </div>
+</div>
 </code>
 <code javascript>
-    new Handsontable(grid, {
+'use strict';
-      data: [
+const hoTable = document.getElementById('hoTable');
-        ['佐藤', 10],
-        ['斎藤', 20],
+new Handsontable(hoTable, {
-        ['🐎の💩', 100]
+  data: [
-      ],
+    ['佐藤', 10],
-      width: 150,
+    ['斎藤', 20],
-      height: 80,
+    ['シュガーはホントに🐎の💩', 100]
-      licenseKey: 'non-commercial-and-evaluation'
+  ],
-    });
+  width: 300,
+  height: 80,
+  licenseKey: 'non-commercial-and-evaluation'
+});
 </code>
 </WRAP>
@@ 行 118: / 行 86: @@
 ご参考: [[http://www.fstcon.jp/?p=34723|サトウ、サイトウ、馬のクソ | ファーストコンサルティング株式会社]]\\
-===== jsDelivr を利用する =====
+===== jsDelivr CDN を利用する =====
-<WRAP prewrap 100% #mincode>
+<WRAP prewrap 100% mincode>
 <code>
-https://cdn.jsdelivr.net/npm/package@version/dist/file
+https://cdn.jsdelivr.net/npm/package[@version]/dist/file
 package=handsontable
-version=8.4.0
+[version=9.0.0]
 file=handsontable.full.*
 </code>
 <code html>
-  <script src="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
-  <link href="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
 </code>
 </WRAP>