SlickGrid | tips

SlickGridでセルのドラッグ＆ドロップで行を移動できるようにするにはslick.rowmovemanager機能を組み込むことで実現できる。次のような手順を踏むことになる。
1. slick.rowselectionmodel.js, slick.rowmovemanager.js を読み込むようにする。
2. ドラッグできるようにするセルのカラム・オプション(Column option)の
behavior を “selectAndMove” にする。
3. Slick.RowSelectionModelオブジェクトを生成してgridにセットする。
4. Slick.RowMoveManagerオブジェクトを生成してgridのプラグインとして認識させる。
Slick.RowMoveManagerオブジェクトのメソッドonBeforeMoveRows.subscribe, onMoveRows.subscribe をインプリメントする。
Javascriptコード記述例

<header>
<script src="slick.core.js"></script>
<script src="slick.grid.js"></script>
<script src="slick.rowselectionmodel.js"></script>
<script src="slick.rowmovemanager.js"></script>
</header>
<body>
<script>
  var options = {
    enableCellNavigation: true,
    enableColumnReorder: true
  };

  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title", behavior: "selectAndMove" },
    {id: "param1", name: "Data1", field: "param1"},
    {id: "param2", name: "Data2", field: "param2"}
  ];
  var data = {
    {title: "Item1", param1: "123", param2: "abc"},
    {title: "Item2", param1: "345", param2: "def"},
    {title: "Item3", param1: "678", param2: "ghi"},
    {title: "Item4", param1: "098", param2: "jkl"},
  };

  $(function () {
    grid = new Slick.Grid("#myGrid", data, columns, options);

    grid.setSelectionModel(new Slick.RowSelectionModel());

    var moveRowsPlugin = new Slick.RowMoveManager({
      cancelEditOnDrag: true
    });

    moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) {
      for (var i = 0; i < data.rows.length; i++) {
        // no point in moving before or after itself
        if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) {
          e.stopPropagation();
          return false;
        }
      }
      return true;
    });

    moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
      var extractedRows = [], left, right;
      var rows = args.rows;
      var insertBefore = args.insertBefore;
      left = data.slice(0, insertBefore);
      right = data.slice(insertBefore, data.length);

      rows.sort(function(a,b) { return a-b; });

      for (var i = 0; i < rows.length; i++) {
        extractedRows.push(data[rows[i]]);
      }

      rows.reverse();

      for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        if (row < insertBefore) {
          left.splice(row, 1);
        } else {
          right.splice(row - insertBefore, 1);
        }
      }

      data = left.concat(extractedRows.concat(right));

      var selectedRows = [];
      for (var i = 0; i < rows.length; i++)
        selectedRows.push(left.length + i);

      grid.resetActiveCell();
      grid.setData(data);
      grid.setSelectedRows(selectedRows);
      grid.render();
    });

    grid.registerPlugin(moveRowsPlugin);
  });
</script>
      <div id="myGrid" style="width:100%;height:500px;"></div>
</body>

ヘッダー行のカラムを（左）ボタンでドラッグ＆ドロップしてカラムを入れ替えできるようにするには、グリッド・オプション(grid option)の設定を行えばよい。

grid optionの enableColumnReorder を true にするとカラムの入れ替えが可能になる。
falseにすると（左）ボタンのドラッグ自体ができなくなり、カラムの入れ替えはできない。

Javascriptコード記述例
1. グリッド生成時に一括オプションとして指定する場合

<body>
<script>
  var options = {
    enableCellNavigation: true,
    enableColumnReorder: true
  };

  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "param1", name: "Data1", field: "param1"},
    {id: "param2", name: "Data2", field: "param2"}
  ];
  var data = {
    {title: "Item1", param1: "123", param2: "abc"},
    {title: "Item2", param1: "345", param2: "def"},
    {title: "Item3", param1: "678", param2: "ghi"},
    {title: "Item4", param1: "098", param2: "jkl"},
  };

  $(function () {
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });

</script>
      <div id="myGrid" style="width:100%;height:500px;"></div>
</body>

2. グリッド生成後、あとからオプションを変更する場合

  var grid;

  function enableColumnsReorder() {
        var options = grid.getOptions();
        options["enableColumnReorder"] = true;
        grid.setOptions(options);
  }

（javascript内で、カラム定義の配列を入れ替えて、gridのrender()を世呼び出せば、もちろん入れ替えはできます。）

「SlickGrid」タグアーカイブ

[SlickGrid]行の移動 (Slick.RowMoveManagerの組み込み)

[SlickGrid] カラムの移動設定(グリッド・オプション: enableColumnReorder )

カテゴリー

最近の投稿

最近のコメント

アーカイブ

メタ情報