- var Tree = Ext.tree;
- var tree = null;
- Ext.onReady(function(){
- tree = new Tree.TreePanel({
- el:'tree-div',
- onlyLeafCheckable:false,
- rootVisible: true,
- autoScroll:true,
- animate:false,//是否动画
- enableDD:true,// 是否支持拖放
- containerScroll:true,
- lines:true,
- checkModel:'cascade',
- loader:new Tree.TreeLoader({dataUrl:'../info/rss.do?method=getJsonArray',
- baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI}
- })
- });
- // set the root node
- var root = new Tree.AsyncTreeNode(
- {
- "text":"我的网摘",
- "id":"01",
- "allowDrag":false //false表示不能被拖动
- }
- );
- //绑定节点加载之前事件
- tree.on('beforeload',function(node){
- if(node.id!='01'){
- tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id;
- }
- });
- //绑定节点点击事件
- /**//*
- tree.on('click', function(node){
- if(node.id!='root'){
- alert(node.id);
- alert(node.text);
- alert(node.href);
- }
- });
- */
- //绑定节点拖动事件,找了很久树节点拖动的实现,终于在老外的帖子发现上了这个实现,拖动以后所需的信息已经捕获,与后台联动的函数 加上即可实现TREE的拖拽
- tree.on('nodedrop',
- function(e){
- if(e.point=='append'){
- alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下!');
- var resultUrl = "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
- var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
- }
- else if(e.point=='above'){
- //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!');
- var resultUrl = "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
- var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
- }else if(e.point=='below'){
- //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!');
- var resultUrl = "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
- var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
- }
- }
- );
- //绑定节点右键菜单功能
- tree.on('contextmenu',function(node,event){
- // alert("node.id="+ node.id);
- event.preventDefault(); //这行是必须的
- rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单
- //alert(node.id);
- document.getElementById('rootid').value=node.id;
- });
- //定义右键菜单
- var rightClick = new Ext.menu.Menu({
- id :'rightClickCont',
- items : [{
- id:'rMenu1',
- text : '编辑',
- //增加菜单点击事件
- handler:function (node){
- //alert(node.dropNode.id);
- }
- }, {
- id:'rMenu2',
- text : '删除'
- }, {
- id:'rMenu3',
- text : '菜单3'
- }]
- });
- tree.setRootNode(root);
- // render the tree
- tree.render();
- root.expand();
- });
ExtJs Tree的操作:注册事件,拖拽(目标位置的判断)、点击事件、加载之间事件、右键菜单
最新推荐文章于 2019-10-24 19:11:18 发布