js 文件
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
title: 'My Task List',
height: 450,
width: 600,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
dataUrl: 'check-nodes.json',
buttons: [{
text: 'Get Completed Tasks',
handler: function(){
var msg = '', selNodes = tree.getChecked(); // getNode select return array
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show({
title: 'Completed Tasks',
msg: msg.length > 0 ? msg : 'None',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
});
/*
* tree.suspendEvents() 方法说明：暂停触发所有的事件
* tree.resumeEvents() 方法说明：重新触发事件
*/
tree.on('checkchange', function(node, checked) {
node.expand(); // 展开树
var no = 0;
// **************当被单击的节点是叶子节点时*******************
if(node.isLeaf()){
/*
* 子节点全部选中 ， 父节点被选中
*/
// 选中子节点中的一个选项
if(node.getUI().isChecked()){
// 父节点在没被选中的情况下
if(!node.parentNode.getUI().isChecked()){
// 遍历子节点的选项
var num = node.parentNode.childNodes.length;
//alert('num = '+num);
node.parentNode.eachChild(function(child){
// 子节点中有一项未被选中，停止 跳出循环
if(child.getUI().isChecked()){
no++;
}
});
if(no==num){
//alert("ok 选中父节点");
node.parentNode.ui.toggleCheck(true);
node.parentNode.attributes.checked = true;
}
// 父节点选中情况下不做处理
}else{
return;
}
}
/*
* 子节点中有一个未被选中 ， 父节点将不被选中
*/
if(!node.getUI().isChecked()){
//no--;
if(node.parentNode.text != undefined){
node.parentNode.ui.toggleCheck(false);
node.parentNode.attributes.checked = false;
}
}
}
// **************当被单击的节点不是叶子节点时*******************
var i = 0;
var j = 0;
// 叶子父节点选中
if(!node.isLeaf()){
// 累加
// 遍历子节点的选项
var num = node.parentNode.childNodes.length;
node.parentNode.eachChild(function(child){
if(child.getUI().isChecked()){
no++;
}
});
if(no==num){
node.parentNode.ui.toggleCheck(true);
node.parentNode.attributes.checked = true;
}
// *************** 全选 ****************
if(node.getUI().isChecked()){
tree.suspendEvents(); //暂停触发所有事件
checkAll(node,0,0);
tree.resumeEvents(); //重新出发所有事件
}
// **************** 去选（父节点选项去选） *******************
// 叶子父节点的去选情况
if(!node.getUI().isChecked()){
node.eachChild(function(child){
i++;
if(child.getUI().isChecked()){
j++;
}
});
// 表面点击了全部去选
if(i==j){
outOfcheck(node,0,0); // 调用全消的方法
}
// 判断该节点上面是否还有父节点
// 1. 有的话 去掉父节点的选项
if(node.parentNode.text!=undefined){
//alert('他有父节点');
if(node.parentNode.getUI().isChecked()){
node.parentNode.ui.toggleCheck(false);
node.parentNode.attributes.checked = false;
return;
}
// 2. 没有的话 // 不做处理
}else{
//alert('他没有父节点');
}
}
// 全选的方法
function checkAll(node,i,j){
var z = [];
// 全部选中 Begin
this.node = node;
node.eachChild(function(child){
j++;
if(!child.getUI().isChecked()){
i++;
if(child.hasChildNodes()){
z.push(child);
}
}
});
if(j>=i){
tree.suspendEvents(); //暂停触发所有事件
node.eachChild(function(child){
if(!child.getUI().isChecked()){
child.ui.toggleCheck(true);
child.attributes.checked = true;
}
});
tree.resumeEvents(); //重新触发所有事件
}
if(z.length>0){
for(var s=0;s<z.length;s++){
checkAll(z[s],0,0);
}
}
// 全部选中 End
}
// 全部去选的方法
function outOfcheck(node,i,j){
var z = [];
// 全部去选 Begin
this.node = node;
node.eachChild(function(child){
j++;
if(child.getUI().isChecked()){
i++;
if(child.hasChildNodes()){
z.push(child);
}
}
});
if(i==j){
tree.suspendEvents(); //暂停触发所有事件
node.eachChild(function(child){
if(child.getUI().isChecked()){
child.ui.toggleCheck(false);
child.attributes.checked = false;
}
});
tree.resumeEvents(); //重新出发所有事件
}
if(z.length>0){
for(var s=0;s<z.length;s++){
outOfcheck(z[s],0,0);
}
}
// 全部去选 End
}
}
});
tree.getRootNode().expand(true); // 找到根节点展开
});
html 文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/ColumnNodeUI.css" />
<link rel="stylesheet" type="text/css" href="column-tree.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../code-display.js"></script>
<script type="text/javascript" src="../ux/ColumnNodeUI.js"></script>
<script type="text/javascript" src="column-tree.js"></script>
<!-- EXAMPLES -->
<script type="text/javascript" src="../shared/examples.js"></script>
</head>
<body>
<h1>ColumnTree Example</h1>
<p>Demonstrates extending the native <tt>Ext.tree.TreePanel</tt> and <tt>Ext.tree.TreeNodeUI</tt>
to display basic columns via the custom <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnTree</a>
and <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnNodeUI</a> classes.</p>
<p>The js is not minified so it is readable. See <a href="column-tree.js">column-tree.js</a>.</p>
</body>
</html>
josn 文件
[{
id:1001,
text: 'To Do',
checked: false,
cls: 'folder',
children: [{
text: 'Go jogging',
id:100101,
checked: false,
children:[{id:10010101,text:'aaa',leaf:true,checked:false},{id:10010102,text:'bbb',leaf:true,checked:false}]
},{
text: 'Take a nap',
id:100102,
leaf: true,
checked: false
},{
text: 'Climb Everest',
id:100103,
leaf: true,
checked: false
}]
},{
text: 'Grocery List',
id:1002,
checked: false,
cls: 'folder',
children: [{
text: 'Bananas',
id:100201,
leaf: true,
checked: false
},{
text: 'Milk',
id:100202,
leaf: true,
checked: false
},{
text: 'Cereal',
id:100203,
leaf: true,
checked: false
},{
text: 'Energy foods',
id:100204,
checked: false,
cls: 'folder',
children: [{
text: 'Coffee',
id:10020401,
leaf: true,
checked: false
},{
text: 'Red Bull',
id:10020402,
leaf: true,
checked: false
}]
}]
},{
text: 'Remodel Project',
id:1003,
checked: false,
cls: 'folder',
children: [{
text: 'Finish the budget',
id:100301,
leaf: true,
checked: false
},{
text: 'Call contractors',
id:100302,
leaf: true,
checked: false
},{
text: 'Choose design',
id:100303,
leaf: true,
checked: false
}]
}]