階層メニュー FOLIOLE

このデータ項目は， FOLIOLE の動作を見るための架空のものです。
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

【 TIPS 1 】
「データ項目」と「タブ区切り文字列」の相互変換

[ 1 ] データ項目 → タブ区切り文字列
まず，このサンプルで使っているデータ項目 ( menu_data.js の中の配列 menu_data ) を fo_get_tsv_data() でタブ区切り文字列の配列 tsv_data を作ります。
また，それを fo_put_tsv_tbl() でブラウザに表形式で視覚化します。表を丸ごと左上から右下までマウスドラッグで Microsoft Excel などにコピー＆ペーストするとデータ項目の編集が楽にできます。

var tsv_data = fo_get_tsv_data(menu_data);
document.write(fo_put_tsv_tbl(menu_data, true));

( 出力例 )

[ 2 ] タブ区切り文字列 → データ項目
次に，上の操作で得たタブ区切り文字列 tsv_data を fo_get_ary_data() で元のデータ項目に戻します。新しいデータ項目の配列名は，元と同じ menu_data にしてみます。このメニューの層数は 4 です。また，それを fo_put_fo_item() でブラウザに視覚化します。
出力されたものを， menu_data.js の配列 menu_data に上書きコピー＆ペーストしてみてください。同じ階層メニューが表示されるはずです。

var menu_data = fo_get_ary_data(tsv_data, 4);
document.write(fo_put_fo_item(tsv_data, 4, 'menu_data'));

( 出力例 )

[ 3 ] 樹形図で確認
[ 2 ] で得たデータ項目 menu_data がちゃんとした形式かどうかを確認するには fo_get_sitemap() で樹形図を出すのも便利です。
ちゃんとした樹形図が出れば [ 2 ] で得た menu_data は，menu_data.js の中の配列 menu_datga と同値と推定されます。

document.write(fo_get_sitemap(menu_data));

( 出力例 )