1. 程式人生 > >【無事水一發】ExtJS4 Ext.tree.Panel (無限層級)帶複選框樹勾選(父級子級)聯動程式碼

【無事水一發】ExtJS4 Ext.tree.Panel (無限層級)帶複選框樹勾選(父級子級)聯動程式碼

原創,轉載請註明出處~~

勾選父節點,之下所有子節點自動勾選;反之自動取消子節點勾選(無限層級)

勾選所有子節點,父節點自動勾選;反之自動取消父節點勾選(無限層級)

Ext.onReady(function() {
    var store = Ext.create('Ext.data.TreeStore', {//測試資料
    	root:{
    		text:'Root',
    		expanded: true,
    		checked: false,
    		children:[{
    		    "text": "2013年", 
    		    "expanded": true,
    		    "checked": false,
    		    "children": [{
    		        "text": "一月",
    		        "leaf": false,
    		        "checked": false,
    		        "children":[{
    		        	"text": "1日", 
    				    "leaf": false,
    				    "checked": false,
    				    "children":[{
    				    	"text": "1時", 
    					    "leaf": true,
    					    "checked": false
    				    },{
    				    	"text": "2時", 
    					    "leaf": true,
    					    "checked": false
    				    },{
    				    	"text": "3時", 
    					    "leaf": true,
    					    "checked": false
    				    },{
    				    	"text": "4時", 
    					    "leaf": true,
    					    "checked": false
    				    }]
    		        },{
    		        	"text": "2日", 
    				    "leaf": true,
    				    "checked": false
    		        },{
    		        	"text": "3日", 
    				    "leaf": true,
    				    "checked": false
    		        },{
    		        	"text": "4日", 
    				    "leaf": true,
    				    "checked": false
    		        },{
    		        	"text": "5日", 
    				    "leaf": true,
    				    "checked": false
    		        },{
    		        	"text": "6日", 
    				    "leaf": true,
    				    "checked": false
    		        }]
    		    },{
    		        "text": "二月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "三月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "四月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "五月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "六月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "七月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "八月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "九月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "十月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "十一月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "十二月",
    		        "leaf": true,
    		        "checked": false
    		    }]
    		},{
    		    "text": "2014年", 
    		    "expanded": false,
    		    "checked": false,
    		    "children": [{
    		        "text": "一月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "二月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "三月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "四月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "五月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "六月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "七月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "八月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "九月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "十月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "十一月",
    		        "leaf": true,
    		        "checked": false
    		    },{
    		        "text": "十二月",
    		        "leaf": true,
    		        "checked": false
    		    }]
    		}]
    	}
    });

    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: true,
        useArrows: true,
        frame: true,
        title: 'Check Tree',
        renderTo: '_main',
        width: 200,
        height: 450,
        listeners:{
        	'checkchange':function(node, checked, eOpts) {//這裡是關鍵
        		function ck(node) {
        			Ext.Array.each(node.childNodes, function(item, index, allItems){
        				item.set('checked', checked);
        				if(!item.isLeaf() && node.hasChildNodes())) ck(item);
        			});
        		}
        		function rck(node) {
        			var cnt = 0;
        			Ext.Array.each(node.parentNode.childNodes, function(item, index, allItems){
        				if(item.get('checked')) {
        					cnt += 1;
        				}
        			});
        			node.parentNode.set('checked', (cnt == node.parentNode.childNodes.length));
        			if(!node.parentNode.isRoot()) rck(node.parentNode);
        		}
        		if(!node.isLeaf() && node.hasChildNodes()) {
        			ck(node);
        		}
        		rck(node);
        	}
        }
    });
});