Select Editなど一覧表表示コンポーネントの完成

[fumi-m]

完了条件

• enum型のrawデータ、日本語化データの表示
• lookup型のrawデータ、サマリーデータ（selectbox)、関連するデータを編集不可カラムとしての表示
• on/off型データに対する Slick.Chckeckboxの適用

Select2の導入

• https://github.com/6pac/SlickGrid/blob/master/examples/example-select2-editor.html
• https://select2.org/

memo

var select_opt[i] = data[i]
dataSource:select_opt[i]

populateSelect : そのまま
Select2Editorもそのまま

data[i] = Hash of key:value

dataViewを実装する

// Create the DataView.
var dataView = new Slick.Data.DataView();

//Create columns
var columns = [
  {id: "column1", name: "ID", field: "id"},
  {id: "column2", name: "Language", field: "lang"},
  {id: "column3", name: "Year", field: "year"}
];

// Pass it as a data provider to SlickGrid.
var grid = new Slick.Grid(containerEl, dataView, columns, options);

// Make the grid respond to DataView change events.
dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
});

var data = [
  {'id': 'l1', 'lang': 'Java', 'year': 1995},
  {'id': 'l2', 'lang': 'JavaScript', 'year': 1995},
  {'id': 'l3', 'lang': 'C#', 'year': 2000},
  {'id': 'l4', 'lang': 'Python', 'year': 1991}];

// This will fire the change events and update the grid.
dataView.setItems(data);