SuperTableを作る - Githubissues

やる時期は要相談

まずは実装する（したい）機能をズラズラならべるべき

いえす、夢がSUPERに広がるお絵かきから始めます。明日。

Scaffoldで作ったリスト画面がデフォルトスーパーテーブルだったらステキすぎる

-sオプションじゃなくていいですかねｗ

いえす、デフォルトで。

パターン①　完全Model制御【方針】・Directiveで作ってModelで制御（c3の使い方と同じ感じ）・実装時にxhtml側はタグ1行になるイメージ・ColumnModel、RowModelでclassやらなんやらの指定ができる・列はColumns(Array)分生成。・RowModelはanyで任意のオブジェクト渡される。・RowModelに『$datatable』のような行管理用プロパティを勝手に生やしてしまう。

【課題】・行生成時にColumns(Array) ✕ Rows(Array)分ループするためレスポンスが残念。　→レンダリングをVirtual化で解決予定・行列同時固定可能のため、現在縦スクロール量を2つのTableで同期している。　overflow:hiddenでしかスクロールバー非表示にならない問題発生で、片方のテーブルでしかスクロールできない。（absoluteはブラウザでずれるから絶対使わない）　→WheelEventでどうにかなるか検討

・選択行変更前イベント（cancel可能にするためのSelectedRowChangingイベント）等をJSFでどうしよう。　→そもそもいるんだっけ？・詳細行の表示テンプレートをどうやって指定しよう？　→どうやって指定しよう？ほんとに。

<r:superTable value="#{list}" rowFix="0" colFix="2" />

みたいなイメージ？

専用のモデルとかイケてないなあ

まぁパターン①なんで、一番ラクな方法ですｗ

徐々に進化していくってことか。把握。

【SUPERなテーブル（Excel）の必須機能】・ヘッダ固定スクロール・指定列固定スクロール・指定行固定スクロール・行ソート（複数列同時NG）・行フィルタ（複数列同時OK）・列表示切り替え・列並び替え・行のDnD並び替え・行データ修正（セル単位 or 行単位は切り替え可能）・行選択（セル単位 or 行単位は切り替え可能）・矢印キー、Enter、Tab等でフォーカス移動（セル単位 or 行単位は切り替え可能）・列単位で表示タイプの指定（Checkboxしか思いつかない）・詳細行展開（テンプレート指定可）・複数階層入れ子テーブル（入れ子したテーブルは機能絞らないと絶対バグるよね）・指定行数でページング・行追加、既存行削除・Shift押しながら範囲選択（からのCtrl+Cでコピー）

【保留】・列のDnD並び替え、表示切り替え・集計行機能・指定列の値で行をGroupingする機能・Excelとかの範囲選択データのペースト

あれ？これってもしかしてExcelじゃね？

SUPERなテーブル（Excel）って足しときました

【パターン①】 Commandbutton等、JSFタグでマークアップできないと困るケースばかりなので断念。もうちょっと作りこめばAngularJSである程度活用できそう。（主にマスメンかな）

【パターン②】 HTMLの仕様でtableタグの内部にthead、tbody、tfoot以外をつっこむことができない。 AngularJSで試してみたが、ディレクティブのcompile時でも既にその評価が行われているため、theadタグをtemplateにしているdirectiveを記述することができない等の制限あり。

<table>
  <thead-directive/> //←こいつのTemplateのルートが『thead』でもDOMから消えてしまう
</table>

なのでtable、thead、tfoot、dbody、tr、th、tdに相当するディレクティブを作成し、そのAttributeでなんやかんやする方針に決定。（手作りテーブル） JSFへ組み込めることを確認済。

Model管理ではないため、ここからの列行固定やソート等の機能実装は全てDOM操作ゴリゴリになる。タグ間の連携は考えもの。

案①：$emit、$broadcastで通知し合って完全DOM操作。案②：親から子の操作はDOM操作、子から親へは予めDOM操作でAttributeにアクションを仕込んでおく。

【パターン③】 JSFのカスタムタグとJqueryで実装。

reels-project / reels

SuperTableを作る #28