tree :樹 node:節點
1、全部展開 tree.expandAll();
2、全部收縮 tree.collapseAll();
3、得到父節點 node.parentNode
4、判斷是否有父節點 node.parentNode==null
5、判斷是否有子節點 node.hasChildNodes()
6、獲取下一級所有子節點 node.eachChild(function(child) { })
7、獲取選擇的節點 tree.getSelectionModel().getSelectedNode()
8、設置選中節點 node.select()
9、上移節點 node.selectPrevious();
10、下移節點 node.selectNext();
11、獲取節點ID node.id
12、獲取節點值 node.text
13、獲取節點提示 node.attributes.qtip
帶選擇框
14、獲取選中的的節點
var check= tree.getChecked();
Ext.each(check ,function(node){})
15、獲取是否選擇 node.getUI().checkbox.checked;
16、設置節點選擇 node.ui.toggleCheck(true); //顯示選中 node.attributes.checked = true; //賦值
17、設置一個新的節點
var newNode=new Ext.tree.TreeNode({id:'id',text:'text',iconCls:'icon-group',qtip:'tip'}); iconCls 導入的是CSS設置的背景圖片(節點圖標)
css寫法: .x-tree-node-leaf .icon-group{ background-image:url(group.png);} 前.x-tree-node-leaf必寫
18、插入新的節點 node.appendChild(newNode);
19、刪除節點 node.remove();
項目中通常獲取節點選中父節點或全部子節點(代碼如下):
tree.on('checkchange', function(node) {
tree.suspendEvents(); //暫停所有監聽事件的執行
treeclick(node);
parentclick(node);
tree.resumeEvents(); //重新開始所有監聽事件的執行
}, tree);
//選中父節點
function parentclick(node){
var parentNode = node.parentNode;//獲取父節點
if (parentNode != null) {
var isNotChecked = false;
var someChecked = false;
var childCount = parentNode.childNodes.length;
for (var i = 0; i < childCount; i++) {
var child = parentNode.childNodes[i];
if (child.attributes.checked) {
someChecked = true;
} else {
isNotChecked = true;
}
}
if (someChecked) {
parentNode.attributes.checked = true;
parentNode.ui.toggleCheck(true);
}
else if (isNotChecked) {
parentNode.attributes.checked = false;
parentNode.ui.toggleCheck(false);
}
parentclick(parentNode);//遞歸選中父節點
}
}
//選擇子節點
function treeclick(node){
var isChecked = node.attributes.checked;//獲取選中狀態
if (node.hasChildNodes()) { //是否有子節點
node.eachChild(function(child) { //循環下一級的所有子節點
child.ui.toggleCheck(isChecked); //選中
child.attributes.checked = isChecked; //賦值
treeclick(child); //遞歸選中子節點
});
}
}