我们的 Web 应用程序中已经实现了剑道树视图。在我们的新要求中，我们必须在树视图中添加一些额外的控件。
场景 1：一旦用户从树形视图中选择了一个复选框，一个文本框应该显示在选中的复选框附近（基于某些业务逻辑）。控制所需的数据将在 JS 对象中。
场景 2：一旦用户从树形视图中选择了一个复选框，一个组合框应显示在选中的复选框附近（基于某些业务逻辑）。控制所需的数据将在 JS 对象中。 这些控件应该在树视图的任何级别创建（基于代码中已经存在的某些业务逻辑）
我正在寻找 kendo-ui 中的内置功能，我可以在其中在树视图控件中添加文本框或组合框。 我浏览了剑道网站上的很多线程，但没有得到任何类似的实现。
请参阅下面的屏幕截图以了解具体要求。
【问题讨论】：
标签： javascript jquery kendo-ui kendo-treeview
我认为没有 内置 功能。这是一种自定义行为，因此您必须自己制作。您可以使用模板来实现它。由于你没有添加任何代码，我自己做了一个演示：
小部件配置：
$("#treeview").kendoTreeView({
dataSource: {
data: [{
text: "Item 1",
value: 1,
showCombo: false,
checked: false,
items: [{
text: "Item 1.1",
value: 2,
showCombo: true,
checked: false
},{
text: "Item 1.2",
value: 3,
showCombo: true,
checked: true
}]
}]
},
checkboxes: true,
template: kendo.template($("#item-template").html())
});
$("#treeview")
.on("change", "input.k-checkbox", function() {
var $select = $(this).closest("div").find("select");
if ($select.length > 0) {
$select[($(this).is(":checked") ? "show" : "hide")]();
}
});
模板：
<script id="item-template" type="text/x-kendo-template">
# if (data.item.showCombo) { #
#= data.item.text #
<select # if (!data.item.checked) { # #="style='display:none'"# # } #>
<option></option>
<option>Mechanical Engineering</option>
<option>Chemical Engineering</option>
<option>Electrical Engineering</option>
</select>
# } else { #
#= data.item.text #
# } #
</script>
希望对你有帮助。
【讨论】：
您可以使用 DontVoteMeDown 建议的 Kendo Options 对象的模板配置。这是一个更符合您要求的解决方案： 向需要它的树节点添加另一个数据条目：
{
text: "Item 1.1",
value: 2,
checked: false,
extraOptions: ["", "Electrical Engineer", "Software Engineer"] // <-- Like this
}
然后在模板中你像这样使用它：
<script id="item-template" type="text/x-kendo-template">
# if (data.item.extraOptions) { #
#= data.item.text #
<select>
# for (let index in data.item.extraOptions) { #
# if (index == +index) { #
<option>#= data.item.extraOptions[index] #</option>
# } #
# } #
</select>
# } else { #
#= data.item.text #
# } #
</script>
你可以看到demo on Plunker。
【讨论】：