点击按钮后会弹出一个窗体,窗体里面包含两个区域,左边的源选择树 和 右边选择后的树,单击确定后会把用户选择后的树的值保存到一个textArea里面
/** * 遍历节点回调函数并置为选中状态 * * @param {Object} * node */ var ay_cell_NodeChecked = function(node) { node.getUI().toggleCheck(true); }; /** * 遍历节点回调函数并置为非选中状态 * * @param {Object} * node */ var ay_cell_NodeNoChecked = function(node) { node.getUI().toggleCheck(false); }; /** * 在取消节点选中状态时,需要判断当前选中父节点是否存在子节点被选中 ay_cell_ChildrenNodes * * @param {Object} * node */ var ay_cell_ChildrenNodes = function(node) { var selNodes = node.childNodes; node.getUI().toggleCheck(false); Ext.each(selNodes, function(nodes) { if (nodes.attributes.checked) { node.getUI().toggleCheck(true); } }); }; /** * 小区 左边的checkTree */ var tree = new Ext.tree.TreePanel({ height : 490, useArrows : true, autoScroll : true, animate : true, containerScroll : true, rootVisible : false, frame : true, root : { nodeType : 'async', children : [{ text : 'To Do', cls : 'folder', checked : false, children : [{ text : 'Go jogging', leaf : true, checked : false }, { text : 'Take a nap', leaf : true, checked : false }, { text : 'Climb Everest', leaf : true, checked : false }] }, { text : 'Remodel Project', cls : 'folder', checked : false, children : [{ text : 'Finish the budget', leaf : true, checked : false }, { text : 'Call contractors', leaf : true, checked : false }, { text : 'Choose design', leaf : true, checked : false }] }] }, // dataUrl: '/bsapp/pages/ba/js/basic/tree.json', listeners : { 'checkchange' : function(node, checked) { // 暂停触发所有的事件,true不暂停、false暂停 tree.suspendEvents(false); if (checked) { // 遍历该节点下所有子节点,包含本节点,fff为回调函数 node.cascade(ay_cell_NodeChecked); // 遍历该节点向上所有祖先节点,包含本节点,fff为回调函数 node.bubble(ay_cell_NodeChecked); } else { node.cascade(ay_cell_NodeNoChecked);// 遍历该节点下所有子节点,包含本节点,no_fff为回调函数 node.parentNode.bubble(ay_cell_ChildrenNodes);// 遍历该节点向上所有祖先节点,不包含本节点,no_ttt为回调函数 } tree.resumeEvents();// 重新触发事件 } } }); /** * 右边的checkTree * * @param {Object} * node * @param {Object} * checked */ var tree1 = new Ext.tree.TreePanel({ height : 490, useArrows : true, autoScroll : true, animate : true, enableDD : true, containerScroll : true, rootVisible : false, frame : true, root : { nodeType : 'async' }, listeners : { 'checkchange' : function(node, checked) { // 暂停触发所有的事件,true不暂停、false暂停 tree1.suspendEvents(false); if (checked) { // 遍历该节点下所有子节点,包含本节点,ay_cell_NodeChecked为回调函数 node.cascade(ay_cell_NodeChecked); // 遍历该节点向上所有祖先节点,包含本节点,ay_cell_NodeChecked为回调函数 node.bubble(ay_cell_NodeChecked); } else { // 遍历该节点下所有子节点,包含本节点,ay_cell_NodeNoChecked为回调函数 node.cascade(ay_cell_NodeNoChecked); // 遍历该节点向上所有祖先节点,不包含本节点,ay_cell_ChildrenNodes为回调函数 node.parentNode.bubble(ay_cell_ChildrenNodes); } // 重新触发事件 tree1.resumeEvents(); } } }); /** * 小区 * * @memberOf {TypeName} */ var ay_cell_formPanel = new Ext.form.FormPanel({ height : "99%", border : false, bodyStyle : 'padding:3px;', layout : 'column', items : [{ columnWidth : .5, height : 520, border : false, bodyStyle : 'padding:3px;', items : [{ id : 'search1', xtype : 'textfield', width : 191 }, { id : '111', border : false, height : 550, items : [tree] }] }, { width : 25, border : false, bodyStyle : 'padding:1px 2px;', items : [{ xtype : 'panel', height : 200, bodyStyle : "margin:2px", hideLabel : true, bodyBorder : false, border : false }, { xtype : 'button', text : ' > ', // 增加 labelStyle : 'color:red;font-weight:bold;', width : '100%', handler : function() { var msg = '', selNodes = tree.getChecked(); var node1, node2; Ext.each(selNodes, function(node) { var radix = tree1.root; if (node.getDepth() == 1) { if (null == radix.findChild("id", node.id)) { node1 = new Ext.tree.TreeNode({ id : node.id, text : node.text, leaf : node.leaf, checked : node.attributes.checked }); radix.appendChild(node1); } } if (node.getDepth() == 2) { node1 = radix.findChild("id", node.parentNode.id); if (null == node1.findChild("id", node.id)) { node2 = new Ext.tree.TreeNode({ id : node.id, text : node.text, leaf : node.leaf, checked : node.attributes.checked }); node1.appendChild(node2); } } if (node.getDepth() == 3) { node2 = node1.findChild("id", node.parentNode.id); if (null == node2.findChild("id", node.id)) { var node3 = new Ext.tree.TreeNode({ id : node.id, text : node.text, leaf : node.leaf, checked : node.attributes.checked }); node2.appendChild(node3); } } }); // 展开所有节点 for (var j = 0; j < tree1.root.childNodes.length; j++) { tree1.root.childNodes[j].expand(true); } } }, { xtype : 'button', // 删除 text : ' < ', width : '100%', handler : function() { var selNodes = tree1.getChecked(); var node1, node2; Ext.each(selNodes, function(node) { var radix = tree.root; if (node.getDepth() == 1) { if (null == radix.findChild("id", node.id)) { node1 = new Ext.tree.TreeNode({ id : node.id, text : node.text, leaf : node.leaf, checked : node.attributes.checked }); radix.appendChild(node1); } } if (node.getDepth() == 2) { node1 = radix.findChild("id", node.parentNode.id); if (null == node1.findChild("id", node.id)) { node2 = new Ext.tree.TreeNode({ id : node.id, text : node.text, leaf : node.leaf, checked : node.attributes.checked }); node1.appendChild(node2); } } if (node.getDepth() == 3) { node2 = node1.findChild("id", node.parentNode.id); if (null == node2.findChild("id", node.id)) { var node3 = new Ext.tree.TreeNode({ id : node.id, text : node.text, leaf : node.leaf, checked : node.attributes.checked }); node2.appendChild(node3); } } }); // 去掉所有选中的叶子节点 for (var i = 0; i < selNodes.length; i++) { if (selNodes[i].isLeaf()) { selNodes[i].destroy(); } } // 去掉所有空子节点的父节点 for (var ii = (tree1.getChecked().length - 1); ii >= 0; ii--) { if (tree1.getChecked()[ii].childNodes == "") { tree1.getChecked()[ii].destroy(); } } // 展开所有节点 tree.getRootNode().expand(true); } }] }, { columnWidth : .5, height : 520, border : false, bodyStyle : 'padding:3px;', items : [{ id : 'search2', xtype : 'textfield', width : 191 }, { id : 'tree1', border : false, height : 550, items : [tree1] }] }] }); /** * 小区 窗体 */ var ay_cell_win = new Ext.Window({ id : 'win1', title : '选择小区', width : 450, height : 607, modal : true, bodyStyle : 'padding:5px;', draggable : true, constrain : true, closeAction : 'hide', items : [ay_cell_formPanel], buttons : [{ id : 'sure', text : '确定', handler : function() { // 树的内容显示到下面的textArae里面 ay_cell_win.hide(); var textStr = ""; var treeRoot = tree1.root; var nodes = treeRoot.childNodes; Ext.each(nodes, function(node) { textStr += node.text; textStr += " { "; if (node.childNodes) { Ext.each(node.childNodes, function(chlidNode) { textStr += chlidNode.text; textStr += ", "; }) // 去掉最后一个逗号 textStr = textStr.substring(0, textStr.length - 2); } textStr += " }, "; }) // 去掉最后一个逗号 textStr = textStr.substring(0, textStr.length - 2); // console.log(textStr); Ext.get("textareas").dom.value = textStr; } }, { id : 'cancel', text : '取消', handler : function() { ay_cell_win.hide(); } }] }); ay_btn = new Ext.Button({ id : 'button1', xtype : 'button', width : 80, text : '选择' }); ay_btn.on('click', function() { // 在初始化时加载数据 ay_cell_win.show(); tree.root.expand(true); tree1.root.expand(true); });
1 楼
zqding
2011-01-19
给个图和页面上的调用呀,完整点呵。
2 楼
无双Rama
2011-01-21
zqding 写道
给个图和页面上的调用呀,完整点呵。
最近太忙,等有空整出来
3 楼
dengli19881102
2011-04-25
listeners : {
'checkchange' : function(node, checked) {
// 暂停触发所有的事件,true不暂停、false暂停
tree.suspendEvents(false);
if (checked) {
// 遍历该节点下所有子节点,包含本节点,fff为回调函数
node.cascade(ay_cell_NodeChecked);
// 遍历该节点向上所有祖先节点,包含本节点,fff为回调函数
node.bubble(ay_cell_NodeChecked);
} else {
node.cascade(ay_cell_NodeNoChecked);// 遍历该节点下所有子节点,包含本节点,no_fff为回调函数
node.parentNode.bubble(ay_cell_ChildrenNodes);// 遍历该节点向上所有祖先节点,不包含本节点,no_ttt为回调函数
}
tree.resumeEvents();// 重新触发事件
}
这段代码和我项目里做的功能一模一样。
'checkchange' : function(node, checked) {
// 暂停触发所有的事件,true不暂停、false暂停
tree.suspendEvents(false);
if (checked) {
// 遍历该节点下所有子节点,包含本节点,fff为回调函数
node.cascade(ay_cell_NodeChecked);
// 遍历该节点向上所有祖先节点,包含本节点,fff为回调函数
node.bubble(ay_cell_NodeChecked);
} else {
node.cascade(ay_cell_NodeNoChecked);// 遍历该节点下所有子节点,包含本节点,no_fff为回调函数
node.parentNode.bubble(ay_cell_ChildrenNodes);// 遍历该节点向上所有祖先节点,不包含本节点,no_ttt为回调函数
}
tree.resumeEvents();// 重新触发事件
}
这段代码和我项目里做的功能一模一样。
4 楼
fzj
2011-05-30
你好,我使用的时候设定树只展开一层,这样在点击的选中的时候,它的子结点不会跟着选中,只用一开始全部展开的情况下,子结点才会被选中