Extjs选中当前节点后自动选中子节点和父节点
//根据当前节点选中父节点及其子节点
tree.on('checkchange', function(node, flag) {
//获取所有子节点
node.cascade( function( node ){
node.attributes.checked = flag;
node.ui.checkbox.checked = flag;
return true;
});
//获取所有父节点
var pNode = node.parentNode;
for(; pNode.id !="root"; pNode = pNode.parentNode ){
if (flag || tree.getChecked(id, node.parentNode) == "") {
pNode.ui.checkbox.checked = flag;
pNode.attributes.checked = flag;
}
}
});
示例代码:
<html>
<head>
<title>树-实例</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<style type="text/css">
#tree{
position:absolute;
left:30px;
top:30px;
width:159px;
z-index:1;
}
.complete .x-tree-node-anchor span {
/*
text-decoration: line-through;
color: #777; */
color:#FF0000;
}
</style>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
el:'tree',
autoScroll:true,
collapsible:true,
loader:new Ext.tree.TreeLoader({dataUrl:'treelist.php'}),
enableDD:true,
listeners: { 'checkchange': function(node, checked){
if(checked){
node.getUI().addClass('complete');
}else{
node.getUI().removeClass('complete');
}
}
},
buttons:[{
text:'获取被选节点ID',
handler: function(){
var ids='', seldNodes=tree.getChecked();
Ext.each(seldNodes,function(node){
if(ids.length>0){
ids+=',';
}
ids+=node.id;
});
Ext.Msg.alert('提示信息',ids.length>0?ids:'没有节点被选中');
}
}]
});
var root=new Ext.tree.AsyncTreeNode({id:'root',text:'树根',checked:false});
tree.setRootNode(root);
tree.on('checkchange',function(node,flag){
//获取所有子节点
node.cascade(function(node){
node.expand(); //先展开该节点
node.attributes.checked = flag;
node.ui.checkbox.checked = flag;
if(flag){
node.getUI().addClass('complete');
}
else{
node.getUI().removeClass('complete');
}
return true;
});
});
tree.render();
root.expand(false,true);
});
</script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
数据(treelist.php)
<?php
if($_POST['node']=='root'){ //传递的参数是以POST方式的node,值为id的值.
//这里可以从数据库中取数据,然后构建成JSON格式.
//checked:显示复选框 true默认选中,false默认不选中
$s="[{id:'1',text:'not leaf',checked:false,children:[{id:'3',text:'is leaf',leaf:true,checked:false},
{id:'4',text:'is leaf',leaf:true,checked:false},
{id:'5',text:'is leaf',leaf:true,checked:false}]},
{id:'2',text:'is leaf',leaf:true,checked:false},
{id:'6',text:'not leaf',checked:false,children:[{id:'8',text:'is leaf',leaf:true,checked:false},
{id:'9',text:'not leaf',checked:false,children:[{id:'11',text:'is leaf',leaf:true,checked:false},
{id:'12',text:'is leaf',leaf:true,checked:false},
{id:'13',text:'is leaf',leaf:true,checked:false}]},
{id:'10',text:'is leaf',leaf:true,checked:false}]},
{id:'7',text:'not leaf',checked:false}]";
}
else{
$s='';
}
echo $s;
?>
转载于:https://my.oschina.net/junn/blog/110637