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