Extjs选中当前节点后自动选中子节点和父节点

最新推荐文章于 2018-04-02 09:11:18 发布

weixin_34116110

最新推荐文章于 2018-04-02 09:11:18 发布

阅读量137

点赞数

文章标签： javascript php json ViewUI

原文链接：https://my.oschina.net/junn/blog/110637

版权

为什么80%的码农都做不了架构师？>>>

核心代码：

//根据当前节点选中父节点及其子节点 
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