ども、カロージです。
前回に引き続き「w2ui」ネタなのですが、グリッドでツリー構造を作る際、
デフォルトでツリーが開いている状態にしたい。との要件があり実装を試みたのですが、
何気にハマったので備忘録的な意味も含め、情報共有させて頂きます。
やったこと
- ドキュメントでデフォルトの設定が無いか確認
- グリッドをクリックするとツリーが開閉するのでJSでクリック
- レコード単位で開閉
ドキュメントでデフォルトの設定が無いか確認
下記の公式のドキュメントをあさるも見つからず。。
https://w2ui.com/web/docs/2.0/grid
グリッドをクリックするとツリーが開閉するのでJSでレコードをクリック
w2uiのツリーライクグリッドで開閉可能な場合、「w2ui-icon-expand」といういうクラスが付与されます。
jQueryの拡張ライブラリ版「w2ui」を使用していたので、以下の様な感じでJSでこの画像をクリックしましたが、
100レコード程度のツリー構造の開閉ならば問題なく動作するのですが、それ以上のレコードになると開かない。と言う事象が発生ました。
|
1 |
$('.element-set-class').trigger('click'); |
レコード単位で開閉
仕方ない。。といことで、onRenderイベントで、描画の終了をonCompleteで検知し、
以下ソースコードの様に、レコードを１つ毎、開く処理をしています。
開く前と、開いた後でグリッドに表示されるレコード数が変わるので、
それぞれカウントを取り、一致するまでループしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
onRender:function(event) { event.onComplete = () => { do{ var rec_count = this.total; for( key in this.records ){ let item = this.records[key]; w2ui.grid3.expand(item.recid); } var count = this.total; } while( count != rec_count ); }; } |
まとめ、
2時間くらいハマり、彼方此方ググった結果ページにアクセスしたのですが、
これと言ったページが見つからなかったので、備忘録がてら残しておきたいと思います。
でわ
