最近，因為工作需要乙個樹形下拉框的元件，經過查資料一般有兩種的實現方法。其一，就是使用ztree實現；其二，就是使用easyui實現。因為公司的前端不是使用easyui設計的，故這裡我選擇了ztree來實現下拉樹。
這裡使用簡單的資料格式（即簡單的json格式）類似如下json：
var znodes =[,,這裡首先需要乙個實體bean，用來封裝對應查出來的資料，如下：,,,,
,,,,
,,,,
,,,,
];
public class ztreenode這裡需要注意的是 pid 中的第二的字母是大寫的，如果寫成小寫的就不能構造成樹形結構，所有的都是根節點。
然後，將從資料庫中查出來的資料，轉換為對應的ztree需要的bean，再轉換為相應的json，**如下：
// 獲取商品分類樹 返回json將list轉換為對應的json方法，如下：public string getgoodscategorytreejson()
return ajax(ztreelist);
}
用到的json工具包：
import org.springframework.base.util.jsonutil;這樣前台所需要的資料，就從庫里取出，並封裝成了對應的json。private static final string header_encoding = "utf-8";
private static final boolean header_no_cache = true;
private static final string header_text_content_type = "text/plain";
private static final string header_json_content_type = "text/plain";
// ajax輸出
protected string ajax(string content, string contenttype) catch (ioexception e)
return none;
} // 根據文字內容輸出ajax
protected string ajax(string text)
// 根據操作狀態輸出ajax
protected string ajax(status status)
// 根據操作狀態、訊息內容輸出ajax
protected string ajax(status status, string message)
// 根據object輸出ajax
protected string ajax(object object)
// 根據boolean狀態輸出ajax
}
接下來就是前台的實現了，前台需要匯入的js和css如下：
這裡只有demo.css是自己新增的，其他都是官方制定的，demo.css是將官方的demo用到的css修改的，如下（這裡有冗餘樣式沒有刪除掉）；div.content_wrap然後，就是對應的下拉框：div.content_wrap div.left
div.content_wrap div.right
div.ztreedemobackground
ul.ztree
ul.log
ul.log.small
ul.log li
ul.log li.dark
/* ruler */
div.ruler
div.ruler div.cursor
8這裡有乙個隱藏的文字框用來存放下拉框選擇內容對應的id。
對應的指令碼如下：
這樣，乙個下拉框就做完了。如下圖所示：
如果，需要在修改頁面中回寫相應的下拉列表資料，新增如下的指令碼：
以上就是本文的全部內容，希望對大家學習ztree外掛程式有所幫助。zTree外掛程式下拉樹使用入門教程
最近，因為工作需要乙個樹形下拉框的元件，經過查資料一般有兩種的實現方法。其一，就是使用ztree實現 其二，就是使用easyui實現。因為公司的前端不是使用easyui設計的，故這裡我選擇了ztree來實現下拉樹。這裡使用簡單的資料格式 即簡單的json格式 類似如下json var znodes ...
Ztree使用入門
目的及實現結果 建立乙個簡單的tree樹 需要引入的 js 包有 treestyle.css，jquery 1.4.4.min.js，jquery.ztree.core 3.5.js，jquery.ztree.excheck 3.5.js ztree建立樹級結構 使用其ztree的初始化方法 fn....
樹狀選單 zTree外掛程式使用
ztree 是乙個依靠 jquery 實現的多功能 樹外掛程式 而且擁有較好的瀏覽器相容性，有著豐富的功能以及可以自定義樣式，足以滿足大部分業務的開發。jquery 實現的樹狀選單 樹狀資料的web顯示 許可權管理等等。使用步驟如下 1.引入css和js檔案 2.在html頁面中想要顯示樹的地方建立...