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