Rubyフレームワーク「Ruby on Rails」でWijmoを使う

rails new wijmo-rails-app -j webpack

npm install -D style-loader css-loader

npm install @grapecity/wijmo.purejs.all

rails g controller wijmo index

<div id="flexGrid" style="height: 600px;"></div>

import "@hotwired/turbo-rails"
import "./controllers"
import '@grapecity/wijmo.styles/wijmo.css';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
import * as wjGrid from '@grapecity/wijmo.grid';
let flexGrid = new wjGrid.FlexGrid('#flexGrid', {
    itemsSource: getData(),
    columns: [
        { binding: 'id', header: 'ID', width: 80},
        { binding: 'product', header: '商品名', width: 200},
        { binding: 'date', header: '受注日' },
        { binding: 'amount', header: '金額', format: 'c0' }
    ]
});
function getData() {
    return [
        { id: 15, product: 'ピュアデミグラスソース', date: '2022/01/10', amount: 6000 },
        { id: 17, product: 'だしこんぶ', date: '2022/01/08', amount: 14500 },
        { id: 18, product: 'ピリカラタバスコ', date: '2022/01/12', amount: 4000 },
        { id: 84, product: 'なまわさび', date: '2022/01/21', amount: 8000 },
    ];
}

const path    = require("path")
const webpack = require("webpack")

module.exports = {
  mode: "production",
  devtool: "source-map",
  entry: {
    application: "./app/javascript/application.js"
  },
  output: {
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
    path: path.resolve(__dirname, "app/assets/builds"),
  },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ],
  },
}

npm run build

rails s

import "@hotwired/turbo-rails"
import "./controllers"
import '@grapecity/wijmo.styles/wijmo.css';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjCore from '@grapecity/wijmo';

let cv = new wjCore.CollectionView();
cv.trackChanges = true;
let flexGrid = new wjGrid.FlexGrid('#flexGrid', {
    itemsSource: cv,
    allowAddNew: true,
    allowDelete: true,
    autoGenerateColumns: false,
    columns: [
        { binding: 'id', header: 'ID', width: 80 },
        { binding: 'billno', header: '請求書番号' },
        { binding: 'slipno', header: '伝票番号' },
        { binding: 'customerid', header: '顧客番号', width: 80 },
        { binding: 'customername', header: '顧客名', width: 250 },
        { binding: 'products', header: '商品名', width: 250  },
        { binding: 'unitprice', header: '単価', width: 100 , format: 'c0' },
        { binding: 'number', header: '数量', width: 100 },
        { binding: 'date', header: '受注日', width: 180 , dataType: 'Date', format: 'yyyy-MM-dd' }
    ]
});
・・・（中略）

・・・（中略）
let url = 'http://127.0.0.1:3000/api/v1/invoices/';

//GET（データの読み込み）
wjCore.httpRequest(url, {
    success: function (xhr) {
        cv.sourceCollection = JSON.parse(xhr.response, reviver);
    }
});

function reviver(key, val) {
    // 先頭から"yyyy-mm-ddT"の文字列を日付データと判断 
    if (typeof (val) == "string" &&
        val.match(/^\d{4}-\d{2}-\d{2}T.*/)) {
        return new Date(Date.parse(val)); // Date型に変換
    } return val;
}

rails s -p 3001

<button id="update">更新</button>
<div id="flexGrid" style="height: 600px;"></div>

・・・（中略）
document.getElementById('update').addEventListener('click', function () {
    //POST（データの登録）
    for (var i = 0; i < cv.itemsAdded.length; i++) {
        wjCore.httpRequest(url, {
            method: 'POST',
            data: cv.itemsAdded[i]
        });
    }
    //PUT（データの更新）
    for (var i = 0; i < cv.itemsEdited.length; i++) {
        wjCore.httpRequest(url + cv.itemsEdited[i].id, {
            method: 'PUT',
            data: cv.itemsEdited[i]
        });
    }
    //DELETE（データの削除）
    for (var i = 0; i < cv.itemsRemoved.length; i++) {
        wijmo.httpRequest(url + cv.itemsRemoved[i].id, {
            method: 'DELETE'
        });
    }
});
・・・（中略）

rails s -p 3001