ExtJS初级教程之ExtJS Tree(三)

最新推荐文章于 2021-10-25 11:31:33 发布

ituuz

最新推荐文章于 2021-10-25 11:31:33 发布

阅读量7.2k

点赞数 1

分类专栏： ExtJS 文章标签： extjs tree function string dao

本文链接：https://blog.csdn.net/letthinking/article/details/6254334

版权

本文详细介绍了ExtJS Tree的事件处理，包括展开、折叠、单击和双击节点事件，并展示了如何创建可编辑和可拖拽的树。此外，还讲解了异步加载树的实现，通过实例代码帮助理解如何根据节点ID动态加载数据。

摘要由CSDN通过智能技术生成

前两次我介绍了静态树和根据数据库加载的数据生成的树，今天我就把ExtJS Tree这剩的一些主要的东西说一说，剩下的主要就是：树的事件处理、可编辑的树和可拖拽的树，最后再实现一下异步加载的树。

树的事件处理

树的事件主要有：1、展开节点事件。2、折叠节点事件。3、单击节点事件。4、双击节点事件。下面我们以一个静态树来测试树的主要事件。

//普通的静态树 var tree = new Ext.tree.TreePanel({ el:'tree-div' }); //创建根节点 var root = new Ext.tree.TreeNode({text:'AllShengFen'}); //创建父节点 var shengfen1 = new Ext.tree.TreeNode({text:'HeiLongJiang'}); var shengfen2 = new Ext.tree.TreeNode({text:'LiaoNing'}); var city1 = new Ext.tree.TreeNode({text:'harbin'}); var city2 = new Ext.tree.TreeNode({text:'daqiang'}); var city3 = new Ext.tree.TreeNode({text:'shenyang'}); var city4 = new Ext.tree.TreeNode({text:'dalian'}); //将子节点添加到父节点中 shengfen1.appendChild(city1); shengfen1.appendChild(city2); shengfen2.appendChild(city3); shengfen2.appendChild(city4); //将子节点添加到父节点中 root.appendChild(shengfen1); root.appendChild(shengfen2); //将root节点设置为根节点 tree.setRootNode(root); //使这棵树显示在div标签中 tree.render(); //展开节点事件 tree.on("expandnode",function(node){ alert("["+node.text+"]open"); }); //折叠节点事件 tree.on("collapsenode",function(node){ alert("["+node.text+"]close"); }); //单击节点事件 tree.on("click",function(node){ alert("["+node.text+"]click"); }); //双击节点事件 tree.on("dblclick",function(node){ alert("["+node.text+"]double click"); });

由于单击和双击有冲突，所以我们在测试的时候可以先注释掉一个，单独测试。

可编辑的树