zTree 常見問題

(2011-06-07 0:00 剛剛在網站上增加了針對 v2.6 重新整理的常見問題,請去網站上查看吧 http://www.baby666.cn/hunter/zTree.html 點擊那個大大的問號)

最近已經有好幾個使用了 zTree 的朋友跟我們聯繫過,也就開始有了一些由於 zTree 的 API 幫助文檔未能更準確說明造成誤解的問題。

這一篇博文就專門作爲總結 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呢? 這就看你的需求了,是每次異步加載都要自動選擇第一個節點還是說僅僅第一次的異步加載後自動選擇。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章