ピースペース

Checkbox付きの折畳/展開可能なツリービューを表示する

leave a comment »

あるサービスサイトのアップグレードを行っている。
旧版では、jquery EasyUIで実現していたCheckboxのツリービューをどうするか?を悩む。
http://www.jeasyui.com/documentation/tree.php

新版ではbootstrapを適用するので、bootstrap-treeviewを使うのが良さげな気がする。
https://github.com/jonmiles/bootstrap-treeview

一方、新版ではknockoutjsも使用するのでdata-bindを指定する必要がある。
をどうすれば良いの?で迷路に迷い込む。
もしかすると、EasyUIの方はdata-bindを使用できるプロパティがあるのかもしれない。
が、knockoutjsのtemplate機能を使うと、追加プラグインなしでCheckboxのTreeが実現できるらしい。
なにこれ>template 便利なものがあるじゃないか!

でもって、EasyUIのCheckboxツリーで実現できていたことを踏襲するには、
親ノードのCheckを子ノードに連動させたり、子ノードを折畳んだり、展開させたりできるようにする必要もある。
knockoutjsはその点にも対応できるようになっているようだ。
http://jsfiddle.net/u28CY/1/
http://jsfiddle.net/GM8nb/

要するに、ツリーノードオブジェクトにchecked, isCollapsedなどのプロパティを追加して
onCheckedハンドラを追加すれば良いわけだ。
その為には、TreeNodeModelなクラスを定義した方が良いらしいのだが、
慣れてないので、だんだんと老化脳には厳しくなってくる…
いつになったら慣れるのだろう>Javascrip;;

Written by nasu38yen

2015年10月19日 @ 8:53 PM

カテゴリー: プログラム

Tagged with

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。