ExtJs系列的东西好久没有写了(最初想一气呵成的,可是中间有些工作,就给耽误了),今天我们继续看Ext中的TreePanel。有人说即使为了"树"也要学习Ext,足见"树"在Ext中是何等的重要。事实上也确实如此,在Ext中使用"树"可以像在WinFrom中一样操作树形结构。
静态树
现在我们先看看Ext中最简单的静态树。
看一下效果。
上面我基本上对每个配置属性进行了说明,值得注意的就是loader配置属性,它的功能就是加载数据,虽然从上面还看不到它的作用(因为我们的是静态树,数据直接写在了root中),不过后面我们就会看到它的作用。接着就是AsyncTreeNode,从字面可以看出它是一个异步节点,也就是说它的数据是通过异步加载的(注意这里的异步指的是Ajax方式加载,是树级别的。后面的章节中我们会说节点级别的异步加载,可以点击某个节点就只加载它下面的节点其它节点不加载)。最后我觉得要注意的就是节点的结构,我们虽然这里是静态构造的,后面我们的动态树在构造的时候也是这样的结构。
动态树
静态树简单但是却不太实用,实际开发过程中更多的还是动态树,下面我们就一块看一下动态树的使用,这里再明确说明一下,我这里不仅仅"树"的数据是动态从后台获取的,而且还可以根据条件显示不同的"树"结构,这也是很多朋友经常遇到的情况,所以直接在这个例子里给出。注意这里传参的方式,我注释的很清楚,很多朋友之所以不会做不是因为别的就是因为不会传参。
前台代码
后台代码
默认显示
输入条件搜索(根据供货商的公司名称,搜索出说有相关的产品)。
这里给大家提供一种构造树的简单的方法,我们知道对于树结构来说有时候父子关系不太好循环,而且要构造json,这里我们定义了一个Node类,作为一个节点它除了有id、text、leaf属性外还有children属性,而children属性是一个节点集合,这样一来我们只需要构造Node对象然后利用.Net提供的JavaScriptSerializer类进行序列化就可以了(从这也可以看出面向对象的优点)。
今天就到这里,后面我们还会继续跟大家一块学习更多关于TreePanel的东西。
分享到:
相关推荐
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
本文为大家介绍下extjs4 treepanel如何动态改变行高度,下面有个不错的示例,感兴趣的朋友可以参考下
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
ExtJs TreePanel应用ExtJs TreePanel应用
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
主要介绍了如何通过CSS样式来修改ExtJS:TreePanel的小图标,下面有个不错的示例,大家可以参考下
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
TreePanel的各项属性能帮助我们动态加载extjs tree
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
treePanel+chekBox全部选中以及清空选中,想必大家在学习使用过程中都见过这种效果吧,接下来为大家详细介绍下实现过程及细节,感兴趣的朋友可以参考下哈
博文链接:https://jfp.iteye.com/blog/178889