CMDコマンドラインのtreeスタイル出力

5149 ワード

昔から様々なコマンドラインに出力される特殊なスタイルに興味があります.一番多いのはtreeです.
例えば、あるディレクトリでtreeコマンドを実行すると、以下のツリーが表示されます.
F:.
└─tk
    └─mybatis
        ├─mapper
        │  ├─annotation
        │  ├─code
        │  ├─common
        │  │  ├─base
        │  │  │  ├─delete
        │  │  │  ├─insert
        │  │  │  ├─select
        │  │  │  └─update
        │  │  ├─condition
        │  │  ├─example
        │  │  ├─ids
        │  │  ├─rowbounds
        │  │  ├─special
        │  │  └─sqlserver
        │  ├─entity
        │  ├─generator
        │  ├─mapperhelper
        │  ├─provider
        │  │  └─base
        │  └─util
        └─spring
            └─mapper
ここではJSを使って簡単に上記の効果を実現します.
var PREFIX_BRANCH = '├─';//  
var PREFIX_TRUNK  = '│ ';//  
var PREFIX_LEAF   = '└─';//  
var PREFIX_EMP    = '  ';// 

function tree(nodes, prefix){
    if(prefix == undefined){
        prefix = '';
    } else {
        prefix = prefix.replace(PREFIX_BRANCH, PREFIX_TRUNK);
        prefix = prefix.replace(PREFIX_LEAF, PREFIX_EMP);
    }
    for(var i = 0; i < nodes.length; i++){
        //       
        if(i == nodes.length - 1){
            console.log(prefix + PREFIX_LEAF + nodes[i].text);
            if(('children' in nodes[i]) 
                && nodes[i].children != undefined 
                && nodes[i].children.length > 0){
                tree(nodes[i].children, prefix + PREFIX_LEAF);
            }
        }
        //  
        else {
            console.log(prefix + PREFIX_BRANCH + nodes[i].text);
            if(('children' in nodes[i]) 
                && nodes[i].children != undefined 
                && nodes[i].children.length > 0){
                tree(nodes[i].children, prefix + PREFIX_TRUNK);
            }
        }
    }
}
テスト:
var treeData = [
    {
        text: '  ',
        children: [
            {
                text:'  ',
                children: [
                    {
                        text:'  ',
                        children: [
                            {
                                text:'  '
                            }
                        ]
                    }
                ]
            },{
                text:'  '
            }
        ]
    },{
        text: '  ',
        children: [
            {
                text:'  '
            },{
                text:'  '
            }
        ]
    }
];

tree(treeData);
出力結果:
├─  
│ ├─  
│ │ └─  
│ │   └─  
│ └─  
└─  
  ├─  
  └─  
具体的な配列に適用する場合、主に下記のコードを修正します.
if(('children' in nodes[i]) 
    && nodes[i].children != undefined 
    && nodes[i].children.length > 0){
    tree(nodes[i].children, prefix + PREFIX_TRUNK);
}
現在のノードにサブノードがあるかどうか(またはサブファイルが含まれているかどうか)を判断し、含まれる場合は、すべてのサブノードがループオフすることができる.