Title1

Title2

Title3

4-1 dTree 樹狀結構

一、dTree 官網:http://www.destroydrop.com/javascripts/tree/

二、使用方法

  1. add()
    add()
    Adds a node to the tree.
    Can only be called before the tree is drawn.
    
    id, pid and name are required.
    
    Parameters
    Name	Type	Description
    id	Number	Unique identity number.
    pid	Number	Number refering to the parent node. The value for the root node has to be -1.
    name	String	Text label for the node.
    url	String	Url for the node.
    title	String	Title for the node.
    target	String	Target for the node.
    icon	String	Image file to use as the icon. Uses default if not specified.
    iconOpen	String	Image file to use as the open icon. Uses default if not specified.
    open	Boolean	Is the node open.
    
    Example
    mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

    add(id, pid,'name','url','title','target','icon','iconOpen','open');
    add(編號, 父編號,'文字','網址','提示文字','目標','一般圖示','點選圖示','開啟狀態');

  2. new
    prod_b = new dTree('prod_b','<{xoAppUrl modules/tadtools/dtree}>');

  3. openAll()

  4. closeAll()

  5. openTo()

  6. Configuration
    Configuration
    Variable	Type	Default	Description
    target	String	true	Target for all the nodes.
    folderLinks	Boolean	true	Should folders be links.
    useSelection	Boolean	true	Nodes can be selected(highlighted).
    useCookies	Boolean	true	The tree uses cookies to rember it's state.
    useLines	Boolean	true	Tree is drawn with lines.
    useIcons	Boolean	true	Tree is drawn with icons.
    useStatusText	Boolean	false	Displays node names in the statusbar instead of the url.
    closeSameLevel	Boolean	false	Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.
    inOrder	Boolean	false	If parent nodes are always added before children, setting this to true speeds up the tree.
    Example
    mytree.config.target = "mytarget";

     

  7. 
              <script type="text/javascript">
    
                prod_b = new dTree('prod_b','<{xoAppUrl modules/tadtools/dtree}>');
    
                prod_b.add(0,-1,' 商品類別');
                <{foreach from=$block.kind item=row}>
                  prod_b.add(<{$row.sn}>,<{$row.p_sn}>,'<{$row.title}>(<{$row.count}>)','<{xoAppUrl modules/ugm_yd/index.php?op=showKind&kind=}><{$row.sn}>');
                <{/foreach}>          
    
                document.write(prod_b);
              </script>
              <p><a href="javascript: prod_b.openAll();">open all</a> | <a href="javascript: prod_b.closeAll();">close all</a></p>