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

How to implement tree structure type form filling dynamically in js

本文关键字：类型 表单 动态 填充 结构 js 实现      更新时间：2023-09-26

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

您可以使用Telerik剑道UI树视图。它是免费的，易于实现，并支持您的所有需求。

基本示例：

<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>
相关文章：