Kendo Treeview复选框与所选节点一起选中



我设法使复选框一次只能选中,但我需要帮助找到解决方案,如果选中复选框,节点也将被选中k-state-selected。感谢你的帮助!

这里我提供了一个简单的演示

看看这个:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
checkboxes: true,
check: function(e){
var dataItem = this.dataItem(e.node);
var rootNodes = $("#treeview").getKendoTreeView().dataSource.data();
traverse(rootNodes, function(node) {
if (node != dataItem) {
node.set("checked", false);
//node.select($());
//node.select().find("span.k-state-selected")
}
});
},
	select: function(e) {
var dataItem = this.dataItem(e.node);
dataItem.checked = true;
$(e.node).find('input').prop('checked', 'checked');
this.trigger('check', e);
},
dataSource: [ { id: 3, text: "about.html" },
{ id: 4, text: "index.html"},
{ id: 5, text: "logo.png"},                        
{ id: 7, text: "mockup.jpg" },
{ id: 8, text: "Research.pdf"},
{ id: 10, text: "February.pdf" },
{ id: 11, text: "March.pdf" },
{ id: 12, text: "April.pdf" }]
});

function traverse(nodes, callback) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var children = node.hasChildren && node.children.data();
callback(node);
if (children) {
traverse(children, callback);
}
}
}

	$("#treeview").on('change', 'input', function() {
let $li = $(this).closest('li');
$("#treeview").data('kendoTreeView').select($li);
});
</script>
</body>
</html>

我添加了以下代码:

// To the grid options
select: function(e) {
var dataItem = this.dataItem(e.node);
dataItem.checked = true;
$(e.node).find('input').prop('checked', 'checked');
this.trigger('check', e);
},
// After grid initialization
$("#treeview").on('change', 'input', function() {
let $li = $(this).closest('li');
$("#treeview").data('kendoTreeView').select($li);
});

第一个片段确保通过单击项目的标签来选择项目,复选框也会被选中。该事件还调用check事件以取消选中其他项目。

最后一个确保更改的复选框将触发select事件,执行与上面相同的操作。

我希望它能有所帮助。

最新更新