Question

我想知道如何动态重命名树中的节点。我想我需要一个文本框来满足特定的需要重命名。用户单击Enter后需要更改为该节点的名称。任何人都可以帮我重命名我的树中的节点，如下所示..我需要用javascript。

我动态创建的树代码类似于

<ul id="browser" class="filetree treeview">
<li class="collapsable">
    <div class="hitarea collapsable-hitarea">
    </div>
    <span class="folder">Chat</span><ul>
        <li class="last">
            <div class="hitarea collapsable-hitarea">
            </div>
            <span class="folder">Chat</span><ul>
                <li class="collapsable">
                    <div class="hitarea collapsable-hitarea">
                    </div>
                    <span class="folder">ChatHistory</span><ul>
                        <li class="last">
                            <div class="hitarea collapsable-hitarea">
                            </div>
                            <span class="file">ChatHistory</span> </li>
                    </ul>
                </li>
                <li class="last">
                    <div class="hitarea collapsable-hitarea">
                    </div>
                    <span class="folder">CompletedChats</span><ul>
                        <li class="last">
                            <div class="hitarea collapsable-hitarea">
                            </div>
                            <span class="file">CompletedChat</span> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

Answer 1

如果您不需要浏览器完全兼容（与IE＆lt; 8 http://caniuse.com/#feat=contenteditable不兼容），您可以尝试使用contenteditable属性：

<span class="file" contenteditable="true">ChatHistory</span>

然后，您可能需要在javascript中获取此值并将其发送到服务器。这是另一个问题，但至少我可以告诉您如何根据ul上下文（最简单实现所需的jQuery）和您的文本值来获取节点的深度：

// The event could be keypress too...
// But blur event is less agressive especially if you need to send requests
$("span[contenteditable='true']").on("blur", function () {
    var value = $(this).text();
    var depth = $(this).parents("ul").length;
    console.log(depth, value);
});

演示：http://jsfiddle.net/Akaryatrh/M5WUv/

使用javascript重命名ul中的li

1 个答案: