javascript - Kendo UI树形 View 在树形 View 内添加文本框和组合框

我们的Web应用程序中已经实现了剑道树视图。在我们的新要求中，我们必须在树视图中添加一些其他控件。


方案1：一旦用户从树形视图中选中一个复选框，则应在所选复选框附近显示一个文本框（基于某些业务逻辑）。控制所需的数据将在JS对象中。
方案2：一旦用户从树形视图中选中了一个复选框，一个组合框应显示在所选复选框附近（基于某些业务逻辑）。控制所需的数据将在JS对象中。
这些控件应该在树视图的任何级别上创建（基于代码中已经存在的某些业务逻辑）


我在kendo-ui中寻找内置功能，可以在树形视图控件内添加文本框或组合框。
我遍历了Kendo站点上可用的很多线程，但是没有得到任何类似的实现。

请参考以下屏幕截图以了解确切要求。

。

最佳答案

我认为这没有内置功能。这是一种自定义行为，因此您必须自己进行。您可以使用模板来实现。由于您没有添加任何代码，所以我自己做了一个演示：

小部件配置：

  $("#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>

希望对您有所帮助。

Demo