Question

我的原始问题是：https://stackoverflow.com/questions/38596714/implement-dynamic-dropdown-in-select-tag-in-html

但以下是我在互联网上可以找到的内容。我想创造像上面这样的东西。以下是代码段。它工作得很好。但是我怎样才能让它变得动态。我的意思是如果我手动添加ul和li，树会被正确渲染。但我希望按照从REST API收到的JSON来实现。如何从嵌套的JSON数据中添加ul和li元素。有人可以帮助我。

工作代码链接： http://jsfiddle.net/jddevight/esS4k/

工作代码段

var dropdown = $("#dropdown").kendoDropDownList({
    dataSource: [{ text: "", value: "" }],
    dataTextField: "text",
    dataValueField: "value",
    open: function (e) {
        // If the treeview is not visible, then make it visible.
        if (!$treeviewRootElem.hasClass("k-custom-visible")) {
            $treeviewRootElem.slideToggle('fast', function() {
                dropdown.close();
                $treeviewRootElem.addClass("k-custom-visible");
            });
        }
    }
}).data("kendoDropDownList");
var $dropdownRootElem = $(dropdown.element).closest("span.k-dropdown");

var treeview = $("#treeview").kendoTreeView({
    select: function (e) {
        // When a node is selected, display the text for the node in the dropdown and hide the treeview.
        $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
        $treeviewRootElem.slideToggle('fast', function() {
            $treeviewRootElem.removeClass("k-custom-visible");
        });
    }
}).data("kendoTreeView");
var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

// Hide the treeview.
$treeviewRootElem
    .width($dropdownRootElem.width())
    .css({ "border":"1px solid grey", "display": "none", "position": "absolute" });

// Position the treeview so that it is below the dropdown.
$treeviewRootElem
    .css({ "top": $dropdownRootElem.position().top + $dropdownRootElem.height(), "left": $dropdownRootElem.position().left });

$(document).click(function(e) {
    // Ignore clicks on the treetriew.
    if ($(e.target).closest("div.k-treeview").length == 0) {
        // If visible, then close the treeview.
        if ($treeviewRootElem.hasClass("k-custom-visible")) {
            $treeviewRootElem.slideToggle('fast', function() {
                $treeviewRootElem.removeClass("k-custom-visible");
            });
        }
    }
});

HTML：

<ul id="treeview">
    <li data-expanded="true">Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li data-expanded="true">Item 2
        <ul>
            <li data-expanded="true">Item 2.1
             <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul></li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

<input id="dropdown"></input>

Answer 1

不要在ul元素上初始化treeview。而是使用div元素。然后使用datasource从json分配数据。

var treeview = $("#treeview").kendoTreeView({
  dataSource : [
    {
      "id"   :100,
      "text" :"tree",
      "items":[...

要更新数据，只需调用dataStore.data（newData）。

treeview.dataSource.data([
  { text: "bar", items: [
    { text: "baz" }
  ] }
]);

以下示例如何：http://jsfiddle.net/m2Lpw52g/

如何在HTML DROPDOWN中从嵌套的JSON数据创建ul li元素

1 个答案: