【zTree下載】zTree中文api(jQuery樹插件) v3.5.42 官方最新版
- 軟件類型：編程軟件
- 軟件語言：簡體中文
- 授權方式：免費軟件
- 更新時間：2024-12-13
- 閱讀次數：次
- 推薦星級:
- 運行環境：WinXP,Win7,Win10,Win11
軟件介紹
zTree是一款在jQuery框架上使用的樹插件工具，這款插件可以為用戶提供多樣化的功能。我們可以使用zTree中文api來進行項目的開發，通過權限管理、樹狀菜單等功能來完成項目中最為重要的開發。從而大大提高了你的工作效率。
軟件簡介
zTree是一個依靠jQuery實現的多功能“樹插件”。優異的性能、靈活的配置、多種功能的組合是zTree最大優點。zTree是開源免費的軟件（MIT許可證）。如果您對zTree感興趣或者愿意資助zTree繼續發展下去，可以進行捐助。
zTree軟件特色
1、zTree是一個依靠jQuery實現的多功能“樹插件”。優異的性能、靈活的配置、多種功能的組合是zTree最大優點
2、zTree是開源免費的軟件,使用MIT許可證
3、zTreev3.x將核心代碼按照功能進行了分割，不需要的代碼可以不用加載)
4、采用了延遲加載技術，上萬節點輕松加載，即使在IE6下也能基本做到秒殺
5、兼容IE、FireFox?、Chrome、Opera、Safari等瀏覽器
6、支持JSON數據，支持靜態和Ajax異步加載節點數據
7、支持任意更換皮膚/自定義圖標
8、支持極其靈活的checkbox或radio選擇功能
9、靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
10、在一個頁面內可同時生成多個Tree實例
zTree入門指南
步驟 1、文件準備
將需要使用的 zTree v3.x 相關的 js、css、img 文件分別放置到相應目錄，并且保證相對路徑正確
步驟 2、編寫 html 頁面
按照以下代碼，制作 html 頁面，訪問試試看吧，注意：
1) "<!DOCTYPE html>" 是必需的！
2) zTree 的容器 className 別忘了設置為 "ztree"
3) 入門成功后，就可以按照順序去看 Demo 了，直接看看源碼，應該能看懂的
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）
var setting = {};
// zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解）
var zNodes = [
{name:"test1", open:true, children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
zTree操作方法
ztree如何默認展開全部？
首先我們看一下默認是沒有展開節點的，如下圖所示
然后我們相關的代碼如下圖所示
接著我們找到API，找到如下圖所示的函數
然后在代碼中加入這個函數，將參數設置為true
接著在運行就看到節點都展開了，如下圖所示
最后如果參數是false就是默認的不展開，如下圖所示
zTree注意事項
1、js 核心文件
zTree v3.x 有 3 個 js 文件，一個 核心包 ( jquery.ztree.core-3.x.js )，兩個擴展包 -- 復選框功能包 ( jquery.ztree.excheck-3.x.js ) & 編輯功能包 ( jquery.ztree.exedit-3.x.js )
使用 zTree v3.x 時，核心包必須加載，擴展包根據需要進行加載；這種結構有利于今后不斷開發 zTree 的各種輔助功能或工具，而不影響基本功能。
在實際使用中，建議將使用的擴展包 與 核心包 代碼合并為一個 js 文件，以節省網絡資源，合并時一定要將核心包的代碼放在最前面.
2、css 文件
zTree v3.x 只使用一個 zTreeStyle.css 文件，為了盡量避免樣式沖突，將 zTree 容器的 className 設置為 'ztree'
v3.x 中對于主要 DOM ( li、ul、+/-圖標、a ) 的 className 增加了 level 輸出，可以針對不同等級的節點設定獨立的樣式
3、img 圖片
zTree v3.x 將主要圖標都合并為一個圖片，利用圖片切割方式顯示圖標
為了避免原先節點連線之間 1 像素間隔的問題，在 v3.x 中 +/-圖標 繼續保留 18*18 的尺寸，其余圖標全部修改為 16*16，請升級的朋友務必注意修正原先使用的圖標大小
在 v3.x Demo 中 自定義圖標都是獨立的圖片文件，實際開發中建議也都采用圖片切割的方式
4、zTree 數據
zTree 使用 JSON 數據，關于數據部分請認真查看 API 文檔 "treeNode 節點數據詳解" 中的內容，并且在 Demo 中也都可以看到 treeNode 的定義
5、調試代碼
進行程序開發時，建議首先使用 chrome 或 firefox 進行調試工作 -- 普通 js 調試，ajax 獲取數據時網絡情況的跟蹤都很容易。 個人推薦：chrome 的開發人員工具或 firefox 的 firebug 插件。
zTree常見問題
zTree 對 jQuery 的版本有要求嗎?
基本來說沒有要求，zTree 在開發中使用 jQuery 1.4.4；目前簡單測試過 jQuery 1.3+ 應該都能正常使用，如果發現和 jQuery 的兼容問題，還請及時 Email: hunter.z@263.net 通知我。
如果希望有更好的動畫效果，更高的運行效率，可以選擇較高版本的 jQuery；如果希望能有減少 js 代碼，使用基本功能，那么可以選擇 mini 版較低版本的jQuery，大家就各取所需吧。
zTree 中提供的是未經壓縮的 jQuery 1.4.4，主要是開發時便于調試。
css 樣式異常怎么辦?
產生樣式沖突的可能性很多，在這次 v3.0 的制作過程中，又更加深入了這方面的了解，大概總結如下：
1、異常原因：
頁面上自定義的 css 與 zTree 的 css 產生沖突
頁面上使用其他插件的 css 與 zTree 的 css 產生沖突
修改 zTree 的 css 錯誤影響了 zTree
2、解決方案：
由于 css 沖突的可能性太多，與其說是解決方案，不如說是處理建議。
A、避免針對 id 進行樣式設定，盡量采用 class 設置。 因為針對 id 設定的樣式等級太高，zTree 的樣式肯定會被覆蓋。
B、zTree 默認的樣式不可能將全部 css 定義都重新設置一遍，所以難免有遺漏，如果被遺漏的樣式影響了效果，那么請在 zTreeStyle 內增加上對應的設置內容，而且一旦出現這種情況，也希望你能通知我，謝謝。
C、如果以上都不能解決，那么再看看是否有命名規則沖突，導致了樣式沖突
D、最后再看看是否自己修改的 zTree 樣式出現了錯誤
如何將 節點數據提交給 Server 端？
你可以利用 Form 或 Ajax 提交數據。
把 JSON 數據轉化為參數是比較麻煩的。在今后，我會逐漸提供一些工具包便于大家生成各種格式的數據。
制作提交數據的基本方法：拼字符串
拼接成什么格式的字符串？ 是 url? xml? 還是 json？ 這就要根據后臺解析數據的方法來決定了。