一. 需求 要求生成一颗部门树,初始只列出根部门 当点击一个部门节点时,动态载入该部门下的直属子部门,并展开该部门节点 部门节点要求支持右键单击事件,当点击右键时,列出相关操作菜单 二. 关键类 这里主要涉及Ext JS的两个类: Ext.tree.TreeNode Ext.menu.Menu 相关API可以参考:http://extjs.com/deploy/ext/docs/ 三. 代码示例 1. 先看一下测试页面 2. 再看一下生成树的函数3. 展开子节点的代码 读者可以自己运行一下如上代码,会发现如下现象:无论点击“子公司1”多少次,只会列出“子公司1的第一个儿子”一个节点,而每点击一次“子公司2”,就会多出一个“子公司2的第一个儿子”节点,这是为什么呢?因为每次点击都会激发myExpand函数,而“子公司1”上加了node.item(0)==undefined的判断,这里明白了? 即:如果该部门下没有子部门,则载入子部门,否则只展开,不重新载入。
今天在公司帮同事写了个用Ext Js生成动态树的Demo,在这里分享一下,也好供以后自己查阅。
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
来源: http://www.phperz.com/article/16/1209/287967.html