树形tree组件详解

来源：互联网发布：安装linux设置主机名编辑：程序博客网时间：2024/05/24 16:16

1.树形的拖拽

Ext.tree.viewDDDPlugin

alias:"plugin.treeviewdragdrop",

需要配置：

viewConfig:{

plugins:{

ptype:"treeviewdragdrop"

}

事件

listeners:{

drop:function(node,data,dropRec,dropPosition){

//放下之后触发

beforedrop:function(node,data,overModel,dropPostion,dropFunction,options){

//放下之前

}

代码配置：

viewConfig:{

plugins:{

ptype:"treeviewdragdrop",

appendOnly:true

listeners:{

beforedrop:function(node,data,overModel,dropPostion,dropFunction,options){

// if(overModel.get("leaf")){

// overModel.set("leaf",false);

// }

drop:function(node,data,overModel,dropPostion,options){

//ajax的操作把数据同步到后台数据库

alert("把"+data.records[0].get("text")+"移动到"+overModel.get("text"));

}

2.模拟拷贝和粘贴

(1)声明属性

config:{

copyNodes:""//声明一个属性，并且有对应的setget方法，它充当的剪切板的作用

(2)事件实现：

"deptTreebutton[id=copy]":{

//复制功能

click:function(b,e){

vartree=b.ownerCt.ownerCt;

//得到数据集合

varnodes=tree.getChecked();

if(nodes.length>0){

//把数据放到剪切版中

tree.setCopyNodes(Ext.clone(nodes));

alert("你已经拷贝了"+nodes.length+"个节点");

//去掉选中状态

for(vari=0;i<nodes.length;i++){

nodes[i].data.checked=false;

//更新一下信息

nodes[i].updateInfo();

}

}else{

alert("请选择数据");

}

"deptTreebutton[id=paste]":{

click:function(b,e){

vartree=b.ownerCt.ownerCt;

varcheckednodes=tree.getChecked();

if(checkednodes.length==1){

//被追加孩子的节点

varnode=checkednodes[0];

//去前切版中取数据

varnodes=tree.getCopyNodes();

//需要做一下后台同步，伴随这id的改变等操作

//最好在剪切板中的数据呈现在页面中，把东西遍历显示出来

if(nodes.length>0){

for(vari=0;i<nodes.length;i++){

varn=nodes[i].data;

n["id"]=n["id"]+"1";

node.appendChild(n);

}

}else{

alert("剪切板中无数据或者没有选择要追加孩子的节点");

}

3.删除操作

在事件中实现

"deptTreebutton[id=delete]":{

click:function(b,e){

vartree=b.ownerCt.ownerCt;

varnodes=tree.getChecked();

if(nodes.length>0){

for(vari=0;i<nodes.length;i++){

nodes[i].remove();

}

}else{

alert("你没有选择要删除的数据");

}

4.多列数

声明一个model 在controller层中指定，并在stroe层中配置model，然后配置view层中的tree

//配置多列树

columns:[

//树形的模式，xtype指定

{

xtype:"treecolumn",

text:"text",

width:150,

dataIndex:"text"

//普通的模式

{

text:"info",

width:150,

dataIndex:"id"

}

5.单机树形根节点，子节点也被选中

"deptTree":{

checkchange:function(node,checked,options){

if(node.data.leaf==false){

if(checked){

//首先打开节点

node.expand();

//遍历孩子如果孩子不是叶子，可以用findChild 和isLeaf两个方法来配合使用递归

node.eachChild(function(n){

n.data.checked=true;

n.updateInfo({checked:true});

});

}else{

node.expand();

//遍历孩子如果孩子不是叶子，可以用findChild 和isLeaf两个方法来配合使用递归

node.eachChild(function(n){

n.data.checked=false;

n.updateInfo({checked:false});

});

}

}else{//单击叶子

if(!checked){

node.parentNode.data.checked=false;

node.parentNode.updateInfo({checked:false});

}