ztree與nutz簡單使用

2021-08-31 11:00:04 字數 2012 閱讀 8926

[b][size=large]1. 說明[/size][/b]

ztree是乙個jquery外掛程式,樹形ui.功能較強大,api手冊做得很不錯。其自帶演示很強大,但要理清需花點時間。但是根據api手冊,卻能很快上手。

下面本人親自動手寫了相當於hello world的演示,親自在netbeans 7, jquery 1.6 下測試通過。 由於在用nutz做乙個專案,因此後台也就在nutz中測試了,給讀者帶來不便,請諒解。

ps:演示中ztree 用的是2.5 版本

ps1:文後提供了本文的word文件。

ps2:完整靜態演示請看 3.3節與3.4節, 其與伺服器互動,請看 第4節,

[b][size=large]2. 準備工作 [/size][/b]

jquery 1.6(至少可行)

[b][size=medium]3. hello (靜態)[/size][/b]

3.1. 引用

3.2. 關鍵

(1) html **

(2) 呼叫

ztree1 = $("#treedemo").ztree(setting, znodes);/

說明:$("#treedemo"). -----是ztree依附的節點,例子為ul節點

setting------ 配置,

znodes-------資料

(3) 資料格式1

var znodes =[

,]},,,

]},]}

];

(4) 資料格式1(簡)

var ztreenodes = [

]},]}

];(5) 資料格式2

var treenodes = [,,

,];

但是 ztree相應設定為:

var setting = ;

3.3. demo1.html ----這是完整前台檔案

3.4. demo2.html -----這是完整前能**

[b]4[size=large]. hello(動態)[/size][/b]

4.1. html網頁

說明:json方式與後台互動,關鍵點有兩處

(1) ztree配置

var  setting = ;

(2) 呼叫

$(document).ready(function()); 

下面是完整前台檔案

aa.html檔案

4.2. 伺服器,基於nutz的,如果是基於其他的,請相應變動即可

ztree的簡單使用

ztree 是乙個依靠 jquery 實現的多功能 樹外掛程式 優異的效能 靈活的配置 多種功能的組合是 ztree 最大優點。ztree 是開源免費的軟體 mit 許可證 其實ztree的api已經說得足夠明白了,自己再記錄一遍加深一下印象。id treedemo class ztree ul 1...

zTree的簡單使用

理論可以看 ztree的使用依賴於js,所以要先引入js 我這個是簡單資料模式 在對應的js中 function var log callback fn.ztree.init treedemo setting,json.parse jsonarr val jsonstr jsonstr json.p...

nutz使用技巧

json.fromjson class type,charsequence cs string json device class camera type status report uuid null system.out.println json nutmap devicestatusmap j...