TreePanel 简单实例。
<link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-neptune.css"/> <script src="Js/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="Js/ext-4.2/ext-all-dev.js" type="text/javascript"></script> <script type="text/javascript"> var tree; $(document).ready(function() { //Ext.create('Ext.tree.Panel', { }); tree = new Ext.tree.TreePanel({ renderTo: 'tree1', title: 'Simple Tree', multiSelect: true, width: 200, height: 450, viewConfig: { onCheckboxChange: function(e, t) { var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record; if (item) { record = this.getRecord(item); var check = !record.get('checked'); //getSelectedNodes() record.set('checked', check); if (check) { record.bubble(function(parentNode) { parentNode.set('checked', true); }); record.cascadeBy(function(node) { node.set('checked', true); }); // record.expand(); 联动效果 自动收起 自动展开 // record.expandChildren(); } else { // record.collapse(); // record.collapseChildren(); record.cascadeBy(function(node) { node.set('checked', false); }); record.bubble(function(parentNode) { var childHasChecked = false; var childNodes = parentNode.childNodes; if (childNodes || childNodes.length > 0) { for (var i = 0; i < childNodes.length; i++) { if (childNodes[i].data.checked) { childHasChecked = true; break; } } } if (!childHasChecked) { parentNode.set('checked', false); } }); } } } }, root: { text: 'Root', expanded: true, //是否展开子节点,默认为false checked: true, children: [ { id: '1', text: 'Child 1', checked: true, leaf: true }, { id: '2', text: 'Child 2', checked: true, leaf: true }, { id: '3', text: 'Child 3', checked: true, expanded: true, children: [{ id: '4', text: 'Grandchild', checked: true, leaf: true}] } ] } }); //窗体 var win = new Ext.Window({ title: '窗口', width: 476, height: 574, resizable: true, modal: true, closable: true, maximizable: true, minimizable: true, items: tree }); win.show(); var attr = tree.getChecked(); for (var le = 0; le < attr.length; le++) { var json = eval(attr[le].getData());
json.text; } }); </script>
root:是树的根节点。
checked: true 树有选择框。
onCheckboxChange:设置树连及效果,父级选中后 所有子集也全部选中。
getChecked():获取所有选择的 树节点数据。
getChecked()下的getData()获取每个节点的数据 。