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>