ブログ - JavaScript

この a-table.js は、弊社で開発している a-blog cms の中で利用するために作られた「テーブル編集用のJavaScript」を、より多くの人に利用してもらえるようにライブラリ化したものです。

ExcelライクなUIで直感的に操作でき、テーブルのHTML出力が可能です。テーブルが書きかわる度にHTMLを取得できるのでCMSの入力インターフェースとしてもご利用いただけると思います。

目次

  1. 特徴
  2. 使い方
  3. デモ
  4. メソッド
  5. オプション
  6. ダウンロード
  7. リンク

 

特徴

  • HTMLやマークダウンへの出力機能
  • ExcelやGoogle Spreadsheetからのコピーペースト対応
  • IE9までのブラウザ対応
  • ソース入力モードで直接入力可能

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" href="https://unpkg.com/a-table@1.1.2/fonts/a-table-icon.css">
<link rel="stylesheet" href="https://unpkg.com/a-table@1.1.2/css/a-table.css">
<script src="https://unpkg.com/a-table@1.1.2/build/a-table.min.js"></script>

また、npmを使ったダウンロードも可能です

npm install a-table
var aTable = require('a-table');
new aTable('.js-table',{lang:'ja'});

デモ

デモ1

ベーシックな使い方

See the Pen a-table.js demo by appleple (@appleple) on CodePen.

デモ2

テーブルが編集される度に、textareaの内容を更新する

See the Pen a-table.js demo by appleple (@appleple) on CodePen.

メソッド

テーブルを外部から操作したい場合もあると思います。a-table.jsではJavaScriptを介してテーブルを編集するメソッドが幾つか用意されています。

var table = new aTable('.js-table',{lang:'ja'});
table.insertRowAbove(1);
メソッド名 説明
getTable() テーブルのHTMLを取得する
getMarkdown() テーブルのマークダウンを取得する
removeRow(n) n行目を削除する
removeCol(n) n列目を削除する
selectRow(n) n行目を選択する
selectCol(n) n列目を選択する
mergeCells() 選択したセルを結合する
splitCell() 選択したセルの結合を解除する
changeCellTypeTo(type) 選択したセルのタイプを変える(td/th)
changeCellClass(className) 選択したセルのクラス名を変える
align(dir) 選択したセルの配置を変える(left/center/right)
insertRowAbove(n) n行目の上に1行追加する
insertRowBelow(n) n行目の下に1行追加する
insertColRight(n) n列目の右に1列追加する
insertColLeft(n) n行目の左に1列追加する
undo() 1つ前の状態に戻す

オプション

a-table.jsには以下のようなオプションが用意されており、テーブルのUIを変更することが可能です。

{
  showBtnList: true,/* ボタンリストを表示するかしないか*/
  lang: 'en', /*UIの言語(英語/日本語)*/
  mark: {
    align: {
      default: 'left', /*(テーブルのセルのデフォルトの配置)*/
      left: 'left', /*(左寄せの際にセルに付与されるクラス)*/
      center: 'center', /*(中央寄せの際にセルに付与されるクラス)*/
      right: 'right' /*(右寄せの際にセルに付与されるクラス)*/
    },
    btn: {
      group: 'a-table-btn-list', /* ボタンリストに付与されるクラス */
      item: 'a-table-btn', /*ボタンリストのボタンに付与されるクラス */
      itemActive: 'a-table-btn-active' /*ボタンが押された状態の時に付与されるクラス */
    },
    icon: {
      alignLeft: 'a-table-icon a-table-icon-left', /*左寄せアイコンに付与されるクラス*/
      alignCenter: 'a-table-icon a-table-icon-center', /*中央寄せアイコンに付与されるクラス*/
      alignRight: 'a-table-icon a-table-icon-right',/*右寄せアイコンに付与されるクラス*/
      undo: 'a-table-icon a-table-icon-undo', /*undoアイコンに付与されるクラス*/
      merge: 'a-table-icon a-table-icon-merge02', /*mergeアイコンに付与されるクラス*/
      split: 'a-table-icon a-table-icon-split02', /*splitアイコンに付与されるクラス*/
      table: 'a-table-icon a-table-icon-th02', /*tableアイコンに付与されるクラス*/
      source: 'a-table-icon a-table-icon-source01', /*sourceアイコンに付与されるクラス*/
      td: 'a-table-icon a-table-icon-td03', /*tdアイコンに付与されるクラス*/
      th: 'a-table-icon a-table-icon-th02' /*thアイコンに付与されるクラス*/
    },
    selector: {
      self: 'a-table-selector', /*セレクターに付与されるクラス*/
      option:[ /*セレクタのオプション*/
          {label:'red',value:'red'}, /*ラベル:red セルに付与されるクラス:red*/
          {label:'blue',value:'blue'}, /*ラベル:blue セルに付与されるクラス:blue*/
          {label:'yellow',value:'yellow'} /*ラベル:yellow セルに付与されるクラス:yellow*/
        ]
    }
  }
}

ダウンロード

ダウンロードはこちらから行えます。

a-table.js をダウンロード

リンク

appleple.github.io/a-table.js/


github.com/appleple/a-table.js



お電話でのお問い合せはこちら(10時〜19時)

052-485-8577