JSpreadsheetグリッドの実装パターンと詳細設定ガイド

静的データセットによるグリッド初期化

クライアントサイドに保持する固定データを用いた基本構成を示します。サーバーサイド依存を排除し、純粋なDOM要素に対してライブラリをバインドする標準的なパターンです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSpreadsheet基本実装</title>
  <link rel="stylesheet" href="./assets/css/jexcel.css" />
  <link rel="stylesheet" href="./assets/css/jsuites.css" />
  <script src="./assets/js/jexcel.js"></script>
  <script src="./assets/js/jsuites.js"></script>
</head>
<body>
  <div id="spreadsheetRoot"></div>
  <script>
    // 固定データセットの定義
    const baseDataset = [
      ['Tesla Model 3', 2021, 4500000],
      ['BMW iX3', 2022, 6200000],
      ['Mercedes EQC', 2020, 5800000],
      ['Audi e-tron', 2023, 7100000]
    ];

    jspreadsheet(document.getElementById('spreadsheetRoot'), {
      data: baseDataset,
      columns: [
        { title: '車両型番', width: '220px' },
        { title: '製造年', width: '100px' },
        { title: '基準価格', width: '140px', readOnly: true }
      ],
      search: true,
      filters: true,
      pagination: 5,
      paginationOptions: [5, 10, 25],
      tableWidth: '100%',
      tableHeight: '380px',
      striped: true,
      sortable: true,
      sortOrder: 'asc',
      editable: true,
      allowExport: true,
      async: true
    });
  </script>
</body>
</html>

外部リソースからの非同期データ読み込み

データベースやREST APIからデータを動的に取得する場合、dataプロパティの代わりにurlプロパティを設定します。ライブラリが内部的にフェッチ処理を実行し、グリッドに結果をレンダリングします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./assets/css/jexcel.css" />
  <link rel="stylesheet" href="./assets/css/jsuites.css" />
  <script src="./assets/js/jexcel.js"></script>
  <script src="./assets/js/jsuites.js"></script>
</head>
<body>
  <div id="gridWrapper"></div>
  <script>
    jspreadsheet(document.getElementById('gridWrapper'), {
      url: '/api/v1/inventory/list',
      columns: [
        { title: '商品コード', width: '120px', align: 'center' },
        { title: '製品名称', width: '250px' },
        { title: '在庫数', width: '100px', type: 'number' }
      ],
      search: true,
      filters: true,
      pagination: 10,
      paginationOptions: [10, 20, 50],
      tableWidth: '100%',
      tableHeight: '450px',
      striped: true,
      sortable: true,
      editable: true,
      async: true
    });
  </script>
</body>
</html>

主要な動作パラメータ一覧

グリッドの振る舞いを制御するための設定項目を以下の通り分類できます。各プロパティは初期化時の設定オブジェクトに直接記述します。

  • search: 全局検索バーの表示可否
  • filters: カラムヘッダーのフィルタ機能の有効化
  • pagination: 1ページあたりの表示行数
  • paginationOptions: ユーザーが選択可能なページサイズ配列
  • tableWidth / tableHeight: コンテナの寸法指定
  • striped: 交互行背景色の適用
  • sortable / sortOrder: 列ソート許可とデフォルト順序
  • editable: セル内インライン編集の許可
  • allowExport: CSV/Excelエクスポート機能の提供
  • toolbar: 標準ツールバーの表示
  • tabs: 複数シート対応の有効化
  • async: データロードの非同期処理フラグ

右クリックメニューのローカライゼーション対応

デフォルトの英語表記を日本語に置き換える場合、初期化オプション内にtextオブジェクトを定義し、対象キーの文字列を上書きします。

text: {
  copy: 'クリップボードにコピー',
  paste: '貼り付け',
  insertANewRowBefore: '上方に行を挿入',
  insertANewRowAfter: '下方に行を挿入',
  deleteSelectedRows: '選択行を削除',
  saveAs: '別名保存',
  noRecordsFound: '該当データなし',
  showingPage: '{0}ページ / 全{1}ページ',
  show: '表示件数',
  entries: '件',
  insertANewColumnBefore: '左側に列を挿入',
  insertANewColumnAfter: '右側に列を挿入',
  renameThisColumn: '列名を変更',
  deleteSelectedColumns: '選択列を削除',
  orderAscending: '昇順で並べ替え',
  orderDescending: '降順で並べ替え',
  editComments: 'コメントを編集',
  addComments: 'コメントを追加',
  comments: 'コメント',
  clearComments: 'コメントをクリア',
  areYouSureToDeleteTheSelectedRows: '選択した行を削除してもよろしいですか？',
  areYouSureToDeleteTheSelectedColumns: '選択した列を削除してもよろしいですか？',
  Search: '検索',
  invalidMergeProperties: '無効なセル結合',
  cellAlreadyMerged: '既に結合されています',
  noCellsSelected: 'セルが選択されていません'
}

日付入力カレンダークリックの動作制御

カレンダー型カラムの表示形式や操作性をカスタマイズするには、optionsプロパティを使用します。フォーマット指定やUI要素の表示制御が可能です。

options: {
  format: 'YYYY/MM/DD',
  readonly: 0,
  today: 1,
  time: 0,
  resetButton: true,
  placeholder: '日付を選択...',
  months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  weekdays: ['日', '月', '火', '水', '木', '金', '土'],
  weekdays_short: ['日', '月', '火', '水', '木', '金', '土'],
  value: null,
  onclose: null,
  onchange: null,
  fullscreen: false
}

列スキーマ定義とデータ型マッピング

各カラムの表示名、ソート可否、データ型、幅などをcolumns配列で定義します。チェックボックス型やカレンダー型など、専用のレンダラーを適用することも可能です。

columns: [
  {
    title: '選択',
    type: 'checkbox',
    width: '60px',
    align: 'center'
  },
  {
    field: 'recordId',
    title: 'ID',
    sortable: true,
    align: 'center',
    width: '80px'
  },
  {
    field: 'deliveryDate',
    title: '納期',
    type: 'calendar',
    align: 'center',
    width: '130px',
    options: { format: 'YYYY/MM/DD' }
  },
  {
    field: 'category',
    title: '分類',
    type: 'dropdown',
    source: ['A類', 'B類', 'C類', 'D類'],
    align: 'left',
    width: '120px'
  },
  {
    field: 'amount',
    title: '合計金額',
    type: 'number',
    align: 'right',
    width: '150px',
    footerFormatter: 'total'
  }
]

タグ: jspreadsheet javascript spreadsheet-ui frontend-development data-grid

5月21日 04:36 投稿

ホットタグ

©2026 異端開発室