欢迎来到天天文库
浏览记录
ID:22811140
大小:316.53 KB
页数:40页
时间:2018-10-31
《extjs动态树的实现以及节点拖拽》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、ExtJSTreeGridHome»02.技术»ExtJSTreeGrid叶子节点拖拽问题和选择框使用方法ExtJSTreeGrid叶子节点拖拽问题和选择框使用方法PostedbyLittleHorse-2011年11月09日-Postedin:02.技术-Permalink最近一直参与开发一个实验室项目,接触到了ExtJs。下面是工程中几个小问题的总结。1.TreeGrid的叶子节点拖拽问题我使用的是ExtJs3.1版本。ExtJs中默认在树(Ext.tree.TreePanel)的拖动中,一个节点是不能拖动到一个叶子节点中的。这样的设计有些武断,因为根
2、据应用环境叶子节点是有可能变为父节点的。事件机制给这个问题带来了解决方案,许多地方都提到了在监听TreePanel的"nodedragover"事件时特殊处理使得叶子节点可以被drop。代码为:1234567tree.on("nodedragover",function(e){ varn=e.target; if(n.leaf){ n.leaf=false; } returntrue; });最后的返回值设为true使得目标叶子节点接受拖动的节点。在使用TreeGrid(E
3、xt.ux.tree.TreeGrid)时,同样面临上面的问题。采取同样的处理方式,尽管TreeGrid是继承自TreePanel,却仍不能使叶子节点被drop:在上面的事件处理函数中加打印语句,发现在TreeGrid有叶子节点被drop时,nodedragover事件根本就没有被触发。试着调试一下,把页面引入的ext-all.js换成ext-all-debug.js,从触发nodedragover的地方入手逐渐分析,最终发现当TreePanel的拖拽配置为dropConfig:{appendOnly:true}时,nodedragover是不会触发的。这
4、里TreePanel和TreeGrid的区别是,TreePanel如果不设置dropConfig属性,默认appendOnly是false;而TreeGrid如果不设置dropConfig属性,默认appendOnly是true。所以同样的处理到了TreeGrid这里就无效了。明白了原因,只需要在TreeGrid的配置项里增加:dropConfig:{appendOnly:false}和上面的nodedragover事件处理函数就能实现TreeGrid的叶子节点drop问题,效果如下:2.TreeGrid中增加选择框(checkBox)效果TreePane
5、l没有直接提供checkBox的配置项,官方例子中的处理完全可以用在TreeGrid上,见/examples/tree/check-tree.html,主要是在数据中增加"checked:false"字段,然后用treeGrid.getChecked()方法获得当前选中的所有节点。效果如下:小结:初步尝试了前端开发动作,感觉设计某项功能具体的实现方式、界面的样式特别是交互方式,是很有乐趣的工作。EXTJS动态树的实现举例一、描述:通过dwr实现JS与后台的交互,从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳,节点的增删和拖曳都会改变自身以及
6、它所在的目录节点下的相关节点的序号,能使得后台与前台同步。这个序号借助了tree中node的index。1、相关基础:servlet、mysql、dwr、json2、涉及的ExtJs中部分知识点:menu、tree、window以及事件机制3、实现的效果图:a)ExtJs动态树-右键叶子节点菜单b)ExtJs动态树-选择右键叶子节点菜单的“编辑”选项c)ExtJs动态树-右键目录节点菜单d)ExtJs动态树-选择右键目录节点菜单的“编辑”选项e)ExtJs动态树-拖曳节点4、导航数据表结构:5、源码结构图:6、页面结构图:二、实现流程JAVA源码部分:1、
7、数据库连接Java代码 1.package com.demo.core.dao; 2. 3.import java.sql.Connection; 4.import java.sql.DriverManager; 5. 6.public class DBConn { 7. 8. private static String url = "jdbc:mysql://localhost:3306/langsin"; 9. private static String username = "root"; 10. privat
8、e static String password = "";
此文档下载收益归作者所有