个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在从 service worker 提供的数据源中填充 Treeview :
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({ /*...*/}
})
});
});
},
如您所见，配置已设置，以便在检查父元素时检查所有子元素，然后触发 _onCheck 方法。
这个方法现在应该作用于每一个变化的复选框:
_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);
},
这里的问题是，onCheck 事件只针对用户直接点击的节点触发，而不是针对受它影响的所有子节点。
我试图递归循环遍历 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);
}
});
}
},
效果是，事件是针对 Treeview 中直接更改的复选框引发的，而不是针对其子项引发的。 children 只会接受检查。触发父节点影响的所有子节点的检查事件的正确方法是什么？
请不要被 .bind() 和 .call() 调用激怒。由于这个 Kendo 小部件必须在 Dojo 1.10 小部件中实现，因此结构往往会变得有点复杂。
最佳答案
这是根据 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.
因此无论检查了多少 child ，该事件都只会触发一次。在您的情况下，我会做的是使用解析器处理事件，以遍历所有数据项，为每个数据项调用 _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);
};
工作演示:
<!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>关于javascript - 选中父节点时，如何在 Kendo TreeView 中触发子节点的 onCheck 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55611729/
25
4
0
我正在尝试在 Kendo 网格中获取 Kendo Tree 。 我可以实现获取数据，但不能实现树功能。 下面是相同的链接 http://dojo.telerik.com/oDakE 任何人都可以帮助我
我使用的是 Kendo Treeview ，在 Kendo Treeview 节点中，我嵌入了 Kendo 下拉菜单。 一切正常，下拉列表出现在 Treeview 节点上，但是当我展开 treevie
我在同一页面上有 TreeView 和 Grid，我需要从网格数据填充 TreeView。所以流程是这样的: 用户从下拉列表中选择某项内容并单击按钮 -> Web 服务调用 -> 使用来自 Web 服
我正在尝试在 Treeview 中嵌套一个窗口。我想要这样，当用户选择一个特定的节点时，它会打开一个 Kendo 窗口。有没有人做过这个？我在演示中没有看到太多类似的东西。 我正在使用 mvc 包装器
我想知道是否可以加载 kendo.View(...) 或 kendo.layout(...) 的内容一个单独的 html 文件？ 这是剑道的例子Hello World Single Page Appl
我有 Kendo HierarchicalDataSource绑定(bind)到 Kendo 的对象 treeview小部件。 HierarchicalDataSource只返回一个一级深度的 jso
我想为 kendo-grid-react-wrapper 引入类似 kendoDateRangePicker 的东西。有 kendoDatePicker 允许您只选择一个日期而不是两个: filter
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但我很难找到如何将数据从 draggable 对象中删除。 我的代码是这样的...... var viewMode
我正在尝试最新的 Kendo UI Web 版本，以便在我们的应用程序中使用它，特别是网格组件。 如图here网格能够在移动设备或任何浏览器中进行自适应渲染，如果 mobile属性设置为“手机”或“平
Kendo UI Web 和 Kendo UI Core 之间有什么区别 https://www.nuget.org/packages/KendoUIWeb http://www.nuget.org/
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但是我很难找到如何从 draggable 对象中删除数据。 我的代码是这样的…… var viewModel =
我正在尝试最新的 Kendo UI Web 版本，以便在我们的应用程序中使用它，特别是网格组件。 如图here网格能够在移动设备或任何浏览器中进行自适应渲染，如果 mobile属性设置为“手机”或“平
KendoUI 版本 2013.3.1119使用 Kendo MVVM 我有一个我构建的颜色选择器，它使用平面颜色选择器和使用调色板的颜色选择器。它们都可以正常运行，但平面颜色选择器的布局已关闭， s
我使用以下方法显示格式化为百分比的数值: columns.push( { field: key, hidden:
Hello 使用类似于此示例的复选框实现了自定义过滤器菜单: http://dojo.telerik.com/@SiliconSoul/oBoCu 我的问题是，如果用户选择/取消选择了一些复选框，但从
网格列可以调整大小。我想存储用户调整的列宽并在下一个 session 开始时恢复它们。 我发现存储列宽的最佳方法如下: var element = $('#grid').kendoGrid({
我有一个Kendo ui图表，该图表显示来自动态数据源的柱形图。但有时图表会打开可用空间大小的一半。当我单击某些链接或更改日期时，它会自动调整大小。知道为什么会导致它吗？ 在数据源更改事件中，当它显示
我发现 kendoui 图表有两种方法:refresh方法和redraw方法，有什么区别？我想他们俩都是再画一次图表。但是如果图表是根据 ajax 从远程数据绑定(bind)的，则请求不会再次触发。
我有一个包含太多列的剑道网格。最初我选择隐藏一些列，但后来我决定用水平滚动条显示所有列。 我通过为每一列分配宽度来做到这一点。当我这样做时，每列之间的行与标题行不同步。 我的意思是，网格数据部分的行相
enter image description here 我正在尝试使用带有复选框的 Treeview 来定义用户权限。 (2 个 Action - 启用/禁用正确) 如何从父节点获取值(id)？ K
我是一名优秀的程序员,十分优秀！