• 您的位置:開心電玩電腦軟件編程開發 → zTree中文api(jQuery樹插件) v3.5.42 官方最新版

    zTree中文api(jQuery樹插件) v3.5.42 官方最新版zTree中文api(jQuery樹插件) v3.5.42 官方最新版

    軟件大?。?/span>771KB

    軟件語言:簡體中文

    用戶評分:

    軟件類型:國產軟件

    授權方式:免費

    運行環境:WinAll

    更新時間:2020-01-21

    軟件分類:編程開發

    軟件官網:http://www.zbjieshuihg.com

    平臺檢測 無插件 360通過 騰訊通過 金山通過 瑞星通過

    軟件介紹

    zTree是一款在jQuery框架上使用的樹插件工具,這款插件可以為用戶提供多樣化的功能。我們可以使用zTree中文api來進行項目的開發,通過權限管理、樹狀菜單等功能來完成項目中最為重要的開發。從而大大提高了你的工作效率。

    zTree下載

    軟件簡介

    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? 這就要根據后臺解析數據的方法來決定了。

    大家都喜歡

    • 電腦軟件
    • 手機游戲
    更多>
    返回頂部
    金福彩票