Home   Single Page

ツリーコントロール

コンポーネント: tree, treechildren, treeitem, treerow, treecell, treecols and treecol.

ツリーは二つの部分からなります。 columns のセットそして、ツリー body。columns のセットは、幾つかの treecol コンポーネントで構成されていて、 treecol コンポーネントは各 column につき、1つです。
各 column はツリーのトップにヘッダーとして表現されます。
二つ目の部分、ツリー body はツリー内に現れるデータを含み、treechildrenコンポーネントによって作成されます。

ツリーコントロールの例は以下のようです。

<tree id="tree" rows="5">
    <treecols>    
        <treecol label="Name"/>        
        <treecol label="Description"/>        
    </treecols>    
    <treechildren>    
        <treeitem>        
            <treerow>            
                <treecell label="Item 1"/>                
                <treecell label="Item 1 description"/>                
            </treerow>            
        </treeitem>        
        <treeitem>        
            <treerow>            
                <treecell label="Item 2"/>                
                <treecell label="Item 2 description"/>                
            </treerow>            
            <treechildren>            
                <treeitem>                
                    <treerow>                    
                        <treecell label="Item 2.1"/>                        
                    </treerow>                    
                    <treechildren>                    
                        <treeitem>                        
                            <treerow>                            
                                <treecell label="Item 2.1.1"/>                                
                            </treerow>                            
                        </treeitem>                        
                        <treeitem>                        
                            <treerow>                            
                                <treecell label="Item 2.1.2"/>                                
                            </treerow>                            
                        </treeitem>                        
                    </treechildren>                    
                </treeitem>                
                <treeitem>                
                    <treerow>                    
                        <treecell label="Item 2.2"/>                        
                        <treecell label="Item 2.2 is something who cares"/>                        
                    </treerow>                    
                </treeitem>                
            </treechildren>            
        </treeitem>        
        <treeitem label="Item 3"/>        
    </treechildren>    
</tree>

マウスを使わずに入力: tree