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


ヘッダー行のカラムを(左)ボタンでドラッグ&ドロップしてカラムを入れ替えできるようにするには、グリッド・オプション(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()を世呼び出せば、もちろん入れ替えはできます。)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です