0

我在 Visualforce 页面上尝试使用 jQuery 的 Treeview，但由于某种原因它无法正常工作。

这是相关的代码。

          <apex:outputPanel id="invisibleSection" layout="block" styleClass="invisibleSectionClass">
          <script type="text/javascript">
          $("#browser").treeview();
           document.write('hi');
                $(document).ready(function() {
                        $("#navigation").treeview({
                        persist: "location",
                        collapsed: false,
                        animated: "medium"
                         });
                });

          </script>
          <ul id="browser" class="filetree">
            <li><span class="folder">Folder 1</span>
                <ul>
                    <li><span class="file">Item 1.1</span></li>
                </ul>
            </li>
            <li><span class="folder">Folder 2</span>
                <ul>
                    <li><span class="folder">Subfolder 2.1</span>
                        <ul id="folder21">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="file">File 2.2</span></li>
                </ul>
            </li>
            <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>

我document.write('hi');检查了是否甚至调用了javascript部分并正在打印它。因此，我认为还有其他问题。我已将 Treeview（zip 文件）作为静态资源包含在内。

那么我做错了什么让这不起作用。

<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}"/>

<apex:stylesheet value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}" />

更新基于约翰的以下建议：

  $(document).load(function () {

             $("#browser").treeview();

             $("#navigation").treeview({
                        persist: "location",
                        collapsed: false,
                        animated: "medium"
                         });

            });
4

1 回答 1

1

乍一看，您可能需要将脚本标签移到 UL 标签下方。因为它是一个内联脚本标记，所以 DOM 在脚本运行时可能不知道 UL id“浏览器”。我什至会移动 $("#browser").treeview();document.load 方法的内部。这将确保在页面完成渲染并建立 DOM 之后调用代码。

于 2012-08-23T01:49:48.447 回答