「jQuery Plugin」タグアーカイブ

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

投稿日: 2015年5月14日 | コメントする

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コード記述例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<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>

コメントする

カテゴリー: SlickGrid, jQuery Plugin

タグ: ,

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

投稿日: 2015年5月14日 | コメントする

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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. グリッド生成後、あとからオプションを変更する場合

1
2
3
4
5
6
7
var grid;
 
function enableColumnsReorder() {
      var options = grid.getOptions();
      options["enableColumnReorder"] = true;
      grid.setOptions(options);
}

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

コメントする

カテゴリー: SlickGrid, jQuery Plugin

タグ: ,