动态树与静态树显示——（一）

常用属性

 

常用事件:

 

 

 

 

1.第一种是静态树:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>静态树</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../themes/icon.css">
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
        <script src="../js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        
        <ul id="treeID" class="easyui-tree" data-options="animate:true,checkbox:true,lines:true">
            <li>
                <span>第一章</span>
                <ul>
                    <li>
                        <span>第一节</span>
                        <ul>
                            <li>
                                <span>第一条</span>
                            </li>
                            <li>
                                <span>第二条</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>第二节</span>
                        
                    </li>
                    <li>
                        <span>第三节</span>
                        
                    </li>
                    <li>
                        <span>第四节</span>
                        
                    </li>
                    <li>
                        <span>第五节</span>
                        
                    </li>
                </ul>
            </li>
            <li>
                <span>第二章</span>
            </li>
            <li>
                <span>第三章</span>
            </li>
            <li>
                <span>第四章</span>
            </li>
        </ul>
    
        <script type="text/javascript">
//            文档加载后折叠所有的节点
            $(function(){
                $("#treeID").tree("collapseAll");
            })
        </script>
    </body>

</html>

 效果:

 

 

2.动态树：

 

例如:

 

 

 

 

动态树例子:

目录结构:

 

页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>动态</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="themes/icon.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
        <script src="js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>

        <ul id="ttt"></ul>
        <script type="text/javascript">
            $("#ttt").tree({
                url: "/Oraclefenye/tree_data.json",
                lines: true
            });
        </script>
        <script type="text/javascript">
            $("#ttt").tree({
                onClick: function(node) {
                    alert(node.text);
                }
            });
        </script>

    </body>

</html>

 

 

tree_data.json

[
  {
    "id":1,
    "text":"第一章" 
  },
  {
    "id":2,
    "text":"第二章",
    "state":"closed",
    "children":[
       {
         "id":21,
          "text":"第一节" 
       },
       {
       "id":22,
          "text":"第二节"        
       },
       {
       "id":23,
          "text":"第三节",
          "state":"closed",
          "children":[
         {
          "id":231,
              "text":"第一条" 

         },    
         {
        "id":232,
              "text":"第二条"     
         }
      ]      
       }
    ] 
  }
]

 

 效果:

 

 

 

将json数据改为

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

 

结果:

 

posted @ 2017-08-08 12:30  QiaoZhi  阅读(1020)  评论(0)  编辑  收藏  举报