Ext树形结构 | 易学教程

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>tree</title>
        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="Ext/ext-base.js"></script>
        <script type="text/javascript" src="Ext/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){
                //树控件由Ext.tree.TreePanel类定义，控件名称为TreePanel，TreePanel类继承自Panel面板
                var tree = new Ext.tree.TreePanel({
                    el:'tree'//这里的参数‘tree’表示渲染的DOM的id
                });

                var root = new Ext.tree.TreeNode({text:'我是根'});
                //用setRootNode()方法把root放到tree里
                tree.setRootNode(root);
                //对tree进行渲染
                tree.render();
            });
        </script>
    </head>
    <body>
        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>
        <!-- 这里定义渲染的DIV，树将出现在这人DIV里 -->
        <div id="tree" style="height:300px;"></div>
    </body>
</html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>tree</title>
        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="Ext/ext-base.js"></script>
        <script type="text/javascript" src="Ext/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){

                var tree = new Ext.tree.TreePanel({
                    el:'tree'
                });

                var root = new Ext.tree.TreeNode({text:'我是根'});
                var node1 = new Ext.tree.TreeNode({text:'我是根的第一个枝子'});
                var node2 = new Ext.tree.TreeNode({text:'我是根的第一个枝子的第一个叶子'});
                var node3 = new Ext.tree.TreeNode({text:'我是根的第一个叶子'});
                //使用appendChild()为一人结点添加子结点
                node1.appendChild(node2);
                root.appendChild(node1);
                root.appendChild(node3);

                tree.setRootNode(root);
                tree.render();
                //没有root.expand(true, true);就每次都要点击根或枝前面的加号才能展开整棵树。
                //root.expand(true, true);第一个参数表示是否递归展开所有子结点，如果为false，就只展开第一级子结点，下面的结点仍然是折叠状态。第二个参数表示是否要动画效果，如果为true可以明显看出这些结点是逐渐展开的。
                root.expand(true, true);
            });
        </script>
    </head>
    <body>
        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>
        <div id="tree" style="height:300px;"></div>
    </body>
</html>

来源：https://www.cnblogs.com/mingforyou/p/3274292.html

标签

ext

树形结构

root

脚本