Kendo UI 树视图在树视图中添加文本框和组合框

Question

我们的 Web 应用程序中已经实现了 kendo 树视图。在我们的新要求ui评论中，我们必须在树视图中添加一些额外的控件。

场景 1：一旦用户 select 树视图中的一个复选框，一个文本框应该显示在 selected 复选框附近（基于某些业务逻辑）。 required 控件的数据将在 JS 对象中。
场景 2：一旦用户 select 树视图中的一个复选框，一个组合框应该显示在 selected 复选框附近（基于某些业务逻辑）。用于控制的 required 数据将存在于 JS 对象中。这些控件应该在树视图的任何级别创建（基于代码中已有的特定业务逻辑）

我正在 kendo-ui 中寻找 inbuilt 功能，我可以在树视图控件中添加文本框或组合框。我浏览了 kendo 站点上可用的许多主题，但没有得到任何类似的实现。

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

。

Answer 1

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

小部件配置：

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

Answer 2

您可以使用 Kendo 选项对象的模板配置，如建议的 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>

你可以看到一个demo on Plunker.

Kendo UI 树视图在树视图中添加文本框和组合框

Kendo UI Tree View Add text box and combo box inside tree view

javascript

jquery

kendo-ui

kendo-treeview

Kendo UI 树视图 在树视图中添加文本框和组合框

Kendo UI Tree View Add text box and combo box inside tree view

javascript

jquery

kendo-ui

kendo-treeview

Kendo UI 树视图在树视图中添加文本框和组合框