【無事水一發】ExtJS4 Ext.tree.Panel (無限層級)帶複選框樹勾選(父級子級)聯動程式碼
阿新 • • 發佈:2018-11-11
原創,轉載請註明出處~~
勾選父節點,之下所有子節點自動勾選;反之自動取消子節點勾選(無限層級)
勾選所有子節點,父節點自動勾選;反之自動取消父節點勾選(無限層級)
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); } } }); });