読者です 読者をやめる 読者になる 読者になる

SlickGrid のヘッダ行をグループ化する slickgrid-colgroup-plugin 作った

SlickGrid のヘッダをグループ化するプラグイン slickgrid-colgroup-plugin を作ったので、ギョームシステムの開発とかにどうぞ。MIT。

デモページ にいくつかのサンプルを置いてます。

SlickGrid 自体についても簡単に紹介すると、大量のデータをグリッドで表示できることを特徴としたフレームワークで、その仕組としてはスクロールされるたびに表示領域の DOM 要素だけを動的に作り直すことによって大量データを少ない DOM 要素数で表現している。

プラグイン v1.0.4 における使い方は、SlickGrid オブジェクトにプラグインを登録して

grid.registerPlugin(new Slick.Plugins.ColGroup());

カラム定義で children プロパティを用いてグループ構造を持ったカラム定義を与えるだけ。

var columns = [
  {id: 'col1', name: 'col 1', children: [
    {id: 'col1-1', name: 'col 1-1', field: 'col1-1'},
    {id: 'col1-2', name: 'col 1-2', field: 'col1-2'}
  ]},
  {id: 'col2', name: 'col 2', children: [
    {id: 'col2-1', name: 'col 2-1', field: 'col2-1'},
    {id: 'col2-2', name: 'col 2-2', children: [
      {id: 'col2-2-1', name: 'col 2-2-1', field: 'col2-2-1'},
      {id: 'col2-2-2', name: 'col 2-2-2', field: 'col2-2-2'}
    ]}
  ]}
];