jQuery EasyUI-Tree使用
概要
用jQuery EasyUIde 樹形菜單控件在頁面上以一個樹形結構顯示分層數據，我們就來看下這些樹形結構是如何顯示的。
分類
關于樹形結構顯示的內容有兩種，一種是顯示的內容直接來自于前臺頁面也就是固定的文本，另一種是來自于數據庫，將數據庫里的內容進行提取在頁面進行顯示。
第一種
我們先來看第一種將數據直接寫到前臺的方法，我們先來看下效果。
接下來我們來看下代碼的實現：
這一種就是將頁面的文字直接顯示到到前臺，一般可以用來做靜態網頁時來用。
第二種
將數據庫中的文本獲取到前臺進行顯示，這里需要說下的是，關于前臺的樹加載的文本是有固定的Json格式的文本，也就是說我們從后臺獲取的數據庫中的內容是不能直接顯示的，是需要進行Json的轉換，這樣才可以使前臺順利的顯示我們的文本。
我們先來看下頁面樹加載的Json格式的數據是什么樣的：
[{
"id": 1,
"text": "Node 1",
"state": "closed",
"children": [{
"id": 11,
"text": "Node 11"
},{
"id": 12,
"text": "Node 12"
}]
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
下面就來看下的的實現過程，在這里我們使用了一般處級程序與前臺進行交互，所以我們先來看下我們的前臺與一般應用程序的交互：
先來看前臺的代碼：
在url里寫的就是我們一般處級程序的名稱，我們就是通過url這里與一般處級程序進行交互的，現在我們來看一般處理程序的代碼：
關于如何從數據庫獲取出DataTable這里我們就不贅余了。
接下來是關于將DataTable轉化為樹識別的Json格式數據的過程,大家可以照著前面我們需要的Json數據格式來理解下面的代碼：
/// <summary>
/// 節點樹的組合
/// </summary>
/// <paramname="dt">參數為DataTable</param>
/// <returns></returns>
public string getJson(DataTable dt)
{
StringBuilder json = newStringBuilder();
json.Append("[");
foreach (DataRow dr in dt.Rows)
{
json.Append("{\"id\":" +dr["id"].ToString());
json.Append(",\"text\":\"" +dr["name"].ToString() + "\"");
json.Append(",\"state\":\"closed\"");
DataTable dtChildren = newDataTable();
//調用D層方法獲取dataTable
DataSet ds =characterizationTargetBLL.GetList(" type='" +dr["name"].ToString() + "'");
dtChildren = ds.Tables[0];
if (dt != null &&dt.Rows.Count > 0)
{
json.Append(",\"children\":[");
json.Append(DataTable2Json(dtChildren,Convert.ToInt32(dr["id"])));
json.Append("]");
}
json.Append("},");
}
if (dt.Rows.Count > 0)
{
json.Remove(json.Length - 1,1);
}
json.Append("]");
return json.ToString();
}
下面我們就來看下我們的效果圖：
到這里我們通過一般處級程序將數據庫獲取的DataTable轉化為我們頁面需要的固定格式的Json數據并在前臺顯示就搞定了。
總結
上述兩種，一種是顯示的固定的文本，一種是顯示的數據庫的文本。第一種顯示方法簡單，缺點就是不能很方便的進行變換內容，第二種是可以動態的加載樹，可以針對需要隨時來變，雖然第二種比第一種復雜，但優點也是顯而易見的。
來自：http://blog.csdn.net/zwk626542417/article/details/18700773