Question

我想创建一个动态树结构，我想编辑/删除节点及其数据。在这个树结构的每个级别，我们都有不同的表单来添加/编辑/删除数据。

Answer 1

您可以使用Telerik Kendo UI TreeView。它免费，易于实施，并支持您的所有要求。

基本示例：

<div class="demo-section k-header">
    <ul id="treeview">
        <li data-expanded="true">
            <span class="k-sprite folder"></span>
            My Web Site
            <ul>
                <li data-expanded="true">
                    <span class="k-sprite folder"></span>images
                    <ul>
                        <li><span class="k-sprite image"></span>logo.png</li>
                        <li><span class="k-sprite image"></span>body-back.png</li>
                        <li><span class="k-sprite image"></span>my-photo.jpg</li>
                    </ul>
                </li>
                <li data-expanded="true">
                    <span class="k-sprite folder"></span>resources
                    <ul>
                        <li data-expanded="true">
                            <span class="k-sprite folder"></span>pdf
                            <ul>
                                <li><span class="k-sprite pdf"></span>brochure.pdf</li>
                                <li><span class="k-sprite pdf"></span>prices.pdf</li>
                            </ul>
                        </li>
                        <li><span class="k-sprite folder"></span>zip</li>
                    </ul>
                </li>
                <li><span class="k-sprite html"></span>about.html</li>
                <li><span class="k-sprite html"></span>contacts.html</li>
                <li><span class="k-sprite html"></span>index.html</li>
                <li><span class="k-sprite html"></span>portfolio.html</li>
            </ul>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function() {
        $("#treeview").kendoTreeView();
    });
</script>

如何在js中动态实现树结构类型表单填充

1 个答案: