今天是easyui的Tree框架：
個人覺得easyui的Tree框架是比較難搞的，尤其是拼接tree的json數據的時候，稍有差池，就不會顯示，大傢使用的時候仔細下就好；
再有就是推薦一款國人寫的Tree插件：ZTree，很好用，大傢可以自己學習一下上面demo寫的很全面；
不說廢話瞭，直接上代碼：
View Code
<head>
<link id="easyuiTheme" href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="JavaScript.js"></script>
<!–這個是擴展Jquery的方法–>
<script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function () {
var tree = $("#tt2").tree({
url: 'JsonTree.ashx'
});
});
</script>
</head>
<body>
<!–這種方式是直接html方式實現easyui的Tree框架,lines屬性直接實現tree框架前面的虛線–>
<ul id="tt" class="easyui-tree" lines="true">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
<ul id="tt2"></ul>
</body>
</html>
這裡隻是寫瞭下Tree框架的基本使用，具體Json格式數據的拼接我就不詳細說瞭，其實無非就是一些節點的選擇與添加：
•id:節點id,這個很重要到加載遠程服務器數據
•text: 顯示的節點文本
•state: 節點狀態, 'open' 或者 'closed', 默認是 'open'. 當設置為 'closed', 節點所有的子節點將從遠程服務器站點加載
•checked: 指明檢查節點是否選中.
•attributes: 可以添加到節點的自定義屬性
•children: 一個節點數組,定義一些子節點
html代碼實現Tree框架的時候，我們可以看出，就是ul標簽套ul標簽，其實我個人認為其json格式數據也是這樣的，慢慢分析一下，是可以搞懂的；
樹json示例代碼，其中我們也可以控制一些tree的屬性，虛線，折疊，圖標等等：
View Code
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
再有就是說一下以樹為菜單時的異步加載代碼：
var tree = $("#tt2").tree({
url: 'JsonTree.ashx'
});
直接這樣，url指向一個ashx或者action發送請求就可以瞭，然後在點擊展開tree的時候，根據父節點去數據庫請求子節點，這樣就可以瞭，請求的地址肯定是要判斷請求的節點級別；
數據庫字段設計：id、pid（節點級別）、text（顯示名稱）、url（指向地址）、seq（排序）
這樣呢，基本上異步請求就可以解決瞭；