zTree 开发过程中常见问题

这一篇博文就专门作为总结 zTree 的常见问题解答板块了。希望能对刚开始使用 zTree 的朋友们起到一些帮助。

1. zTree一定要使用 JQuery 的核心包吗？（2010-08-11）
答：zTree 是在 JQuery 核心包的基础上开发出来的专用于 WEB 上显示树形数据的插件。目前使用的JQuery版本是 jquery-1.4.2.js

2. 为什么 zTree 无法使用我生成的 JSON 数据？（2010-08-11）
答：请务必区分 JSON 格式的字符串 和 JSON 数据对象。 zTree 使用的是 JSON 数据对象，不是 JSON 格式的字符串。
____举例：
______（1）JSON 格式的字符串： var nodes = "[{id:1, name:'test1'}, {id:2, name:'test2'} ]";
______（2）JSON 数据对象： var nodes = [{id:1, name:'test1'}, {id:2, name:'test2'} ];

3. 为什么 API 文档中的 getNodes() 方法只能得到 zTree 的根节点，而不是全部节点？（2010-08-11）
答：getNodes()方法返回值是 Array(JSON) 类型的，并不是说把全部节点转换为数组传递回来，因为这样对于树这种数据类型来说，就没有太大意义了。 之所以是Array，主要是因为根节点可能会有若干个，至于根节点下面的子节点，都保存在每个 treeNode 数据的 nodes 属性下，整个数据对象的结构没有发生任何改变。（详情请参见API文档中 参数 --> zTreeNodes详解内的各个属性说明）。
____如果想遍历全部节点，请使用递归方法遍历即可——“JS操作 演示”的页面中有遍历的样例代码。

4. 怎样才能获取 checkbox 上打勾的节点并传递给后台服务器？（2010-08-11）
答：首先说如何获得全部打勾的节点——使用 getCheckedNodes(checked) 方法即可（详情请参见API文档中 方法 --> 获取 --> getCheckedNodes(checked) 内的各个属性说明）。
____然后说说给服务器提交数据的问题：提交数据无非是 Get 或者 Post，一般建议使用 Post 方式。不管用哪种方式都是需要提交字符串给后台的。一般是把需要的ID排列成逗号分隔的字符串即可（例如：1,2,3等）；如果一定使用 JSON 格式提交，就将得到的 JSON 对象转换为 JSON 格式的字符串，我们建议不要将得到的整个 zTreeNode 对象全都转成 JSON 对象传递，只保留自己后台需要的数据即可。

5. 为什么我的 zTree 样式乱套了？（2010-09-06）
答：zTree 的主要样式都依靠了 css 进行设定，在你所设计的页面中，如果针对 zTree 容器的父容器有了较多的样式设定，则有可能会导致 zTree 的样式异常，这时候你需要做的是利用 css 的命名规则，编写能覆盖部分关键样式的新样式，保证 zTree 能够正常显示。当然最好的办法是尽量避免这种情况发生。

举例（特别感谢 zsy619）：
使用模板页，结构如下：
    

 <div id="Guide_back">
        <ul>
            <li id="Guide_top">
                <div id="Guide_toptext">
                    <asp:ContentPlaceHolder ID="CphTitle" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </li>
            <li id="Guide_main">
                <div id="Guide_box">
                    <div class="zTreeDemoBackground">
                      <ul id="treeDemo" class="tree"></ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

其中模板页定义了样式：

#Guide_back, #Guide_back ul, #Guide_back li
{
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

这样将影响树型结构显示，没有层次关系了；

解决方法：
在页面定义以下样式：

#treeDemo , #treeDemo ul, #treeDemo li
{
    margin: 0;
    padding: 0 0 0 5px;
    list-style-type: none;
}

6. 如何在异步加载后自动选中第一个节点？（2010-09-14）
答：这个问题首先感谢 zsy619

解决方案参考如下:
定义一个全局变量 isFirst
var zTreeObj;
var setting;
var isFirst = false;
页面加载函数中：

$(document).ready(function() {
isFirst = true;
zTreeObj = $("#ulTree").zTree(setting, zNodes);
});

异步加载函数：

function zTreeOnAsyncSuccess(event, treeId, msg) {
if (isFirst) {
var nodes = zTreeObj.getNodes();
zTreeObj.selectNode(nodes[0]);
}
}

补充：
至于是否需要在 zTreeOnAsyncSuccess 中重新把isFirst设置成false呢？ 这就看你的需求了，是每次异步加载都要自动选择第一个节点还是说仅仅第一次的异步加载后自动选择。