[英]How to trigger the onCheck event for child nodes in Kendo TreeView, when parent is checked
I'm populating a tree view from a datasource provided by a service worker:我正在从服务工作者提供的数据源填充树视图:
postCreate: function () {
var self = this;
self._loadLayerConfiguration()
.then(function (data) {
self.layerConfig = data;
self._treeView = $("#LayerList").kendoTreeView({
dataValueField: "Id",
dataTextField: "Title",
checkboxes: {
checkChildren: true
},
check: self._onCheck.bind(self),
dataSource: new kendo.data.HierarchicalDataSource({ /*...*/}
})
});
});
},
As you can see, the configuration is set up, so that all child elements to get checked, when a parent element is checked, which then triggers the _onCheck
method.如您所见,配置已设置,以便在检查父元素时检查所有子元素,然后触发
_onCheck
方法。
This method is now supposed to act on every checkbox that is changing:此方法现在应该作用于每个正在更改的复选框:
_onCheck: function (e) {
var dataItem = this._treeView.data("kendoTreeView").dataItem(e.node);
if (!dataItem.layer && dataItem.Url !== null) { //Url is null, if this is a Group layer
//load FeatureLayer, if not loaded
//load legend, if not loaded
//add to map
//omitted for brevity
}
dataItem.layer.setVisibility(dataItem.checked);
this._checkChildren.call(this, dataItem);
},
the problem here is, that the onCheck event is only triggered for the node the user has directly clicked, not for all children, that are affected by it.这里的问题是, onCheck 事件仅针对用户直接单击的节点触发,而不是针对受其影响的所有子节点。
I have tried to recursively loop through all the children of the dataItem and trigger the check event manually, but to no avail:我试图递归遍历 dataItem 的所有子项并手动触发检查事件,但无济于事:
_checkChildren: function (dataItem) {
var self = this;
if (dataItem.hasChildren) {
var children = dataItem.children.data();
children.forEach(function (child) {
child.set("checked", dataItem.checked);
//self._treeView.trigger("check", {
// node: self._treeView.findByUid(child.uid)
//});
if (child.hasChildren) {
//recurse
self._checkChildren.call(self, child);
}
});
}
},
The effect is, that the event is raised for the directly changed checkbox in the tree view, but not its children.结果是,为树视图中直接更改的复选框引发事件,而不是其子项。 The children only do get checked.
孩子们只做检查。 What is a correct way to trigger the check event for all child nodes affected by a parent node?
为受父节点影响的所有子节点触发检查事件的正确方法是什么?
Please do not get irritated by the .bind()
and .call()
invocations.请不要被
.bind()
和.call()
调用激怒。 Since this kendo widget has to be implemented into a Dojo 1.10 widget, the structure tends to get a bit complex.由于这个 kendo 小部件必须在 Dojo 1.10 小部件中实现,因此结构往往会变得有点复杂。
That's the expected behaviour according to the documentation :根据文档,这是预期的行为:
Triggered after the user has checked or unchecked a checkbox.
在用户选中或取消选中复选框后触发。 If checkChildren is true, the event is triggered after all checked states are updated.
如果 checkChildren 为 true,则在所有选中状态更新后触发该事件。
So the event will be triggered only once, no matter how many children was checked.因此,无论检查了多少个孩子,该事件都只会触发一次。 What I would do in your case is to handle the event with a parser to loop through all dataItems calling the
_onCheck
event for each one:在您的情况下,我会做的是使用解析器处理事件以遍历所有数据项,为每个数据项调用
_onCheck
事件:
check: function(e) {
_onCheck(this.dataItem(e.node));
$(e.node).find("li").each((i, node) => _onCheck(this.dataItem(node)));
}
_onCheck: function _onCheck(dataItem) {
console.log(dataItem);
};
Working demo:工作演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script> </head> <body> <div id="treeview"></div> <script> let _onCheck = function _onCheck(dataItem) { console.log(dataItem); }; $("#treeview").kendoTreeView({ checkboxes: { checkChildren: true }, dataSource: [ { text: "foo", items: [ { text: "bar" } ] } ], check: function(e) { _onCheck(this.dataItem(e.node)); $(e.node).find("li").each((i, node) => _onCheck(this.dataItem(node))); } }); </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.