Javascript 剑道UI树视图在树视图中添加文本框和组合框

我们的web应用程序中已经实现了剑道树视图。在我们的新需求中，我们必须在树状视图中添加一些额外的控件

场景1：一旦用户从树状视图中选择了一个复选框，根据某些业务逻辑，一个文本框应该显示在选中复选框附近。控件所需的数据将在JS对象中

场景2：一旦用户从树状视图中选择了一个复选框，根据某些业务逻辑，一个组合框应该显示在选中复选框附近。控件所需的数据将在JS对象中。 这些控件应该基于代码中已有的某些业务逻辑在树视图的任何级别创建

我正在寻找剑道ui中的内置功能，我可以在树状视图控件中添加文本框或组合框。 我在剑道网站上浏览了很多可用的线程，但没有得到任何类似的实现

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

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

小部件配置：

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

我希望有帮助

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

小部件配置：

  $("#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。以下是一个更符合您需求的解决方案： 将另一个数据项添加到需要它的树节点：

{
   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>

---

您可以看到。

您可以使用剑道选项对象的模板配置，如DontVoteMeDown。以下是一个更符合您需求的解决方案： 将另一个数据项添加到需要它的树节点：

{
   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>

---

你可以看到一个。

这是一个很好的建议，但它几乎是我文章中的一个补充，你应该发布一个新的答案，而不是复制我的答案。很抱歉，使用模板是最简单的方法。除此之外，我们的答案完全不同。树中的所有选中项都有一个预定义的项列表，而我只有一个需要列表的项的列表。此外，无论是否选中该项，都将显示该列表。的确，我使用了您编写的基本代码，但是使用Teleriks的一个演示会得到完全相同的结果。我给了你荣誉，因为你也去了模板，看不出问题是什么…这是一个很好的建议，但它几乎是一个从我的帖子添加，你应该发布一个新的答案，而不是从我的副本。我很抱歉，但使用模板是最简单的方式去这里。除此之外，我们的答案完全不同。树中的所有选中项都有一个预定义的项列表，而我只有一个需要列表的项的列表。此外，无论是否选中该项，都将显示该列表。的确，我使用了您编写的基本代码，但是使用Teleriks的一个演示会得到完全相同的结果。我确实给了你荣誉，因为你也选择了模板，看不出问题出在哪里…@NileshRathod别忘了在回答时检查最适合你的答案。当然！！一旦我找到最好的，我一定会这么做。@NileshRathod ok。如果你需要什么，请随时告诉我们@NileshRathod别忘了检查答案是否最适合你。当然！！一旦我找到最好的，我一定会这么做。@NileshRathod ok。如果你需要什么，请随时告诉我们！