Question

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

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

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

请参阅以下屏幕截图以了解具体要求。

。

Answer 1

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

小部件配置：

  $("#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 Options对象的模板配置，例如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树视图在树视图中添加文本框和组合框

2 个答案: