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

My Original Question was this: https://*.com/questions/38596714/implement-dynamic-dropdown-in-select-tag-in-html

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

But below is what I could find on internet. I want to create something like above. Below is the code snippet. It works totally fine. But how can I make it dynamic. I mean if I add ul and li manually the tree gets rendered correctly. But I want that to happen as per the JSON received from REST API. How to add ul and li elements from nested JSON data. Can someone please help me.

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

Working Code Link: http://jsfiddle.net/jddevight/esS4k/

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

Working Code snippet:

工作代码片段:

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>

1 个解决方案

#1

Don't initialize treeview on ul element. Instead use div element. Then use datasource to assign data from json.

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

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

To update data simply call dataStore.data(newData).

要更新数据,只需调用dataStore.data(newData)。

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

Here's example how to that: http://jsfiddle.net/m2Lpw52g/

这是一个例子:http://jsfiddle.net/m2Lpw52g/

#1