y-matsui::weblog

電子楽器、音楽、コンピュータ、プログラミング、雑感。面倒くさいオヤジの独り言

dhtmlXTreeかっちょいー

数年前よりCDROM単体とWebブラウザだけで動作する検索エンジンを扱っている。IEのDynamicHTML、データバインド機能に負っているものの、CDROM、ファイル共有でも動作する検索エンジンで、クライアントメモリ上にデータを展開・検索するので、非常に高速なのが特徴。
ツリーインタフェース、簡易検索、詳細検索、全文検索もどき(全フィールドのOR検索)で数万件程度までOK。
ユーザインタフェースの要”フォルダツリー”に以前は、静的HTML+Javascriptで構成していたが、顧客の側でツリーを修正してシステムを使いまわしたいというニーズには応えられなかった。ツリー部分でCSVとデータバインドによる方法や(複雑すぎてありえないが)Javascript配列を使った方法などが考えられたが、「階層構造を管理するならXMLでしょ」となんとなく決定。XMLにデータを記述し、ツリーを動的に構成するといえばdhtmlXTreeなのである。
dhtmlxTreeは、少し前にXML階層メニューでもお世話になっているが、XMLに属性データと描画用の条件を指定できる。
また、ajaxなdynamicLoadというメソッドが用意されており、静的XMLはもちろんこと、サーバが動的に生成するXMLを必要な部分だけ読み取ることが出来るのが素晴らしい。
これを使えば、CDROM配布用には静的XMLでフォルダを構成するが、同じデータを使ってネット環境からフォルダツリーを読み込んでくるなどの使い方が出来る。

単純にツリーを構成するだけなら、ダウンロードしたファイルに入っているsampleのとおりなのだが、”XMLに記述する任意の属性を、Javascriptなどのプログラムに渡してやる”にはどうしたらよいのか?ちょっとばかり悩んだ。
すぐにググっちゃうのが悪い癖で、散々DynamicHTMLだのDOMだのと調べまくった挙句、実際にはダウンロードしたdhtmlxTreeのドキュメントに書かれていた。(何やってんだか)
<item text="ASP" id="asp" im0="book.gif" im1="books_open.gif" im2="book.gif">
  <userdata name="Query">Person=*松井*&Method=*ASP*</userdata>
</item>
というようなXMLを用意して、
function tonclick(id){
window.status='フォルダ名:'+tree.getItemText(id)+' 検索条件:'+tree.getUserData(id,'Query');
CATEGORYLINK(tree.getUserData(id,'Query'),tree.getItemText(id));
};
なんていうJavasciptを書けば、XMLノードからユーザ属性を読み取ってきて、Javascriptに渡すことが出来るのであった。
こんな感じ
OK!OK!
これで、XMLにフォルダ名やアイコンファイルの名前と、Javascriptに渡すパラメータを記述しておき、簡単にフォルダツリー構成を変更できるようになったぞ。
XMLをサーバで生成して、dynamicLoadを使った差分描画をすれば、まさにajax!。かっちょいー