检查 Ext.tree.AsyncTreeNode 的所有子节点
Check all child nodes of a Ext.tree.AsyncTreeNode
如果选中,我正在尝试检查节点的所有子节点。
添加了侦听器
tree.addListener('expandnode', this.onTreeNodeExpand, this);
功能
onTreeNodeExpand: function (node) {
if (node.hasChildNodes()) {
node.eachChild(function (n) {
var checked = n.parentNode.ui.isChecked();
if (checked != undefined && checked)
{
n.getUI().toggleCheck(checked);
}
});
}
}
由于我有异步树节点,所有子记录都将按需加载,并且第一次扩展节点时,我得到此语句的假
数if (node.hasChildNodes())//返回 false
它认为"扩展节点"event is called same time while Async is in progress
.
如何捕获一个事件,在加载异步数据后,检查是否选中此节点并将所有子节点设置为选中?
环境:EXTJS 3.4
由于在这种情况下,我在 EXTJS 文档上没有得到太多帮助,因此我按如下方式处理了它。
我对子记录的所有异步调用都将通过一个函数,在该 ajax 成功函数中,一旦加载数据,我调用了另一个函数来根据父节点设置复选框。
ajaxForLoading: function (node, deep, anim, isDirectList, childrenConfig) {
Ext.Ajax.request({
url: url,
params: param,
method: 'POST',
success: function (response) {
this.loadRelationNodeChildren(node, json, deep, anim, childrenConfig);
}
},
loadRelationNodeChildren: function (node, json, deep, anim, childrenConfig){
// My other logic
expandChildNodes(node, this);
},
expandChildNodes: function(node, scope){
var checked = node.ui.isChecked();
node.eachChild(function (n) {
if (checked != undefined) {
var tree = n.ownerTree;
if (n.isLeaf())
tree.suspendEvents();
n.getUI().toggleCheck(checked);
if (n.isLeaf())
tree.resumeEvents();
}
});
}
我使用"beforechildrenrendered","expand","checkchange"事件来切换带有异步树的检查节点。
root: {nodeType: 'async',text: 'root', id:'-1'},
dataUrl: url,
listeners: {
scope: this,
'beforechildrenrendered': function(node) {
node.eachChild(function(childNode) {
childNode.on('checkchange', function(node, checked) {
childNode.suspendEvents();//need suspend events first
childNode.cascade(function(n) {
n.attributes.checked = checked;
n.getUI().toggleCheck(checked);
});
childNode.resumeEvents();//resume events
if(!checked) {
return;
}
if(!node.isLeaf()) {
node.expand();
}
});
},this);
node.on('expand', function(node) {
if(node.id == '-1') {//root
return;
}
if(node.parentNode && node.parentNode.attributes.checked) {
node.attributes.checked = true;
node.getUI().toggleCheck(true);
}
if(node.attributes.checked) {
for(var i = 0; i < node.childNodes.length; i++) {
node.childNodes[i].expand();
}
}
});
}
}
相关文章:
- 选择<李>使用普通JavaScript的子节点,而不是孙节点
- js循环遍历单击的元素子节点
- 如何将数据添加到json的子节点
- 删除HTML节点而不删除其子节点
- 如何在javascript DOM api中获取具有给定条件的子节点
- 仅使用某些子节点访问xml中父节点的子节点
- 检测单击子节点并发送槽事件处理程序
- 从 d3.js 中的树中选择节点的子节点
- 访问所选剑道树视图节点的子节点
- 为什么正文标记后的脚本标记在子节点中计数
- 难以获取使用属性选择的节点的子节点
- 使用Javascript设置带有子节点的父节点的类's文本等于.
- 如何确定父节点是否有子节点
- 在没有 jquery 的情况下更改子节点(父节点具有 ID)中的链接文本
- Javascript - 子节点计数
- 在子节点上重复
- 如何在D3.js基于力的标签布局图中获取公共子节点
- 如何访问React中的子节点
- js初学者-如何在比网页中的DOM节点低一个级别上立即解析所有子节点
- Javascript E4X-返回节点及其子节点的文本