原创 ExtJS的使用方法汇总(3)——树形结构

最新推荐文章于 2021-02-13 08:34:41 发布

VIP文章 messi2009

最新推荐文章于 2021-02-13 08:34:41 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： extjs function tree json stylesheet ajax

本文链接：https://blog.csdn.net/messi2009/article/details/5885710

版权

ExtJS的使用方法汇总(3)——树形结构收藏

在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及 AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开发出包含树形信息结构的应用。

本文就是详细介绍树形结构的使用过程和实例。

一、创建一棵树

树控件由Ext.tree.TreePanel类定义，控件的名称为TreePanel，TreePanel类继承自Panel面板，在EXT中使用树控件非常简单，我们先来看一下代码（包含配置信息）。

view plain copy to clipboard print ?

<html xmlns= "http://www.w3.org/1999/xhtml" >
<head id="Head1" runat= "server" >
<title>简单的树形</title>
<link rel="stylesheet" type= "text/css" href= "../resources/css/ext-all.css" />
<script type="text/javascript" src= "../adapter/ext/ext-base.js" </script>
<script type="text/javascript" src= "../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: '我是根' });
tree.setRootNode(root);
tree.render();
});
</script>
</head>
<body>
<div id="tree" ></div>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>简单的树形</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/> <script type="text/javascript" src="../adapter/ext/ext-base.js"</script> <script type="text/javascript" src="../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:'我是根'}); tree.setRootNode(root); tree.render(); }); </script> </head> <body> <div id="tree"></div> </body> </html>

这里的参数tree表示渲染的DOM的id.HTML中应该要要有<div id="tree"></div>相对应，最后这棵树就出现在这个div的位置上。

在获得了树形面板后，就必须要设置根，因为必须有了根才可以生长枝节，最后生成完整的树，所以根是必须的。具体实现的效果如图1所示。

图1 只有根的树

二、为树生枝展叶

上面的实例代码生成一棵没有根的树，下面的代码就为树添加枝和叶，代码清单如下：

view plain copy to clipboard print ?

<script type= "text/javascript" >
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
el:'tree' ,
autoHeight:true
}

最低0.47元/天解锁文章

messi2009

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
原创 ExtJS的使用方法汇总(3)——树形结构

ExtJS的使用方法汇总(3)——树形结构收藏<br /><br />在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开
复制链接

扫一扫