是否有方法仅为中的叶节点启用复选框
Kendo TreeView
?
我能想到的一种方法是禁用所有节点的复选框,当加载TreeView时,再为没有子节点的节点启用复选框。
但是我找不到
onload
TreeView的事件,这将是一项昂贵的操作。有什么办法吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script>
$(function() {
let data = {
"Level1":[
{
"id":"idlevel1",
"name":"Level1",
"Level2":[
{
"id":"idlevel2",
"name":"Level2",
"Level3":[
{
"id":"id1level3",
"name":"Level3_1",
"Level4":[
{
"id":"id1level4",
"name":"1_level4"
},
{
"id":"id2level4",
"name":"2_level4"
}
]
},
{
"id":"id2level3",
"name":"Level3_2",
"Level4":[
{
"id":"id1level4",
"name":"1_level4"
},
{
"id":"id2level4",
"name":"2_level4"
}
]
}
]
}
]
}
]
};
$("#treeview").kendoTreeView({
dataTextField: "name",
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema:{
data: "Level1",
model:{
children:{
schema:{
data:"Level2",
model:{
children:{
schema:{
data:"Level3",
model:{
children:{
schema:{
data:"Level4"
}
}
}
}
}
}
}
}
}
}
}),
checkboxes:{
checkedChildren: true
},
});
});
</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>
根据@Shai,我们可以使用带有以下代码的复选框模板
template: (e) => {
return e.item.hasChildren ? '' : '<input type="checkbox" name="check' + e.item.id + '" value = "true" />';
}
