やりたいこと

Railsアプリにw2uiのgridを導入する
DBからデータを取得してgridに表示させる

w2uiとは

Javascriptのライブラリです
今回はその中のGridというマスタテーブルを生成できるライブラリを使用しました

開発環境

Ubuntu 18.04
Rails 5.2
MariaDB

導入方法

以下３文をヘッダーに追加します

<head>
...
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>

girdを挿入したい部分にdivを追加します

<div id="grid" style="width: 100%; height: 250px;"></div>

スクリプトを記述します

<script>
  $(function () {
    $('#grid').w2grid({
      name: 'grid_name', 
      header: 'List of Tasks',
      url: {
        get: '/parent_tasks.json'
      },
      method: 'GET',
      show: {
        toolbar: true,
      },
      recid: 'id',
      limit: 10,
      columns: [
        { field: 'id', caption: 'id', size: '8%' },
        { field: 'name', caption: 'name', size: '30%' },
        { field: 'priority', caption: 'priority', size: '10%' },
        { field: 'status', caption: 'status', size: '10%' },
        { field: 'created_at', caption: 'created_at', size: '40%' }
      ],
      sortData: [
        { field: 'id', direction: 'asc' },
      ],
    });
  });
</script>

項目	概要
name	gridの名前
header	gridのヘッダーに表示される文言
url	データをリモートから取得する際のURL
method	Ajaxリクエストのメソッドを上書き
show	gridに表示する項目を指定
recid	recidに設定するカラムを指定
limit	取得するレコード数を指定
columns	カラムを定義
sortData	ソートを指定

columnsの中身

項目	概要
field	フィールド名
caption	表示するカラム名
size	列幅を指定

DBからw2uiにレコードを渡す

コントローラにJSONの処理を追加します

class ParentTasksController < ApplicationController
  def index
    @task = ParentTasks.limit(10)
    respond_to do |format|
      format.html
      format.json
    end

jbuilderを追加します
表示したいデータをrecordsでくくってあげます

# index.json.jbuilder

json.records do
  json.array!(@tasks) do |task|
    json.extract! task, :id, :name, :priority, :status, :created_at
  end
end

これでサーバから取得したデータをgridで表示できるようになりました

参考情報